[ianfeather]

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

[ahoge]

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.

[ianfeather]

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

[car]

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>