SVG Sprite Optimizer

About SVG Sprite Optimizer

This tool takes a batch of SVG icons and does two jobs. First it slims each file down: it drops the XML declaration, comments, metadata and Inkscape, Sodipodi and Sketch editor attributes, collapses whitespace and trims decimal places. Then it combines the results either into one symbol-based sprite or into a set of CSS classes carrying data URIs.

It is not SVGO. It does not recompute path data; it removes text according to fixed rules. That makes the output predictable, but it also means you should know which rule can break what.

How symbol and use make a sprite

A symbol element is a template that is never rendered on its own. Give each symbol an id and a viewBox, collect them inside one SVG, and anywhere on the page a use element can point its href at an id such as #icon-home to draw a copy. You avoid one HTTP request per icon, and an icon used twenty times still ships its path data once.

The tool derives each id from the file name: lower-cased, anything other than letters and digits turned into hyphens, prefixed with icon-, and prefixed again if it would start with a digit. If the source has no viewBox, one is built from width and height, or assumed to be 0 0 24 24. When use points at a separate file (sprite.svg#id), browsers only allow same-origin references, so a sprite hosted on another domain such as a CDN will not resolve. In that case, inline the sprite in the HTML body.

Colliding ids across files

SVGs exported from design tools routinely name their gradients and clip paths paint0_linear, clip0 or just a. Merge several such files into one sprite and the same id appears more than once. The browser resolves each reference to the first match in the document, so the second icon quietly gets painted with the first icon's gradient.

The tool prefixes every internal id inside a symbol with the symbol id and a double underscore — icon-home__clip0, for example — and rewrites the references to match: url(#…), href="#…", and animation begin and end values. References to ids that are not defined inside that file are left alone.

What is safe to strip — and what isn't

Comments, the XML declaration, metadata blocks and editor-only attributes have no effect on rendering, so they are safe to remove. viewBox is a different matter: it is what keeps the proportions right when the icon is resized. SVGO leaves both viewBox removal and title removal out of its preset-default for this reason, and this tool keeps viewBox too.

title and desc are kept. Unlike metadata blocks, they are the accessible name a screen reader announces for the icon, so they stay inside each symbol in the sprite as well. Some browser and screen reader combinations don't read the title of an icon pulled in with use, though, so for icons that carry meaning it is still safer to add a name on the HTML side with aria-label or visually hidden text.

Whitespace collapsing removes all whitespace between tags. Shape-only icons are unaffected, but an SVG that sets words with text and tspan elements can lose the spaces between them. Check any SVG containing text by eye after optimising.

Choose decimal precision by viewBox size

The precision slider (0–4, default 2) rounds every decimal number in the document. The error is measured in user units, so how visible it is depends on the viewBox. On a 24×24 icon, two decimal places means at most 0.005 units — 0.005 px when drawn at 24 px, which nobody can see. At 0 the error can reach 0.5 units, and on a 24 px icon lines may wobble by half a pixel.

The flip side: SVGs drawn in a tiny coordinate system, say viewBox="0 0 1 1", visibly lose their shape even at two decimal places. If curves look faceted in the preview, raise the precision.

Symbol sprite or CSS sprite?

A symbol sprite renders as inline SVG, so icons drawn with fill="currentColor" follow the surrounding text colour, and you can change colour and stroke width from CSS. The CSS sprite embeds each icon as a data URI in background-image. An SVG loaded that way is a separate document and ignores the page's CSS and currentColor, which suits fixed-colour logos and illustrations.

The data URIs are URL-encoded rather than base64. Base64 inflates the markup by about a third and compresses poorly with gzip, while URL-encoded SVG keeps its text structure and compresses better in transfer.

Worked examples

How to use it

1. Drop several SVG files.
2. Set the decimal precision and check the saving for each file.
3. Copy or download the symbol sprite or the CSS sprite.

Frequently asked questions