Inspired by GitHub’s Octicon spritesheet system.
It is often desired to be able to dynamically style monochrome SVG icons much the way text may be styled with the color CSS property. In order to allow for SVGs to be styled, it is recommended to produce flat SVG assets which use only paths with a fill property, rather than some combination of fills and strokes with a given width.
By removing all fill attributes from a candidate SVG’s groups and setting the top-level style of a container SVG to fill: currentColor, an SVG may be easily styled to respond to user interaction.
Furthermore, it is often desired to bundle many SVG definitions into a single spritesheet and then reference these definitions using the <use> tag; each instance simply deep clones the definition found in the spritesheet so that the SVG may be uniquely styled by inheriting a color property from a containing DOM element. In order to reference unique definitions, each definition needs a unique id attribute. The filename of a given SVG asset is a good candidate for a unique id.
Drag SVG files from your file system into the drag-n-drop area.
Inspect the rendered SVG assets, which reference a definition in a spritesheet using the filename as a unique id.
Highlighted assets may:
none or #000000.stroke attribute (a flat SVG uses only paths with a fill property).Use the spritesheet.svg downloaded automatically by your browser by referencing ids equal to a given asset’s filename like so:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<defs>
...
<symbol>
<g id=-"my_awesome_icon">
</g>
</symbol>
...
</devs>
</svg>
...
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#my_awesome_icon" />
</svg>
</body>