Question

I use the same clipPath in different inline SVG’s what:

http://jsfiddle.net/meo/4nBnS/

<svg class="svg-graphic" width="0" height="0" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="hex-mask">
        <polygon points="270,0 0,160 0,485 270,645 560,485 560,160"></polygon>
    </clipPath>
</svg>


<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="purple"  />
</svg>

<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="red"  />
</svg>

Is it a good practice to do a 0x0px SVG element with all the paths i would like to use? Is there a better way to do this?

Answer 1

Typically you’d define the reusable components inside a <defs> element (in one of the <svg> elements on your page). It doesn’t matter that much in which of the <svg> elements the <defs> is placed, but I’d recommend you to put it as the first child inside the first svg on the page (since the references can then be resolved directly on first use).