svg-sprite-tools

Tools for packing, unpacking, and using SVG sprites (i.e. <symbol>'s)

Written in PHP. Uses the SimpleDOM library (included).

svg-sprite-unpack

Takes a svg-sprite package (such as those generated by http://icomoon.io) and exports the individual SVG files.

svg-sprite-pack

Takes 1 or more SVG files as input, outputs as svg-sprite package.

It uses the <title></title> element to figure out what the id should be. If no title is present, or they conflict, an error will be reported.

Like icomoon, if title is "asset", the id will be icon-asset. If you want to change this, change $id_prefix at the top of the file.

Cross Browser Assumptions

• <defs></defs> is not needed
• xmlns='blah' attributes are not needed (invalid XML, but SVG is SVG)
• File can begin with <svg> instead of an XML header
• All SVG assets will be loaded in to the global scope. Really, you should only have one SVG file you embed/load, not multiple. The <use xlink:href="my_file.svg#icon-banana"> syntax is wonky anyway.

svg-sprite-css

Takes an svg-sprite package and generates a CSS file containing new widths, for any icon that isn't square (icons are assumed to be 1em by 1em). This CSS code will correct the aspect ratio.

Using sprites

<svg class="icon icon-banana"><use xlink:href="#icon-banana"></use></svg>

Set the font-size to change the size of the icon.