SVG fills in external file

Question

Really basic SVG question. I have read SVG sprite in external file and it works fine for me to add a svg graphic, but I can\'t get it to work with defs. First the f

Answer 1

xlink:href="defs.svg#patternDefs" should be xlink:href="defs.svg#pattern1"

On top of that <use> has to point to something to be rendered, not a pattern. If you want to fill a circle with a pattern just set the circle's fill to the pattern. E.g.

<svg>
    <circle cx="80" cy="80" r="50" stroke-width="2" stroke="red" fill="url(defs.svg#pattern1)" />
</svg>

Note that external fills are not widely supported, although they do work on Firefox for instance.