How to optimize SVGs exported from Figma or Illustrator

An SVG straight out of a design tool works, but it's rarely lean. Figma and Illustrator write their own IDs, group structure, class names and long decimals into the file, and none of it changes how the graphic looks. Getting the export settings right removes some of that. An optimizer removes the rest, and a typical export shrinks by 50 to 80 percent.

Before you export

A few things in the design itself make a bigger difference than any setting.

Decide first what to do with text. Figma outlines text by default, turning each letter into a shape. That's right for a logo or a wordmark, where the font has to look exact. For anything people should be able to read with a screen reader, search or translate, keep the text as text and load the font on the page instead.

Effects are the next thing to watch. Drop shadows, blurs and some blend modes become SVG filters, which are heavy and slow to draw, or get flattened into an embedded bitmap. If the graphic needs a shadow, a CSS filter: drop-shadow() on the finished SVG is often cheaper.

Check for embedded images, too. A photo or texture inside the design ends up in the SVG as a long base64 string, which can easily run to hundreds of kilobytes. If an image is the point of the graphic, export it as an image instead.

Last, clean up the shapes: delete hidden layers, merge shapes that overlap, and flatten boolean groups once they're final. Fewer paths means less code.

Exporting from Figma

Select the frame or layer, and in the Export section of the right panel choose SVG. Before exporting, open the settings with the … button:

• Include "id" attribute: leave it off unless you plan to target parts of the SVG with CSS or JavaScript. With it on, every layer name becomes an id, and names like "Rectangle 12 copy" end up in your markup.
• Outline text: on for logos and wordmarks, off when the text should stay real text.
• Simplify stroke: leave it on. SVG only draws strokes centered on the path, so Figma rewrites inside and outside strokes into shapes that render the same way everywhere.

For a quick one-off, you can also right-click a layer and choose Copy/Paste as, then Copy as SVG, and paste the code straight into an optimizer.

Figma exports at 1x only, which is fine: SVG scales to any size anyway.

Exporting from Illustrator

Use File, Export, Export As and choose SVG, rather than Save As. Save As can keep Illustrator's own editing data in the file, which you don't want on a website.

In the SVG Options dialog:

• Styling: choose Presentation Attributes. The alternative, Internal CSS, writes class names like .cls-1 into a <style> block. If you put two of those SVGs inline on the same page, their classes clash and one graphic takes on the other's colors.
• Font: Convert to Outlines for logos, SVG to keep text as text.
• Images: Embed or Link. Embedding adds a base64 copy of the image to the file.
• Object IDs: Minimal, unless you need to target specific layers by name.
• Decimal: 3 or 4 is plenty here. The optimizer will round further and tell you if that changes the shapes.
• Minify: off. The optimizer does it better, and unminified output is easier to check.
• Responsive: turn it on to leave out the fixed width and height, so the SVG scales to its container.

Optimize the export

Now run the file through an optimizer. The SVG optimizer here uses SVGO, the same tool behind most build pipelines, with settings that keep the output safe. It removes editor metadata and comments, merges paths, collapses groups that do nothing, shortens path data and rounds numbers.

The setting that matters most is decimal precision. Two decimals is invisible for nearly every icon and illustration, and icons drawn on a 24 by 24 grid can often go to one. The optimizer compares the result with the original pixel by pixel and warns you if rounding visibly changes the shapes, so you can raise the precision if it does.

A few options are worth knowing about:

• Prefix IDs with the file name stops gradients and clip paths from clashing when several SVGs are inlined on one page. Exports often use short generic IDs like a or paint0_linear, so two inlined SVGs can end up fighting over the same name. This fixes a lot of mystery bugs.
• Use currentColor makes a single-color icon take the color of the text around it, so one file works in any color.
• Remove width and height lets the SVG scale to its container. The viewBox is always kept, since an SVG can't scale without it.
• Keep the title leaves the <title> in place for screen readers. Turn it off for purely decorative graphics.

When it's done, you can copy the result as a plain SVG file, inline HTML, a React component (JSX or TSX) or a CSS background.

Check the result

Look at the optimized SVG at the size it will actually display, next to the original. If anything shifted, raise the precision a step.

Then check it on the page. Inline SVGs need the viewBox to scale properly, and an SVG used as an <img> needs alt text like any other image. For a decorative graphic, use an empty alt="" on an <img>, or aria-hidden="true" on an inline SVG.

To clean up a whole folder at once, drop all the files into the SVG optimizer and download them as a zip. Your files never leave your device.