EmmanuelOga / svgfragment

A quick example of using an SVG as sort of a sprite sheet

What's this

A demo of how to include sprites in a single SVG and extract pieces.

1. Draw SVGs, add wrappers with id="the-id" in the relevant elements (G, SYMBOL, plain PATHs etc.)

2. Create a SVG with a USE tag like this:

<svg>
    <use xlink:href="/drawing.svg#the-id"></use>
</svg>

3. 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);

Optimizing the SVG

$ yarn global add svgo
$ svgo --disable=cleanupIDs drawing.svg