SVG Sprite Generator

How the SVG Sprite Generator works

How the SVG sprite generator works

An SVG sprite is one document containing many <symbol> elements, each an icon with its own viewBox and an id. Reference a symbol with <svg><use href="#icon-name"/></svg> and the browser draws it at whatever size the outer element has. The technique gives you one request for the whole set, icons that inherit currentColor from surrounding text, and markup that stays small because the path data lives in one place.

What the tool does with each file. The SVG is parsed, its viewBox read, and everything inside the root element copied into a <symbol>. Files with no viewBox get one made from their width and height, or 0 0 24 24 as a last resort, so the symbols scale. The id comes from the filename, lowercased with spaces and punctuation turned into hyphens, with the prefix from the field in front, so Arrow Right.svg becomes icon-arrow-right.

Inlining the sprite. Paste the sprite's markup at the top of <body>; the style="display:none" on the root keeps it from taking up space or being seen. Symbols are not drawn until used. This is the most reliable method and works in every browser, but the sprite is repeated in every page's HTML, which matters only if the set is large.

Referencing an external file. Alternatively serve sprite.svg and reference symbols with <use href="sprite.svg#icon-name"/>. The file is cached across pages. The external form requires the sprite to be on the same origin, and Safari before version 12 could not do it at all, so the inline form is the safe default.

Sizing and colouring. Give the outer <svg> a width and height, or use CSS such as .icon { width: 1em; height: 1em; fill: currentColor; } so icons scale and colour with the text around them. Icons with hard-coded fills will keep those colours; run them through the colour replacer first to switch fills to currentColor if they should inherit.

Ids collide and namespaces get dropped. Two files with the same name after slugging will produce duplicate ids, and only the first will be drawn. Gradients and clip paths inside an icon keep their own ids, which can also collide between icons that were exported from the same template; rename them if an icon renders with the wrong gradient. Namespace declarations on inner elements are stripped because they are inherited from the sprite root.

Optimising first. Sprites carry every byte of their symbols, so run the icons through the SVG optimizer before combining them. Editor metadata, comments and unused defs add up quickly across a set of fifty icons.

Related tools