A demo of how to include sprites in a single SVG and extract pieces.
-
Draw SVGs, add wrappers with id="the-id" in the relevant elements (
G
,SYMBOL
, plainPATH
s etc.) -
Create a SVG with a
USE
tag like this:
<svg>
<use xlink:href="/drawing.svg#the-id"></use>
</svg>
- Profit.
To automate the process of creating those SVG elements a bit, a lil bit of JavaScript is used:
// Creates the SVG similar to the piece above within s.element.
const s = new SvgFragment('drawing.svg', 'the-id');
// Append!
document.body.appendChild(s.element);
// Convenience: move the top/left property of the element.
s.move(10, 10);
$ yarn global add svgo
$ svgo --disable=cleanupIDs drawing.svg