Tips for Illustration File Optimization

When creating a graphic many designers pay attention only to the appearance of the exported graphic. When working with SVG, it's also essential to consider how the code output is affected as well. Several steps can be taken in your design program (Adobe Illustrator or Figma) to optimize exported SVG graphics.

Please follow the steps below to ensure the best possible Smart SVG™ performance.

Optimizing an Illustration in Adobe Illustrator

  1. Remove any unnecessary points along your file paths

  2. Keep strokes un-outlined wherever possible

  3. Create compound paths of graphic elements that use the same fill and stroke style

  4. Verify that the Swatches dialogue contains only your icon colors

  5. Swatches dialogue > Add Used Colors

  6. Swatches dialogue > Select All Unused > Delete

Exporting an Illustration From Adobe Illustrator

  1. Place your illustration on a single Artboard

  2. Object > Artboards > Fit to Artwork Bounds

  3. File > Export > Export As… > SVG > Export > (no changes) > OK

Optimizing an Illustration in Figma

  1. Remove any unnecessary points along your file paths

  2. Flatten OR Outline all text elements

Exporting an Illustration From Figma

  1. Select the illustration

  2. Background Fill dialogue > hidden

  3. Export dialogue > SVG > Export


We’ve Heard Good Things

A successful Smart SVG™ begins with a strong SVG. Consider these tools for optimization. 

1. Un-outlined strokes contain fewer data points than outlined strokes, resulting in a smaller file size. To convert outlined strokes back into single strokes, we’ve heard good things about  Producthunt.