Why SVGs need optimising
SVG files exported from Illustrator, Figma, Sketch or Inkscape carry far more than the shapes you see. Editor metadata, layer names, generator comments, unused definitions and coordinates with six or more decimal places can double or triple a file’s size without changing a single visible pixel.
For one icon that hardly matters. Across a logo, an icon set and a handful of illustrations loaded on every page, it adds avoidable weight, and inline SVGs also bloat the HTML document itself.
What gets removed
- Comments and XML declarations that browsers ignore.
- Editor metadata such as Inkscape and Sketch namespaces.
- Auto-generated IDs like
Layer_1andpath-23. - Redundant data attributes added during export.
- Excess decimal precision in path coordinates.
Accessible, search-friendly SVGs
When an SVG carries meaning, such as a logo or an informative diagram, give it a text alternative. Inline SVGs can use role="img" with a <title> element, and SVGs loaded through <img> need an alt attribute. Purely decorative graphics should be hidden from assistive technology with aria-hidden="true".