Responsive svg clipPath with background image - svg

I need to apply an SVG as a clipping path to a container with a repeating background image. The effect will mean, in this case, a textured background to a piece of SVG text.
I have managed to get this to work with the following;
<div class="word">
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.6 144.52" height="0" width="0">
<clippath id="clipPath">
<path d="M203.78,426.6c-3.26,1.51-6.26,3.11-9.41,4.3-2.56,1-5.18,2.74-8.09,1.33a15.48,15.48,0,0,1-8.19-8.66c-0.43-1.16-.88-2.31-1.48-3.87-1,1.15-2,2.05-2.73,3.07-3.88,5-9.15,8.19-14.83,10.67-2.65,1.16-5.54,1.49-8.05-.55s-2.82-4.79-2.31-7.72a30.69,30.69,0,0,0,.81-6.31c-2,1.17-4,2.3-6,3.51-3.24,2-6.31,4.28-9.7,5.92a11,11,0,0,1-10.79-.4c-1.7-1-2.7-.72-4.14.84-4.74,5.12-9.69,10-14.74,14.85s-12,2.27-15.12-2.86c-4.25-7-3.87-14.55-2.49-22.05A328.77,328.77,0,0,1,100.28,369c0.72-2-.09-2.56-1.71-2.87-4.08-.77-8.16-0.92-12,1A35.93,35.93,0,0,0,82.65,370c-0.55.38-1.45,0.88-1.86,0.67a2.05,2.05,0,0,1-.84-1.82,6.55,6.55,0,0,1,1.7-2.88c3.9-3.47,8.67-4.39,13.71-4.28a32.55,32.55,0,0,1,5.47.49c1.8,0.35,2.74-.23,3.51-1.86,1.76-3.76,3.71-7.43,5.58-11.15,1.77-3.52,2.84-4.15,6.17-2.11a45.54,45.54,0,0,1,7.63,6.59c0.38,0.37,0,1.91-.42,2.63-1,1.61-2.35,3-3.5,4.55a24.48,24.48,0,0,0-1.39,2.47c4.27,0.19,7.87-.13,11.38-1.67a17,17,0,0,1,3.9-.72,17.47,17.47,0,0,1-1.69,3.61c-3,3.82-6.76,5.41-11.65,4-3.58-1-4.93-.35-6.06,2.76-3.63,10-7.36,20-10.65,30.06-1.4,4.31-1.81,8.95-2.65,13.44-0.67,3.59-1.68,7.16-1.88,10.78a42.52,42.52,0,0,0,1,9.38,3.33,3.33,0,0,0,4.64,2.43,20.31,20.31,0,0,0,5.25-4c1.91-2.06,3.39-4.53,5.15-6.74,2.38-3,3.92-6,3.82-10.14-0.11-5,2.46-9.38,5.46-13.15,4.09-5.13,8.59-9.95,14.77-12.8a22,22,0,0,1,15.29-1.67c3,0.8,4.69,3.32,4.7,7.1,0,2.37-1.84,4.35-5.09,5.23a32.4,32.4,0,0,0,0-4.85c-0.53-3.42-1.49-4-4.35-2.19a43.11,43.11,0,0,0-14.59,14.75,60.08,60.08,0,0,0-4.66,9.62c-1.48,4-.25,5.4,3.88,4.66a12.31,12.31,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,156,409c1-1.79,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115,115,0,0,0-6.27,11.9c-0.81,1.64-.1,2.78,1.78,2.22a14.21,14.21,0,0,0,5.32-2.46,125.49,125.49,0,0,0,10.43-10.38,8.24,8.24,0,0,0,1.5-4.77A73.31,73.31,0,0,1,181.79,386c0.79-1.81,1.83-2.51,3.84-2.25,6.33,0.81,9.86,5.14,12.65,10.18,0.46,0.83-.43,2.82-1.23,3.87a42.35,42.35,0,0,0-9,25.41c-0.08,3.57,1.24,4.64,4.6,3.27a55.2,55.2,0,0,0,8.59-4.5c3-1.91,4.48-4.77,5-8.47,0.91-6.65,2.32-13.25,3.68-19.83a13.85,13.85,0,0,1,2-4c3.56-5.93,6.8-6.23,13.57-3.47a19.47,19.47,0,0,1,2.92,1.91,3.13,3.13,0,0,1,1.2,4.54c-1.55,2.73-3,5.64-5.1,7.91a26.82,26.82,0,0,0-7.62,18.7,49.6,49.6,0,0,1-.58,5.3l0.58,0.31a16.68,16.68,0,0,0,2.24-1.68c7.29-7.64,14.53-15.33,21.86-22.94,0.95-1,1.62-3.32,3.65-1.91s0.39,3-.28,4.38a50.23,50.23,0,0,1-10.79,14.57c-5.63,5.43-11.46,10.64-17.06,16.1a8.44,8.44,0,0,0-2,4.11c-1.24,5.69-2.06,11.47-3.43,17.12-3.61,14.91-12,26.35-25.59,33.67-6,3.22-12.14,2.5-17.88-.85-4.89-2.85-6.28-8.44-4.15-14.51a36,36,0,0,1,11.49-15.75c7.68-6.35,15.66-12.35,23.74-18.19C203.7,435.37,204.92,433.24,203.78,426.6Zm-2.84,20.54-0.84-.42c-5.56,4.21-11.44,8.07-16.6,12.71-6.16,5.54-12.18,11.35-15,19.62-1.66,5,.24,7.64,5.45,7.34,4.16-.24,7.13-2.53,9.69-5.5,7.29-8.45,13.4-17.58,16-28.64Zm18-49.36,0.89,0.45c1.54-2.22,3.12-4.42,4.58-6.69a3.59,3.59,0,0,0-.05-1.74,3,3,0,0,0-1.54.14A11.5,11.5,0,0,0,218.92,397.78Z" transform="translate(-12.27 -345.86)"/>
<path d="M514.79,416.66c-2.39,2.92-4.3,5.53-6.5,7.87A31.22,31.22,0,0,1,493,434c-5.5,1.36-9.24-2.46-8.43-8.15a40.68,40.68,0,0,0,.86-6.94,58.75,58.75,0,0,0-6,3.64c-3.84,3-7.63,5.79-12.6,6.72-4,.74-7.26-0.69-10.32-2.7-1.05-.69-1.37-2.49-2.18-4.07a18.89,18.89,0,0,0-2,1.8c-4.09,4.81-9.58,7.53-15.34,9.42A16.38,16.38,0,0,1,425,432.56c-2.31-1.08-3.06-3.48-3-5.92,0.05-3.81.31-7.62,0.49-11.77a9.32,9.32,0,0,0-1.63,1c-7.9,7.82-17.37,13.06-27.76,16.69a14.25,14.25,0,0,1-6.38.73,8.08,8.08,0,0,1-4.53-2.56,19.34,19.34,0,0,1-4.7-13.59c0-1.87-.74-2.23-2.53-2.42-4.5-.47-7.41,1-9.44,5.22-1.4,2.94-3.81,5.43-5.94,8a5.94,5.94,0,0,1-6.5,2.07c-3.13-.85-6.33-1.45-9.41-2.45-4.66-1.51-6.15-5.64-6.5-9.81-0.76-9.11,3.31-16.6,9-23.34a2,2,0,0,1,1.51-.71c2.54,0.53,2.74-1.08,3.13-2.93a24.27,24.27,0,0,1,1.87-5.64c1.7-3.49,4.17-4.52,8-3.93,4,0.62,7.86,1.41,10.31,5.2,3.38,5.24,3.78,10.87,2.44,16.77-0.33,1.44-.71,2.87-1.07,4.28,3.55,1.13,6.41-.09,8-3.07,3.66-6.83,8.59-12.46,15.74-15.8,2.93-1.37,6-2,9.2-.94,1.89,0.63,3.86,1,5.79,1.52,5.13,1.41,7.29,5.93,5.08,10.85a20.09,20.09,0,0,1-3,5.25c-1.81,2-5.41,2.34-6.49,1-1.28-1.56-.15-5,2.05-6.8a6.61,6.61,0,0,0,2.17-2.85c0.89-3-.79-4.78-3.82-4.18a7,7,0,0,0-3.21,1.72c-7.58,7-11.62,15.89-13.16,26a13.64,13.64,0,0,0,.42,4.93c0.5,2.19,2.16,3,4.38,2.52a40.4,40.4,0,0,0,21.13-12,19.7,19.7,0,0,1,1.74-1.79c6.47-5.33,9.91-12.59,12.71-20.21,0.71-1.93,1.67-3,3.76-2.74a59.38,59.38,0,0,1,8,1.28c2.72,0.76,3.22,2.51,2.22,5.2-2.89,7.69-5.76,15.39-8.53,23.13-0.48,1.33-.4,2.86-0.66,5a37.51,37.51,0,0,0,4.73-1.47c2.17-1,4.23-2.3,6.36-3.43,5.28-2.8,8.42-7.15,11-12.61a36,36,0,0,1,19.59-18.32,19.36,19.36,0,0,1,13-.72c3,0.9,4.69,3.33,4.71,7.11,0,2.37-1.82,4.34-5,5.22a36.68,36.68,0,0,0,0-4.34c-0.45-3.73-1.65-4.49-4.66-2.57a43.33,43.33,0,0,0-14.38,14.63,61.22,61.22,0,0,0-4.66,9.62c-1.49,4-.25,5.4,3.87,4.66a12.3,12.3,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,492,409c1-1.8,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115.05,115.05,0,0,0-6.27,11.9c-0.81,1.64-.11,2.75,1.79,2.22,1.73-.48,3.72-1,4.93-2.14,4.81-4.7,9.38-9.65,14-14.54,2.72-2.88,3.39-6.62,4-10.31,2.51-15.88,8.75-30.46,15.52-44.85,1.84-3.91,4.24-7.53,8-10.07a6.73,6.73,0,0,1,7.32-.64c2.37,1.32,4.27,3.31,4.38,6.5a39.94,39.94,0,0,1-7.34,24.66c-3.59,5.2-7.91,9.91-11.34,15.19-1.94,3-3,6.62-4,10.09-1.09,3.66-1.59,7.48-2.51,11.19-1.31,5.27.12,10.24,1.5,15.22,0.54,2,2.25,2.58,4.18,1.66a23.54,23.54,0,0,0,9.6-8.49q8.25-12.5,16.6-24.93a14.66,14.66,0,0,1,2.21-2.15l1,0.77c-1.27,2.21-2.47,4.47-3.83,6.63-2.77,4.43-5.89,8.66-8.36,13.24-4.34,8.06-9.39,15.46-16.47,21.4-4.86,4.08-11.77,3.4-14.73-2.88-2.5-5.31-4.57-10.49-4.39-16.41A11.64,11.64,0,0,0,514.79,416.66ZM535,385.54l0.75,0.32a5.81,5.81,0,0,0,1.16-.83c4.41-5.21,8.89-10.46,11.11-17,1.48-4.35,2.12-9,3-13.53,0.39-2-1.14-3-2.62-3.36-0.82-.18-2.26.73-2.83,1.56A19.24,19.24,0,0,0,542.9,358c-2.09,6.89-4,13.85-6,20.78C536.29,381,535.62,383.27,535,385.54Zm-181.38,19c-3.59,3.2-7.85,12.63-6.7,18.69,0.3,1.56,1.34,2.18,2.46,1.54a59.78,59.78,0,0,0,9.74-6.31c1.61-1.39,2.52-3.94,3-6.13,0.13-.66-2.4-1.85-3.71-2.8a4,4,0,0,1-.57-0.49Zm11.3,3.51c1.06-3.86,2.49-7.28,2.83-10.81,0.31-3.29-.44-6.71-1-10a3.56,3.56,0,0,0-1.89-2c-0.29-.15-1.32.79-1.78,1.41a16.37,16.37,0,0,0-2.86,13C360.71,402.58,361.5,405.73,364.88,408.07Z" transform="translate(-12.27 -345.86)"/>
<path d="M43.08,460.72c-6.52-.46-13.17-0.46-18.92-4.38-8.3-5.67-15.67-19.52-9.74-33.24,4.27-9.9,10-11.39,19.93-9.57,7.46,1.36,11,7.15,9.68,14.55-1.28,6.9-9.67,11.13-15.39,7.75-2.27-1.34-3.2-4.41-1.67-6.47,0.56-.75,1.92-0.92,2.91-1.35,0.17,0.87.39,1.73,0.49,2.6,0.12,1.07.13,2.15,0.19,3.22,1.2-.27,2.67-0.18,3.56-0.86,3.86-2.94,5.23-10,3-13.54-2.14-3.34-5.27-3.87-8.89-3.77-4.52.12-7.37,2.61-9.08,6.35-3.19,7-3.79,14.12.56,21,1.59,2.49,3.35,4.88,5.16,7.21,4.92,6.34,14.63,6,20.42,2,6.85-4.64,10.91-10.81,11.92-19.22,0.93-7.77-.38-15.27-1.41-22.84-1-7.34-2.16-14.65-3.22-22-0.39-2.67-.72-2.93-3.13-1.85-5.07,2.29-10,5-15.2,6.84-7,2.43-13.62,1.55-18.9-4.38-2.34-2.63-2.68-7.55-.36-10.15a4.61,4.61,0,0,1,3.32-1.58,3.51,3.51,0,0,1,2.43,2.42,3.38,3.38,0,0,1-2.3,2.46c-2,0-2,1.18-2,2.43,0,3.48,2.94,6.13,7,6.47,4.93,0.42,9.36-1.3,13.65-3.35,4.5-2.15,8.82-4.66,13.27-6.9A4.62,4.62,0,0,0,53,376.74c1.14-7.78,3.74-15,9-21,3.67-4.26,8-6.57,13.8-5.88a4.45,4.45,0,0,1,4.31,4.09c0.77,5.11-1.37,9.31-4.59,13-2.74,3.11-5.88,5.87-8.65,9a6,6,0,0,0-1.46,3.71,81.16,81.16,0,0,0,3,20.16c2.81,10.76,5.49,21.57,4.9,32.92-0.42,8-3.23,14.65-9.43,19.84C57.83,457.51,51.35,461.31,43.08,460.72Zm33.55-105.4c-5.24.85-11,9.87-9.33,14.41C71,367,76.37,358.73,76.63,355.32Z" transform="translate(-12.27 -345.86)"/>
<path d="M298.7,460.71c-6.36-.45-12.87-0.46-18.44-4.31-8.94-6.18-16.28-20.4-9.09-35,4-8.16,9.85-9.65,19.3-7.84,7.39,1.42,11,7.3,9.53,14.66-1.34,6.78-9.58,10.92-15.26,7.68a4.53,4.53,0,0,1-1.82-6.42c0.53-.78,1.88-1,2.85-1.49,0.19,0.92.43,1.83,0.57,2.76s0.23,2.11.35,3.17c1.13-.26,2.51-0.2,3.36-0.84,3.86-2.88,5.33-10,3.11-13.52-2.1-3.36-5.21-4-8.84-3.88-4.51.09-7.43,2.52-9.15,6.25-3.22,7-3.88,14.11.45,21a86.6,86.6,0,0,0,5.32,7.41c4.79,6.07,14,6,19.8,2.26,7.12-4.52,11.39-10.8,12.43-19.43,0.94-7.76-.34-15.27-1.38-22.85-1-7.33-2.17-14.65-3.23-22-0.41-2.84-.69-3.06-3.26-1.9-5.07,2.29-10,5-15.21,6.83-6.91,2.36-13.46,1.5-18.69-4.34-2.44-2.73-2.82-7.73-.36-10.33a5.06,5.06,0,0,1,3.62-1.44,2.45,2.45,0,0,1-.12,4.85c-2.34,0-2.17,1.41-2.08,2.8,0.22,3.33,3,5.72,6.82,6.08,4.94,0.47,9.38-1.25,13.66-3.28,4.58-2.17,9-4.74,13.49-7a4.62,4.62,0,0,0,2.55-4c1.18-7.78,3.78-15,9-21,3.62-4.16,7.94-6.48,13.6-5.78,2.67,0.33,4.08,1.51,4.45,4.21,0.71,5.2-1.53,9.43-4.86,13.12-2.72,3-5.77,5.74-8.5,8.76a5.68,5.68,0,0,0-1.36,3.51,81.09,81.09,0,0,0,3,20.16c2.84,10.84,5.54,21.73,4.93,33.16-0.42,7.94-3.22,14.47-9.33,19.63S307.15,461.38,298.7,460.71Zm34.43-105.55c-5.8,1.22-11,9.31-9.88,15.09C327.22,365.56,331.11,361.33,333.13,355.16Z" transform="translate(-12.27 -345.86)"/>
<path d="M444.5,374.14c1.48,0.25,2.72.37,3.92,0.69,3,0.81,3.24,2,3,5.05-0.27,3.54-2.65,5.4-4.77,7.46s-9.5.88-11.12-1.34a2.73,2.73,0,0,1-.58-2c1.19-3.46,2.54-6.92,5.92-8.88A13.26,13.26,0,0,1,444.5,374.14Z" transform="translate(-12.27 -345.86)"/>
</clippath>
</svg>
And the scss as follows;
.word {
#extend %textured-background;
width: 50%;
height:500px;
clip-path: url(#clipPath);
}
The problem is that this does not scale the SVG clipping path. As i did some research, i found that the clipPath should have the clipPathUnits="objectBoundingBox" value. However, as soon as this is applied, everything disappears from the screen.
I think this has something to do with unit values being between 0 and 1. The problem is that this SVG is complex, exported from illustrator.
Any guidance here is much appreciated.


As you have already figured out, you need to convert your path coordinates so that they are in the range 0 to 1.
Assuming your clip path is the size of your viewBox (550.6 x 144.52), then you need to scale your X coords by (1/550.6) and your Y coords by (1/144.52).
So try wrapping your paths in a group that has the appropriate scaling transform applied:
<clippath id="clipPath">
<g transform="scale(0.00182 0.00692)">
<path ... />
<path ... />
<path ... />
<path ... />
</g>
</clippath>
Update / correction
I forgot. Groups aren't allowed in clipPaths. You will need to add the transform to each path.
<clippath id="clipPath">
<path ... transform="scale(0.00182 0.00692) "/>
<path ... transform="scale(0.00182 0.00692)" />
<path ... transform="scale(0.00182 0.00692)" />
<path ... transform="scale(0.00182 0.00692)" />
</clippath>
If the path already contains a transform, then make sure you put the scale before the rest of the transform.
<clippath id="clipPath">
<path ... transform="scale(0.00182 0.00692) translate(-12.27 -345.86)"/>
etc
</clippath>

Related

Improve SVG so pin is centered inside circle, without multiple viewboxes

I have a pin that needs to be shown inside a circle in Svg.
My current code is the following:
<svg viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet">
<circle cx="50%" cy="1.5" r="1.5" style="fill: green;"></circle>
<svg x="47.5%" y="5%" viewBox="0 0 10000 10000" fill="#fff" preserveAspectRatio="none">
<g>
<path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z
M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z">
</path>
<path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3
c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6
c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107
c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z">
</path>
</g>
</svg>
</svg>
which works somewhat but seems inelegant, and perhaps also buggy. What I would like is a better way to center the group 'inside' the circle without using JavaScript
It would be nice if I could get rid of the extra SVG element in the middle with its really big viewBox that I'm using to place the pin. So if you can show me how to do it with just a g and make a scaling function that would be good.

If you want to use coordinates that contain percentage values, you need an element that has x and y attributes. <use> is such an element, <g> is not.
Your live will be easier if you draw your pin centered on the origin of the coordinate system: translate(-250 -230).
After that, you can easily scale it to the size you need: scale(0.0025) (remember: multiple transform commands are processed right-to-left.)
Finally, you use the pin template with the same x and y coordinates as your circle.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet">
<defs>
<!--center the pin around the origin and scale it to final size-->
<g id="pin" transform="scale(0.0025) translate(-250 -230)">
<path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z
M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z" />
<path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3
c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6
c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107
c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z" />
</g>
</defs>
<!--use the same coordinates for the center of the circle and the pin-->
<circle cx="50%" cy="1.5" r="1.5" fill="green" />
<use xlink:href="#pin" x="50%" y="1.5" fill="white" />
</svg>

Adding svg to page from svg sprite

I'm using grunt-svgstore in my grunt set up to create a svg sprite file from svg I add to my project.
The output is something like this.
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
At the top of my document I'm adding a reference to the svg file.
<?php include_once("images/svg/processed/svg-defs.svg"); ?>
Whats the best way or how do I show the svg on the page. I'm trying things like this.
<object type="image/svg+xml" width="100" height="100" data="#times-Icons"></object>

To can reference a <symbol> element with a <use> element.
You should include the SVG with the symbols at the top of your document. Actually it could go anywhere, but I believe Safari has a bug which requires the definitions to be before the references to them.
You will need to hide the symbol definition SVG so it is not visible. To do that can either use display="none" or set width="0" height="0".
Then to reference the symbol, create another SVG of the desired size with a <use> element.
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
You can set the size explicitly as above, or use CSS as in the following example.
.large {
width: 40px;
height: 40px;
}
.small {
width: 24px;
height: 24px;
}
<svg xmlns="http://www.w3.org/2000/svg" display="none"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
<svg class="large">
<use xlink:href="#shape-times"/>
</svg>
<svg class="small">
<use xlink:href="#shape-times"/>
</svg>

Grouping several SVG's into one object

I'm trying to reuse an SVG sprite icone into new SVG object.
The new object is just a circle that contains the icon from the sprite.
I understand that I need to use the defs tag to group some shapes together,
But i have have a problem referencing my sprite icone inside the defs tag.
sprite:
<svg style="display:none;">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol >
new object:
<svg><defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<image x="0" y="0" xlink:href="#icon_1"></image>
</g>
I read that i can use image tags to reference SVG elements.
obviously i'm doing something wrong.
Basically the expected result should be a stroked circle with the icon inside
in a way that I will be able to animate the entire object
Thanks

You were close. Your main problem was that you were careless with your opening and closing tags.
Your second SVG had a stray opening <defs> element, which meant that the <g id="shape"> element was left inside the <defs> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere.
There were a couple of other problems.
You can't use an <image> to reference a symbol. You will need to use a <use> for that.
You will need to supply a width and height so that the symbol gets draw at an appropriate size.
<svg width="0" height="0">
<defs>
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
</defs>
</svg>
new object:
<svg>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="0" y="0" width="80" height="80" xlink:href="#icon_1"></use>
</g>
</svg>

The image tag is designed to be used with complete images, not fractions. I guess that use is the right tag for your use case.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
<defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/>
</g>
</defs>
<use xlink:href="#shape"/>
</svg>
Also, if the sprite is in a separate file, you have to reference the symbol within that file: <use hlink:href="sprites.svg#icon1"/>.

SVG clip-path not working with large group animated with snapsvg

I have a scene i created in illustrator, exported as svg. Its a wrightflyer plane inside of a rectangle. I'm using snapsvg to load the svg file, and i am trying to animate it from one side of the rectangle to the other, the rectangle being a clipping mask. I want the plane to disappear when it travels out of the rect bounding box.
I can get clip-paths working just fine on simple, static (not-animated) shapes like circles and such. The clip-path i have clipping the plane group simple does nothing. No clipping at all. Below is the portion of my SVG giving me trouble, can anyone help me diagnose this?
<g id="wrightclipgroup">
<defs>
<clipPath id="wrightclip">
<rect x="675.855" y="341.69" width="375.542" height="302.107"/>
</clipPath>
</defs>
<g id="wrightflyer" clip-path="url(#wrightclip)">
<rect x="721.875" y="438.898" fill="#565656" width="65.048" height="1.432"/>
<g id="wrightbrother">
<circle fill="#E2D19C" cx="780.253" cy="437.305" r="3.918"/>
<path fill="#623619" d="M780.253,433.387c-2.164,0-3.918,1.754-3.918,3.918c0,0.505,0.104,0.984,0.278,1.428l0.245,0.1
c0.428,0.155,0.948,0.008,1.232-0.348c0.231-0.289,0.299-0.671,0.424-1.019c0.125-0.348,0.357-0.708,0.721-0.777
c0.383-0.073,0.74,0.203,1.122,0.281c0.655,0.134,1.282-0.326,1.727-0.826c0.412-0.464,0.744-1.007,0.958-1.587
C782.33,433.836,781.344,433.387,780.253,433.387z"/>
<g>
<path fill="#4068B2" d="M788.92,451.728c-0.185-1.142-0.183-2.385-1.438-2.647c-0.647-0.135-3.458,2.14-4.441,2.946
c-1.724,1.415-2.08,1.869-3.353,3.699c0.129-0.984,1.908-1.983,2.037-2.967l0-0.001c-2.284,0.319-4.527,0.914-6.671,1.763
c0.199,1.201,0.51,2.41,0.824,3.681c0.139,0.564,0.378,1.277,0.776,1.701c0.381,0.405,0.797,0.531,1.349,0.595
c2.609,0.299,3.473,0.237,4.767-0.893c0.981-0.857,2.172-2.852,2.938-4.227l-0.067,0.124l0.157,5.283l2.549-0.049
c0.127,0.007,0.269,0.009,0.362-0.077c0.072-0.066,0.097-0.169,0.117-0.264c0.151-0.722,0.266-1.452,0.344-2.186
C789.4,456.039,789.269,453.875,788.92,451.728z"/>
<path fill="#355587" d="M785.677,460.912l-0.148-4.963c-1.073,1.875-1.972,3.135-2.677,3.751
c-0.922,0.805-1.635,1.077-2.828,1.077c-0.492,0-1.082-0.045-2.035-0.154c-0.559-0.063-1.015-0.196-1.426-0.633
c-0.335-0.356-0.606-0.947-0.806-1.756l-0.099-0.4c-0.282-1.137-0.549-2.211-0.728-3.291l-0.016-0.1l0.094-0.037
c2.162-0.855,4.416-1.452,6.7-1.771l0.236-0.033l-0.099,0.196c-0.006,0.038-0.014,0.076-0.024,0.114
c0.311-0.288,0.677-0.601,1.14-0.981c2.408-1.978,3.909-2.98,4.459-2.98c0.031,0,0.06,0.003,0.086,0.008
c1.183,0.246,1.33,1.298,1.473,2.316c0.02,0.145,0.041,0.29,0.064,0.433c0.383,2.361,0.465,4.491,0.251,6.513
c-0.078,0.736-0.194,1.476-0.346,2.199c-0.02,0.093-0.049,0.233-0.155,0.331c-0.11,0.101-0.255,0.113-0.354,0.113
c0,0,0,0,0,0c-0.033,0-0.066-0.001-0.099-0.003L785.677,460.912z M785.767,455.532l0.152,5.125l2.426-0.047
c0.037,0.001,0.066,0.003,0.094,0.003h0c0.093,0,0.15-0.014,0.186-0.047c0.043-0.039,0.062-0.116,0.079-0.198
c0.15-0.715,0.265-1.446,0.342-2.174c0.212-2,0.131-4.108-0.249-6.447c-0.023-0.145-0.044-0.292-0.064-0.438
c-0.137-0.975-0.266-1.896-1.276-2.105c-0.01-0.002-0.022-0.003-0.036-0.003c-0.222,0-1.087,0.285-4.301,2.924
c-1.738,1.427-2.096,1.9-3.33,3.674l-0.293,0.422l0.066-0.509c0.07-0.533,0.569-1.052,1.052-1.554
c0.4-0.416,0.812-0.844,0.946-1.249c-2.169,0.318-4.31,0.887-6.368,1.693c0.177,1.036,0.434,2.075,0.707,3.172l0.099,0.4
c0.189,0.766,0.439,1.32,0.745,1.645c0.36,0.383,0.754,0.497,1.272,0.556c0.944,0.108,1.525,0.152,2.007,0.152
c1.137,0,1.784-0.247,2.664-1.015c0.745-0.651,1.725-2.062,2.911-4.194l0.219,0.12L785.767,455.532z"/>
</g>
<g>
<path fill="#355587" d="M781.471,443.27c-0.544-1.063-1.693-1.788-2.887-1.822c-1.193-0.034-2.382,0.624-2.987,1.653
c-0.463,0.788-0.609,7.245-0.701,8.155c-0.111,1.109-0.022,2.185,0.157,3.267c2.144-0.849,4.387-1.444,6.67-1.763
C781.899,451.421,782.085,444.47,781.471,443.27z"/>
<path fill="#355587" d="M774.956,454.696l-0.025-0.153c-0.208-1.254-0.258-2.303-0.158-3.299
c0.023-0.228,0.05-0.824,0.084-1.578c0.138-3.042,0.3-6.061,0.633-6.628c0.612-1.042,1.792-1.716,3.006-1.716l0.092,0.001
c1.23,0.036,2.434,0.795,2.995,1.89c0.636,1.243,0.439,8.238,0.266,9.563l-0.012,0.095l-0.095,0.013
c-2.265,0.316-4.5,0.907-6.642,1.755L774.956,454.696z M778.495,441.571c-1.126,0-2.222,0.625-2.79,1.593
c-0.33,0.561-0.505,4.433-0.599,6.513c-0.035,0.758-0.062,1.357-0.085,1.591c-0.094,0.934-0.052,1.917,0.131,3.082
c2.086-0.813,4.258-1.385,6.459-1.7c0.164-1.488,0.337-8.172-0.252-9.323c-0.521-1.016-1.637-1.721-2.779-1.754
L778.495,441.571z"/>
</g>
<path fill="#E2D19C" d="M777.009,451.274c0.484,0.074,0.976-0.031,1.45-0.155c1.749-0.46,3.411-1.196,5.064-1.929
c1.009-0.447,2.018-0.895,3.027-1.342c0.316-0.14,0.656-0.301,0.817-0.607c0.263-0.499-0.113-1.143-0.63-1.368
c-0.517-0.224-1.11-0.146-1.666-0.052c-2.57,0.437-5.098,1.133-7.511,2.121c-0.966,0.395-2.051,1.025-2.124,2.066
C775.689,450.666,776.312,451.167,777.009,451.274z"/>
<path fill="#355587" d="M785.983,435.363c-0.058-0.067-0.156-0.082-0.244-0.092c-0.735-0.082-1.473-0.129-2.212-0.157
c0.061-0.231,0.235-0.442,0.413-0.613c0.248-0.237,0.534-0.484,0.586-0.823c0.008-0.054,0.009-0.114-0.024-0.158
c-0.03-0.04-0.08-0.058-0.128-0.073c-0.423-0.13-0.866-0.183-1.307-0.232c-1.835-0.204-3.709-0.362-5.513,0.034
c-0.334,0.073-0.668,0.167-0.961,0.342s-0.544,0.442-0.641,0.769c-0.054,0.185-0.058,0.381-0.048,0.574
c0.021,0.383,0.069,0.718,0.298,1.029c0.203,0.275,0.514,0.454,0.841,0.539c0.413,0.108,0.847,0.083,1.273,0.054
c2.419-0.162,4.829-0.432,7.234-0.739c0.128-0.016,0.264-0.036,0.365-0.116C786.019,435.624,786.068,435.461,785.983,435.363z
"/>
</g>
<path fill="#565656" d="M878.392,431.787l-1.012,29.019c-3.535,1.211-19.144,5.778-63.924,10.202
c-8.71,0.861-17.233,1.595-25.406,2.226l3.238-62.418l-2.925-0.152l-3.257,62.793c-14.935,1.118-28.577,1.881-39.791,2.397
l25.043-11.64l-1.234-2.656l-31.468,14.626c-11.9,0.481-19.985,0.651-22.306,0.693l-14.889-17.398l-2.226,1.904l15.784,18.443
l0.686-0.009c0.214-0.003,10.398-0.158,26.55-0.851l15.146,8.668c-0.51,1.243-0.586,2.71-0.014,4.213
c0.512,1.345,1.604,2.437,2.949,2.949c4.257,1.62,8.256-1.883,7.543-6.055c-0.101-0.592-0.307-1.15-0.589-1.664l14.151-10.342
c10.51-0.747,21.748-1.671,33.302-2.813c52.715-5.208,65.156-10.523,65.66-10.747l0.837-0.372l1.078-30.915L878.392,431.787z
M765.443,485.924c-0.792-0.83-1.835-1.42-3-1.619c-2.168-0.371-4.148,0.537-5.329,2.086l-13.18-7.543
c9.632-0.432,21.157-1.05,33.825-1.926L765.443,485.924z"/>
<rect x="748.401" y="412.873" transform="matrix(0.9999 0.0144 -0.0144 0.9999 6.3635 -10.7405)" fill="#565656" width="2.929" height="48.302"/>
<rect x="745.169" y="436.197" transform="matrix(0.3088 0.9511 -0.9511 0.3088 947.8507 -430.3655)" fill="#565656" width="49.688" height="1.464"/>
<path fill="#ED5822" d="M889.244,432.359c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.608,432.072,890.279,432.335,889.244,432.359z"
/>
<path fill="#ED5822" d="M888.898,442.284c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.261,441.997,889.933,442.26,888.898,442.284z"
/>
<path fill="#EC5924" d="M698.652,466.032c-1.954-0.835-3.907-1.67-5.861-2.505c-0.823-0.352-1.695-0.743-2.181-1.495
c-0.374-0.579-0.465-1.29-0.539-1.976c-0.711-6.516-0.852-13.095-0.422-19.635c4.482-0.948,8.918-2.116,13.286-3.499
c0.075,8.595,0.15,17.191,0.225,25.786c0.012,1.387-0.141,3.063-1.38,3.687C700.81,466.883,699.65,466.458,698.652,466.032z"/>
<path fill="#ED5822" d="M800.45,415.003c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.232-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56C805.019,414.447,802.45,414.956,800.45,415.003
z"/>
<path fill="#ED5822" d="M798.731,464.273c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.231-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56
C803.301,463.717,800.731,464.227,798.731,464.273z"/>
<path id="wrightprop" fill="#B73E18" d="M721.875,439.189c-0.004-0.085-3.994-19.75-0.498-20.062
c3.496-0.311,1.051,18.368,0.498,20.858c-0.553,2.491-3.315,21.169-0.297,20.028
C724.596,458.872,721.984,441.713,721.875,439.189z"/>
</g>
</g>

I found the answer, the clip-path has to also be transformed/animated if i animate the transformations of the group, per the answer on this question

SVG clipPath to clip the *outer* content out

Normally, the <clipPath> element hides everything that is outside the clip path. To achieve the opposite effect - that is to "cut out" something from the image - i want to use two paths in the clipPath and the clip-rule="evenodd" attribute. Basically, I want to "xor" the clip paths.
But it doesn't work. It shows the region "ORed":
<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
<rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" />
<rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" />
</clipPath>
<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>
EDIT:
My problem is that AFAIK <mask> doesn't work in iOS WebKit.

It's much easier to do what you're after with a mask, see this example. Here's the mask definition:
<mask id="maskedtext">
<circle cx="50%" cy="50%" r="50" fill="white"/>
<text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text>
</mask>
Regions that are white inside the mask will be kept, everything else will be clipped away.
Here's another example that uses clipPath instead, is a bit trickier since you need to use a path element to get the clip-rule to apply. The clipPath that uses clip-rule there looks like this:
<clipPath id="clipPath1">
<path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>

Resources