Clip-path using svg html element is not working - html

I'm trying to clip an image using a svg but it is not working.
Follows the code:
img {
clip-path: url(#svgPath);
}
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="svgPath">
<rect x="286.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
<rect x="286.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
<rect x="582.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
<rect x="582.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
</clipPath>
</defs>
</svg>
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" />
Thank you very much


You need to use the -webkit- vendor prefix as chrome, opera and safari consider clip-path to be an experimental feature.
More on clip-path browser support can be found on caniuse.com.
body {
margin: 0;
}
img {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" />
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="svgPath">
<rect x="286.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274" fill="#ffffff"></rect>
<rect x="286.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
<rect x="582.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
<rect x="582.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect>
</clipPath>
</defs>
</svg>

Related

SVG text not horizontally center aligning

I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code:
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
<g transform="translate(-397)">
<g
transform="translate(507 975)"
fill="#fff"
stroke="#707070"
strokeWidth="1"
>
<rect width="907" height="66" rx="33" stroke="none" />
<rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
<g
transform="translate(397)"
fill="#232323"
stroke="#fff"
stroke-width="30"
>
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="white"
fontSize="96"
fontFamily="Fredoka"
>
{screenText}
</text>
</g>
</svg>

You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.
body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
<g
transform="translate(600 975)"
fill="#fff"
stroke="#707070"
stroke-width="1">
<rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
<rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
<g transform="translate(50)"
fill="#232323"
stroke="#fff"
stroke-width="30">
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="#fff"
font-size="96"
font-family="Fredoka"
transform="translate(600 300)"
text-anchor="middle"
dominant-baseline="middle">
{screenText}
</text>
</svg>

Thanks to Buhan Yu's comment I learned that you need to specify x and y to center align it. I set x="50%" and it worked!

SVG renders correctly in live server but shows up as an error on html webpage

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>
I'm trying to insert an animated logo into my website. The logo is animated correctly and after having rendered it in CodePen I thought that it was all okay but for some reason on actual websites it just shows an error. Like so:
This page contains the following errors:
error on line 75 at column 6: Opening and ending tag mismatch: svg line 0 and g
Below is a rendering of the page up to the first error.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>

There was an extra group closing tag at the end and The XML declaration had some error though I'm not sure what that was about. Any way this below code works fine now.
Enjoy :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build
0) -->
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 596.97 663.91"
style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-
dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24
264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/>
</g>
</svg>

SVG in img fix for IE breaks Chrome

So I made an SVG for a very svg-friendly-design logo in my recent website. More as a "ah this is cool" than an absolute necessity, but now that it's not working I'm obsessed.
I dropped it in an <img /> tag, sized it up as I like, and bam sweet logo, used in different sizes in a couple of places, scales beautifully. Ah the miracles of modern web. Remember .PNG fixes? We have come a long way in a few short years. I'm so happy we no longer have to deal with that archaic IE bullsh...
Oh, you've got to be kidding me!
So apparently IE gets funky. Alright, google this thing. "Remove height and width attributes." Fantastic, do that...
Chrome starts having the same issue with the modified file. Argh.
What am I doing wrong?
<svg width="264" height="264" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect x="-1" y="-1" width="266" height="266" id="canvas_background" fill="none"/>
<g id="canvasGrid" display="none">
<rect id="svg_1" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
</g>
</g>
<g>
<title>Layer 1</title>
<ellipse fill="#000000" stroke-width="0" cx="132.081358" cy="132.179138" id="svg_3" rx="132" ry="132" stroke="#fff"/>
<ellipse fill="#000000" stroke="#fff" stroke-width="6" cx="132.081346" cy="132.17914" id="svg_5" rx="126" ry="126"/>
<ellipse fill="#000000" stroke="#fff" stroke-width="7" cx="132.081365" cy="213.774884" id="svg_13" rx="44" ry="44"/>
<line fill="none" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="12.496805" y1="168.812302" x2="251.665903" y2="168.812302" id="svg_24" stroke-linejoin="null" stroke-linecap="null" stroke="#fff"/>
<ellipse fill="#d80202" stroke="#fff" stroke-width="7" cx="132.081369" cy="50.410766" id="svg_6" rx="44" ry="44"/>
<line fill="none" stroke="#fff" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="132.08135" y1="95.543239" x2="132.08135" y2="166.831116" id="svg_26" stroke-linejoin="null" stroke-linecap="null"/>
</g>
</svg>

Try use one of these SVG's and adjust the to make it responsive remove the height and width attrubite from the <svg> tag.
The first one has the style inline and the second has it in <style> tag.
code:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<g>
<title>background</title>
<rect id="canvas_background" x="-1" y="-1" style="fill:none;" width="266" height="266"/>
<g id="canvasGrid" style="display:none;">
<rect id="svg_1" style="display:inline;fill:none;" width="264" height="264"/>
</g>
</g>
<g>
<title>Layer 1</title>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" style="stroke:#FFFFFF;stroke-width:6;" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" style="stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" style="fill:#D80202;stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>
<br />
<br />
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<style type="text/css">
.st0{fill:none;}
.st1{display:none;}
.st2{display:inline;fill:none;}
.st3{stroke:#FFFFFF;stroke-width:6;}
.st4{stroke:#FFFFFF;stroke-width:7;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:7;}
.st6{fill:#D80202;stroke:#FFFFFF;stroke-width:7;}
</style>
<g>
<rect id="canvas_background" x="-1" y="-1" class="st0" width="266" height="266"/>
<g id="canvasGrid" class="st1">
<rect id="svg_1" class="st2" width="264" height="264"/>
</g>
</g>
<g>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" class="st3" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" class="st4" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" class="st5" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" class="st6" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" class="st5" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>

SVG path positioning

I am making face SVG. Unable to set eyebrow on proper place. Please advice.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>

You may use g element and add translation (useful if you will have more path to move at the same time):
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(40,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Or simply translation on path:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path transform="translate(40,20)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
Here is the full SVG with both eyebrow (translation for both using g and then translate the 2nd one relatively to g). With this configuration you have to simply adjust the translation of g element if want it upper of lower
svg g {
transition: 0.5s;
}
svg:hover g {
transform: translate(10px, 15px);
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(10,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
<path transform="translate(30,0)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>

Use the transform attribute to position the path, like
transform="translate(50,80)"
Make sure you don't use px
Other transformations like scale or rotate are also available. See the specs.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>

Why is this svg not working in safari?

The following svg is working in chrome and firefox, but is not working in Safari. And I haven't been able to test it in ie.
Safari does show the image, but does not apply the mask.
<div class="widget-image-l">
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1">
<g stroke="none" fill-rule="evenodd">
<mask id="mask" fill="white">
<path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path"></path>
</mask>
<g mask="url(#mask)">
<image x="-1020" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg" transform="scale(-1 1)">
</image>
</g>
</g>
</svg>
</div>