Hacker News Reader

Comment by ahoge | Hacker News Reader

> 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.

View on HN

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>

Reply on news.ycombinator.com