Does this work when you reference svgs within css though? Or do you need to have access to the svg nodes?

You do that inside the SVG. Instead of having a yet another path or a group of paths, you just have that `use` element (which just references some other node).

Basically, it lets you reuse something, but you can transform it and set some styles.

http://kaioa.com/svg/chemicalzen3.svg

http://kaioa.com/svg/chemicalzen3_parts.png

The "master" shape is used to create the outline and it's also used to clip the "interior" layer.

http://kaioa.com/svg/armyofclonesani.svgz

There is just one dude. Then there is a row of clones. And then there are transformed clones of that row. Only the original dude is animated.

Edit: A big benefit of clones is that they are always in sync. If you change the shape of the original, the clones follow suit.

That's awesome. Very very cool. Will look into it, thanks!

You can reference SVG documents or elements within those in HTML. More here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x...

Here an example, where a whole svg document is linked to from another svg element (scaled with viewBox):

  <div>
    <svg viewBox="0 0 500 500" width="200" height="75">
      <g>
        <use xlink:href="#BaseQuality-svg"></use>
      </g>
    </svg>
  </div>