On: We switched from an icon font to SVG

[ahoge]

> As we were just duplicating the same icon multiple times within the same file, it compressed down to the size of just one icon

SVG allows you to create clones with the `use` element. Any style which wasn't set by the original can be set by the clone.

E.g. if you don't set `fill`, the original will be filled with black and the clones can be filled with some other color.

[ianfeather → ahoge]

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

[ahoge → ianfeather]

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 → ahoge]

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

[car → ianfeather]

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>