Tips for Logo 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 a Logo in Adobe Illustrator

  1. Remove any unnecessary points along your file paths

  2. Set all text elements to outline

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

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

  5. Swatches dialogue > Add Used Colors

  6. Swatches dialogue > Select All Unused > Delete

Exporting a Logo From Adobe Illustrator

  1. Place your logo on a single Artboard

  2. Object > Artboards > Fit to Artwork Bounds

  3. File > Export > Export As… > SVG > Export > (keep current settings) > OK

Optimizing a Logo in Figma

  1. Remove any unnecessary points along your file paths

  2. Flatten OR Outline all text elements

Exporting a Logo From Figma

  1. Select the logo

  2. Background Fill dialogue > toggle to 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.