SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.ht...

matthuggins · on Oct 8, 2013

I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.

ygra · on Oct 8, 2013

What exactly don't you understand? I find the W3C specs fairly well-written, actually.

You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g.

  <svg>
    <defs>
      <symbol id='foo'>
        <circle r='5' cx='10' cy='3'/>
      </symbol>
    </defs>
    <use xlink:href='#foo' x='2' y='5'/>
    <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/>
  </svg>

(does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)