Should be better now. thanks :)

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>

We consider the system font critical, and we render the page with that because it it will load instantly. The custom font is then loaded after the content and used on the following page.

Note: this setup is only used sparingly on our site as it has been waiting for this piece of work to be completed.

Curious, the first time I read your post, I saw exactly what I described, which is all text was missing for a second, and then appeared in the custom font.

But when I try now, I get the system font for a second, then it switches over to the custom font.