Design · 4 min read
Optimizing SVG Files: Smaller, Cleaner Vector Graphics
An SVG exported from Figma or Illustrator often carries editor metadata, unused definitions, and paths with eight decimal places. Optimising it commonly cuts the size by half or more without any visible change.
Try it yourself with the related tool.
Optimize an SVG →Advertisement
What gets removed
Optimisers strip comments, editor namespaces and metadata, hidden or empty elements, unused <defs>, and default attribute values. They also shorten colours and merge or simplify paths.
Precision is the big win
Path coordinates such as 12.000000381 are pointless on screen. Rounding to one or two decimals is invisible for icons and saves a lot. Lower precision further only for large, simple shapes — go too low and curves start to wobble.
Settings that can break things
Removing the viewBox stops an SVG from scaling. Removing or renaming IDs breaks CSS or JavaScript that targets them and links between gradients and shapes. Removing title hurts accessibility. Keep these when the SVG is styled, scripted, or meaningful content.
Delivering SVG
SVG is text, so it compresses well with gzip or Brotli. Small icons can be inlined in HTML so they inherit currentColor; larger illustrations are better as cached files referenced by <img>.