Tips for Icon 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 Icon 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 Icon From Adobe Illustrator

  1. Place your icon on a single Artboard

  2. Object > Artboards > Fit to Artwork Bounds

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

Optimizing an Icon in Figma

  1. Remove any unnecessary points along your file paths

  2. Flatten OR Outline all text elements

Exporting an Icon From Figma

  1. Select the icon

  1. Background Fill dialogue > hidden

  2. 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.