issues making svg responsive - html

I'm trying to get the svg to adapt to the width of the screen, but somehow it insists on staying the same width as the screen shrinks. The tried: (trying to resize the svg image)
But it still doesn't allow me to make the element fit the screen and not overflow from its original svg container.
svg {
width : 100%;
height : auto;
background : yellow
}
svg g {
background : green;
}
.home-wrapper {
background : red;
}
.cls-1 {
fill : none;
stroke :#0d1738;
stroke-width : 3px;
}
.cls-2 {
fill : #0d1738bb;
}
.cls-4 {
fill : #3d4df3;
}
.cls-3 {
font-size : 38px;
font-family : TitilliumWeb-SemiBoldTitillium Web;
font-weight : 600;
}
.cls-4 {
font-size : 20px;
font-family : TitilliumWeb-Regular,Titillium Web;
}
<div class="home-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 260 245" >
<defs></defs>
<g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163.155)">
<path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
<path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
<path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
<g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
<path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
<g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
<text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
<text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
</g>
</g>
<g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
<path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
<g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
<text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
<text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
</g>
</g>
<g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
<path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
<g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
<text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
<text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
</g>
</g>
<path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
<path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
<path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
</g>
</svg>
</div>


it seems to me that your viewbox is wrong, it should be viewbox="-20 -20 1130 440"
.home-wrapper {
background : red;
margin : 1em;
padding : 0;
font-size : 0;
}
svg {
width : 100%;
height : auto;
background : yellow;
}
.cls-1 {
fill : none;
stroke : #0d1738;
stroke-width : 3px;
}
.cls-2 {
fill : #0d1738bb;
}
.cls-4 {
fill : #3d4df3;
}
.cls-3 {
font-size : 38px;
font-family : TitilliumWeb-SemiBoldTitillium Web;
font-weight : 600;
}
.cls-4 {
font-size : 20px;
font-family : TitilliumWeb-Regular,Titillium Web;
}
<div class="home-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="-20 -20 1130 440"> <!-- width="1100" height="400.347"-->
<defs></defs>
<g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163.155)">
<path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
<path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
<path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
<g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
<path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
<g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
<text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
<text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
</g>
</g>
<g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
<path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
<g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
<text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
<text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
</g>
</g>
<g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
<path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
<g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
<text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
<text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
</g>
</g>
<path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
<path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
<path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
</g>
</svg>
</div>

Related

How to make svg width and height response

I have a customized svg not sure how to make it responsive. if a set div width greater than 500px and this svg is not able to strecth as per the div width.
function expanddiv(){$('#expand').width('600')};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="expand" style="width:300px;border:2px solid black;height:62px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<defs>
<style>
.cls-1{fill:url(#linear-gradient)}.cls-2{clip-path:url(#clip-path)}.cls-3{fill:#fff}.cls-4{fill:#ed4d67}.cls-5,.cls-7{fill:#eb384f}.cls-5{font-size:15px;font-family:Roboto-Regular,Roboto}.cls-6{fill:#000}
</style>
<linearGradient id="linear-gradient" x1="1.124" x2=".282" y1="1.059" y2=".569" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#7e0947"/>
<stop offset="1" stop-color="#ed4d67"/>
</linearGradient>
<clipPath id="clip-path">
<path id="Path_3041" d="M12 0h309a12 12 0 0 1 12 12v50H0V12A12 12 0 0 1 12 0z" class="cls-1" data-name="Path 3041" transform="translate(2691 -2049)"/>
</clipPath>
</defs>
<g id="Group_6848" data-name="Group 6848" transform="translate(-2691 2049)">
<path id="Path_2603" d="M12 0h309a12 12 0 0 1 12 12v50H0V12A12 12 0 0 1 12 0z" class="cls-1" data-name="Path 2603" transform="translate(2691 -2049)"/>
<g id="Mask_Group_23" class="cls-2" data-name="Mask Group 23">
<rect id="Rectangle_1748" width="159" height="159" class="cls-3" data-name="Rectangle 1748" rx="29" transform="rotate(45 3950.617 2228.04)"/>
</g>
<g id="Icon" transform="translate(2352.59 -2342.063)">
<g id="Group_620" data-name="Group 620" transform="translate(358.409 308.063)">
<path id="Path_357" d="M474.036 499.32v8.98a3.56 3.56 0 0 1-3.56 3.56h-20.71l5.427-5.391h11.027c1.7 0 2.486-1.4 2.486-3.092v-4.057z" data-name="Path 357" transform="translate(-442.202 -483.485)"/>
<path id="Path_358" d="M386.682 308.063h-24.713a3.56 3.56 0 0 0-3.56 3.56v10.564h5.3V315.8a2.409 2.409 0 0 1 2.409-2.409H382.5a2.409 2.409 0 0 1 2.409 2.409v1.079h5.33v-5.257a3.56 3.56 0 0 0-3.557-3.559z" data-name="Path 358" transform="translate(-358.409 -308.063)"/>
<path id="Path_359" d="M382.352 414.937l-22.6 22.7a.749.749 0 0 1-1.286-.554l-.058-15.126h5.276v4.127l11.167-11.148z" class="cls-4" data-name="Path 359" transform="translate(-358.409 -406.089)"/>
</g>
<text id="salesken" class="cls-5" transform="translate(398.941 326.461)">
<tspan x="0" y="0" class="cls-6">Test</tspan><tspan y="0" class="cls-7">div</tspan>
</text>
</g>
</g>
</svg>
</div>
<button onclick="expanddiv()" style="margin-top:20px;">
expand div
</button>

Error, fixed container not succesfull using Css and Bootstrap

I have a problem with the fixed property of css. When I apply it to my container with id="avatar", it "disappears"(As shown in the picture)
the div with the classes col-md-5 col-sm-12 order-1 order-md-0 contains all items on the left side.
The goal is that all the items on the left side can scroll and the avatar on the right side remains "fixed". But, I have not succeeded, what am I failing?
#main {
position: sticky;
top: 2px;
bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col-md-5 col-sm-12 order-1 order-md-0">
<div class="row"></div>
<div class="row justify-content-center"></div>
<div id="imagesDiv"></div>
</div>
<div id="avatar" class="col-md-7 col-sm-12 order-0 order-md-1">
<main id="main" class="mx-auto">
<svg viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="react-path-1" cx="120" cy="120" r="120"></circle>
<path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="react-path-2"></path>
<path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="react-path-3"></path>
</defs>
<g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
<g transform="translate(825.000000, 1100.000000)">
<g id="background"></g>
<g id="Mask"></g>
<g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-5)">
<g id="Body" transform="translate(32.000000, 36.000000)">
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-6" fill="white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use></mask>
<use xmlns="http://www.w3.org/2000/svg" fill="#D0C6AC" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use>
<g class="color-picker-Body" mask="url(#react-mask-6)" fill="#FD9841">
<g transform="translate(0.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="280"></rect>
</g>
</g>
<path xmlns="http://www.w3.org/2000/svg" d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#react-mask-6)"></path>
</g>
<g id="Clothing" transform="translate(0.000000, 170.000000)"><path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="#B7C1DB"></path>
<mask id="mask0_0_366" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="14" width="200" height="96">
<path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="white"></path>
</mask>
<g mask="url(#mask0_0_366)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 63.3365C99.5284 62.4949 97.1884 61.5523 95 60.5196V110H102V63.3365ZM162 63.3365C164.472 62.4949 166.812 61.5523 169 60.5196V98.5C169 100.433 167.433 102 165.5 102C163.567 102 162 100.433 162 98.5V63.3365Z" fill="#F4F4F4"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M132 68C162.928 68 188 54.5686 188 38C188 28.137 179.115 19.3856 165.4 13.9175C185.194 18.941 198.5 28.2929 198.5 39C198.5 55.0163 168.727 68 132 68ZM98.6004 13.9175C84.8847 19.3856 76 28.137 76 38C76 54.5686 101.072 68 132 68C95.2731 68 65.5 55.0163 65.5 39C65.5 28.2929 78.806 18.941 98.6004 13.9175Z" fill="black" fill-opacity="0.16"></path>
</g></g>
<g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">
<g id="eyes" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964"><circle cx="30" cy="22" r="14" fill="white"></circle>
<circle cx="82" cy="22" r="14" fill="white"></circle>
<circle class="eyesColor" cx="30" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
<circle class="eyesColor" cx="82" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
</g>
<g id="eyeBrow" fill-opacity="0.599999964"><g xmlns="http://www.w3.org/2000/svg" fill-opacity="0.599999964">
<g id="I-Browse" transform="translate(0.000000, 0.000000)">
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 6.1484C20.7403 6.41665 11.3522 10.6363 11.5941 16.4922C11.6021 16.6839 11.8836 16.768 12.0211 16.6206C14.776 13.6613 34.3365 10.6709 41.2261 12.2556C41.8566 12.4008 42.3356 11.7788 41.9363 11.3294C38.5142 7.48119 31.7498 5.90302 26.5473 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M86.4526 6.1484C92.2596 6.41665 101.648 10.6363 101.406 16.4922C101.398 16.6839 101.116 16.768 100.979 16.6206C98.2238 13.6613 78.6634 10.6709 71.7738 12.2556C71.1433 12.4008 70.6642 11.7788 71.0636 11.3294C74.4857 7.48119 81.2501 5.90302 86.4526 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
</g>
</g>
</g>
<g id="mouth"><g transform="translate(0.000000, 50.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="black" fill-opacity="0.7"></path>
<mask id="mask0_0_636" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="13" width="38" height="19">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="white"></path>
</mask>
</g>
</g>
<g id="nose"><g xmlns="http://www.w3.org/2000/svg" id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
<path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path>
</g></g>
<g id="beard"></g>
</g>
<g id="TopA" stroke-width="1" fill-rule="evenodd"><defs xmlns="http://www.w3.org/2000/svg">
<rect id="react-path-197" x="0" y="0" width="264" height="280"></rect>
<path d="M180.14998,39.9204083 C177.390206,37.1003988 174.185913,34.7068297 171.069252,32.3065503 C170.381566,31.777442 169.682843,31.2610833 169.010544,30.7118441 C168.857687,30.5870323 167.291999,29.4657388 167.104691,29.0530544 C166.653816,28.0602634 166.915042,28.8332916 166.977255,27.6485857 C167.055857,26.150508 170.11064,21.9193194 167.831176,20.9490079 C166.828413,20.522232 165.039628,21.6579526 164.077671,22.0330592 C162.196235,22.7671676 160.291721,23.3932399 158.346734,23.9330847 C159.278588,22.0763407 161.055333,18.3594977 157.71591,19.3543018 C155.114345,20.1293431 152.690052,22.1219709 150.075777,23.0594018 C150.940735,21.6415124 154.399901,17.2479341 151.274209,17.0023366 C150.301549,16.925839 147.471201,18.7503735 146.423952,19.1395717 C143.287223,20.3054888 140.083264,21.0590571 136.789999,21.6525844 C125.59203,23.6707114 112.497238,23.0953019 102.1368,28.1934632 C94.1494796,32.1236942 86.262502,38.2220278 81.648386,45.987539 C77.2011742,53.472559 75.537818,61.6641751 74.6069673,70.2412987 C73.9239644,76.535909 73.8684412,83.0425652 74.1878671,89.3599905 C74.2922241,91.4297869 74.5250203,100.970847 77.5319724,98.0813859 C79.0300967,96.641688 79.019059,90.8282073 79.3963495,88.8604076 C80.1472513,84.9452748 80.870057,81.0126951 82.122006,77.2227096 C84.3282191,70.5439339 86.9307879,63.4296587 92.4269209,58.8297383 C95.9539853,55.8782066 98.4307906,51.8889248 101.806002,48.9112229 C103.322188,47.5738572 102.165231,47.7130963 104.602902,47.888571 C106.240504,48.006337 107.885464,48.0512961 109.52641,48.0942421 C113.322394,48.1928837 117.124399,48.16772 120.921387,48.1811407 C128.56821,48.208653 136.179243,48.316689 143.818708,47.9164188 C147.213653,47.7385955 150.617965,47.6423024 154.00388,47.3282597 C155.895349,47.152785 159.251496,45.9405668 160.808488,46.8669256 C162.233362,47.7144383 163.71309,50.4817719 164.736257,51.615144 C167.153525,54.2935659 170.035717,56.3392052 172.862385,58.5354911 C178.756547,63.114945 181.732392,68.8666908 183.522515,76.023241 C185.305949,83.1532854 184.805905,89.76815 187.013456,96.78479 C187.401784,98.0184813 188.428965,100.14498 189.695296,98.2389151 C189.930434,97.8849461 189.869559,95.9390277 189.869559,94.819339 C189.869559,90.2995934 191.014141,86.9083772 190.999758,82.3591197 C190.943566,68.5271489 190.49637,50.4908308 180.14998,39.9204083 Z" id="react-path-196"></path>
<filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="react-filter-193">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge>
</filter>
</defs>
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-195" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-197"></use>
</mask>
<g xmlns="http://www.w3.org/2000/svg" id="Mask"></g>
<g xmlns="http://www.w3.org/2000/svg" mask="url(#react-mask-195)">
<g transform="translate(-1.000000, 0.000000)">
<mask id="react-mask-194" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-196"></use>
</mask>
<g id="hair"><g xmlns="http://www.w3.org/2000/svg" id="Hairstyle/Wick" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="template-for-hairstyles" opacity=".184" transform="translate(1.000000, 0.000000)">
<mask id="hairstylewick-mask-2" fill="#ffffff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hairstylewick-path-1" fill="#ffffff"></use>
</mask>
<g id="Mask-Hair"></g>
</g>
<g id="Wick" transform="translate(64.000000, 22.300000)">
<path class="hairColor" d="M13.4413,160.16 C13.4413,160.16 12.3963,166.909 9.2623,170.681 C9.2623,170.681 19.7343,171.586 24.6553,166.711 C24.6553,166.711 24.2473,171.575 22.2033,175.347 C22.2033,175.347 29.0143,176.459 35.8253,171.436 C35.8253,171.436 35.8793,174.352 35.9233,176.809 C37.5833,176.694 39.2523,176.615 40.9413,176.615 L44.9413,176.615 L44.9413,157.226 C27.7043,149.038 15.3133,132.303 13.2463,112.496 C9.2963,111.938 5.9703,109.454 4.2343,106.027 L4.2343,147.355 C4.2343,147.355 4.0873,160.457 0.0003,164.329 C0.0003,164.329 8.9013,166.016 13.4413,160.16" id="Fill-4" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M133.5829,106.1463 C131.8309,109.5103 128.5389,111.9453 124.6359,112.4973 C122.5689,132.3023 110.1799,149.0373 92.9419,157.2263 L92.9409,176.6153 L96.9409,176.6153 C98.6079,176.6153 100.2559,176.6923 101.8949,176.8033 C101.9369,174.3503 101.9919,171.4363 101.9919,171.4363 C108.8029,176.4593 115.6129,175.3463 115.6129,175.3463 C113.5699,171.5753 113.1619,166.7103 113.1619,166.7103 C118.0819,171.5853 128.5549,170.6813 128.5549,170.6813 C125.4219,166.9093 124.3759,160.1603 124.3759,160.1603 C128.9159,166.0163 137.8169,164.3293 137.8169,164.3293 C133.7299,160.4573 133.5829,147.3553 133.5829,147.3553 L133.5829,106.1463 Z" id="Fill-6" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M112.3837,61.411 C112.3837,61.411 120.1617,65.499 120.1617,83.616 C120.1617,83.616 124.3837,87.112 124.3837,83.616 L124.3837,75.781 C124.3837,75.781 130.3097,75.942 133.5907,82.208 L133.5907,38.526 C133.5907,38.526 94.0077,-1.068 84.5637,0.022 C75.3547,1.084 69.2147,5.932 68.9127,6.174 C68.6107,5.932 62.4697,1.084 53.2617,0.022 C43.8177,-1.068 4.2347,38.526 4.2347,38.526 L4.2347,82.208 C7.5157,75.942 13.4417,75.781 13.4417,75.781 L13.4417,83.616 C13.4417,87.112 17.6627,83.616 17.6627,83.616 C17.6627,65.499 25.4417,61.411 25.4417,61.411 C25.4417,61.411 14.5857,56.099 34.1907,36.891 C53.1187,18.347 67.8857,33.575 68.8837,34.649 C68.8837,34.649 84.7057,18.347 103.6337,36.891 C123.2387,56.099 112.3837,61.411 112.3837,61.411" id="Fill-1" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M92.9423,157.2264 L92.9413,170.5254 C118.7923,158.6644 123.6873,127.9354 124.5233,113.4234 C122.1713,132.8224 109.9093,149.1654 92.9423,157.2264" id="Fill-8" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M13.4716,114.3524 C14.2416,129.2804 19.1006,159.2004 44.9416,170.6934 L44.9416,157.2264 C28.2446,149.2944 16.0966,133.3444 13.4716,114.3524" id="Fill-10" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
</g>
</g></g>
<g id="glass">
<g filter="url(#filter0_d_0_1711)" transform="translate(60.000000, 75.000000)">
<path d="M70.9998 13.1111C59.9624 13.1111 58.3704 4.0266 35.6704 2.74074C12.9854 1.7168 5.81505 8.44949 5.7763 13.1111C5.81307 17.4043 4.64754 28.5613 19.3645 41.6296C34.1366 57.1421 49.2702 51.8818 54.6939 46.8148C60.135 44.4731 66.3402 23.4596 70.9998 23.4815C75.6595 23.5033 81.8646 44.4731 87.3057 46.8148C92.7294 51.8818 107.863 57.1421 122.635 41.6296C137.352 28.5613 136.187 17.4043 136.223 13.1111C136.185 8.44949 129.014 1.7168 106.329 2.74074C83.6293 4.0266 82.0373 13.1111 70.9998 13.1111Z" fill="#F4F4F4"></path>
<path d="M60.1293 23.4815C60.5103 15.8233 47.2156 7.64243 32.9529 7.92593C18.6973 8.22451 16.8417 17.3787 16.647 20.8889C16.2981 29.0221 25.0144 47.3038 41.1058 46.8148C57.1972 46.3058 59.9092 28.5344 60.1293 23.4815Z" fill="#2F383B"></path>
<path d="M81.8707 23.4815C81.4897 15.8233 94.7844 7.64243 109.047 7.92593C123.303 8.22451 125.158 17.3787 125.353 20.8889C125.702 29.0221 116.986 47.3038 100.894 46.8148C84.8028 46.3058 82.0908 28.5344 81.8707 23.4815Z" fill="#2F383B"></path>
</g>
<defs>
<filter id="filter0_d_0_1711" x="5.76709" y="2.63634" width="130.465" height="51.3032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="2"></feOffset>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1711"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1711" result="shape"></feBlend>
</filter>
</defs>
</g>
<g id="hat"></g>
<g id="beard"></g>
</g>
</g></g>
</g></g></g></g>
</svg>
</main>
</div>
</div>

Putting an outline on a mask in a SVG

Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>

Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).

Simulate eye blink animation on SVG element with CSS only

I have the following section of an SVG file (it's basically a hyphen character drawn out).
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
I want to animate a sort of eye blink on that part of the SVG file so that the shape ends up looking like this.
<path fill="#000000" d="m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z" fill-rule="nonzero"></path>
I can't figure out how to do this with CSS only. One "blink" is the first step. Of course, the next step is to time a few different blinks so that it looks natural. Here's the entire SVG shape -- I'd be "blinking" the left and right eyes at the same time. I wish I could provide more detail here, but I'm a novice.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
</g>
</svg>
After playing around a bit more I have this using SMIL
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
Now I don't know if this is possible, but I'd like to iterate each blink at somewhat random intervals. Or at the very least, something like this:
blink.........blink.blink..............blink......blink.
I don't know how to loop these animations, but I'm learning a lot here tonight. :)

Here's an answer using SMIL, I've just pasted the d values into the animate element's values attribute. I've used keyTimes so that there's a pause between winks.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" keyTimes="0 ; 0.1 ; 0.2 ; 1" />
</path>
</g>
</svg>

.st0{fill:#232323;}
.st1{fill:#FFFFFF;}
#keyframes open {
0% { ry: 61.7; }
95% { ry: 61.7; }
100% { ry: 0; }
}
.left-eye, .right-eye {
animation-name: open;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<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 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
<g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
<g>
<circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
</g>
</g>
<g id="icon" transform="translate(-16.325252525252523 -16.361616161616162) scale(0.3232323232323232)">
<g>
<ellipse class="st1 left-eye" cx="998.4" cy="1304.6" rx="41.1" ry="61.7"/>
<ellipse class="st1 right-eye" cx="1409.8" cy="1304.6" rx="41.1" ry="61.7"/>
<path class="st1" d="M1368.7,1510.3h-329.1c-11.4,0-20.6,9.2-20.6,20.6c0,11.4,9.2,20.6,20.6,20.6h329.1
c11.4,0,20.6-9.2,20.6-20.6C1389.3,1519.5,1380,1510.3,1368.7,1510.3z"/>
<path class="st1" d="M1753.5,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.5c-56.8,0-102.8,46.1-102.9,102.9v1152
c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8,0,102.8-46.1,102.9-102.9V831.5c0-2.7-0.5-5.4-1.6-7.9
C1756.9,821.1,1755.4,818.8,1753.5,816.9L1753.5,816.9z M1533.2,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.2z
M1656.7,1839.5H751.5c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2
c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.4,1811.8,1690.7,1839.4,1656.7,1839.5L1656.7,1839.5z"/>
</g>
</g>
</svg>

SVG <use> behaves strange in Firefox and IE

I have noticed that some SVGs behave strangely when I try to include them with the <svg><use xlink:href="id-of-symbol" /></svg>. But if SVG is injected directly or referenced through <img> they look correctly.
I have created an example on CodePen: http://codepen.io/andeersg/full/qRWMQv/. In Chrome all three versions look the same, while in FireFox and IE11 the middle one is broken (the use version).
Have I done something wrong with SVG or is this a known bug?

mask, clipPath and filter elements (basically anything non-rendered that needs to be accessed by url() reference) don't work if they are within symbol elements in Firefox. This is a known bug.
There's an easy workaround though which is to move those elements outside the symbol element.
<svg width="0" height="0" style="position:absolute">
<mask id="ata" fill="#fff"><path d="M0 4.11c0 2.27 1.838 4.11 4.103 4.11a4.107 4.107 0 0 0 4.104-4.11C8.207 1.84 6.37 0 4.103 0A4.107 4.107 0 0 0 0 4.11z"></path></mask>
<mask id="atb" fill="#fff"><path d="M0 5.17c0 2.348 1.9 4.25 4.242 4.25a4.245 4.245 0 0 0 4.243-4.25c0-2.346-1.9-4.248-4.243-4.248A4.246 4.246 0 0 0 0 5.17z"></path></mask>
<symbol viewBox="0 0 65 72" id="helseogfamilie"><title>Page 1</title><g transform="translate(1)" fill="none" fill-rule="evenodd"><g transform="translate(1.06 4.242)" stroke="#4A5A28" stroke-width="3"><path d="M37.736.928V28.19c0 10.34-8.447 18.802-18.772 18.802S.19 38.531.19 28.19V.928"></path><path d="M55.824 26.98v19.743c0 10.34-8.447 18.801-18.772 18.801s-18.773-8.46-18.773-18.801"></path></g><g transform="translate(0 1.06)"><path fill="#4A5A28" mask="url(#ata)" d="M-5.303 13.523H13.51V-5.303H-5.303z"></path></g><g transform="translate(31.818)"><path fill="#4A5A28" mask="url(#atb)" d="M-5.303 14.722h19.09V-4.38h-19.09z"></path></g><path d="M62.465 25.635a5.584 5.584 0 0 1-5.579 5.588 5.584 5.584 0 0 1-5.58-5.588 5.584 5.584 0 0 1 5.58-5.589 5.584 5.584 0 0 1 5.579 5.589z" stroke="#4A5A28" stroke-width="2"></path></g></symbol>
</svg>
<svg width="65px" height="72px" viewBox="0 0 65 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
<title>Page 1</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,4.10984848 C0,6.37954545 1.8380303,8.21969697 4.10348485,8.21969697 C6.37,8.21969697 8.2069697,6.37954545 8.2069697,4.10984848 C8.2069697,1.84015152 6.37,0 4.10348485,0 C1.8380303,0 0,1.84015152 0,4.10984848 L0,4.10984848 Z" id="helseogfamilie-path-1"></path>
<path d="M0,5.17045455 C0,7.51757576 1.89954545,9.41924242 4.24242424,9.41924242 C6.58530303,9.41924242 8.48484848,7.51757576 8.48484848,5.17045455 C8.48484848,2.82439394 6.58530303,0.921666667 4.24242424,0.921666667 C1.89954545,0.921666667 0,2.82439394 0,5.17045455 L0,5.17045455 Z" id="helseogfamilie-path-3"></path>
</defs>
<g id="Forside" stroke="none" fill="none" fill-rule="evenodd">
<g transform="translate(-988.000000, -623.000000)" id="Page-1">
<g transform="translate(989.000000, 623.000000)">
<g id="Group-5" transform="translate(1.060606, 4.242424)" stroke="#4A5A28" stroke-width="3">
<path d="M37.7363636,0.928136364 L37.7363636,28.1899545 C37.7363636,38.5308636 29.2886364,46.9923788 18.9636364,46.9923788 C8.63863636,46.9923788 0.190909091,38.5308636 0.190909091,28.1899545 L0.190909091,0.928136364" id="helseogfamilie-Stroke-1"></path>
<path d="M55.8244697,26.9805455 L55.8244697,46.7226667 C55.8244697,57.0635758 47.3767424,65.5240303 37.0517424,65.5240303 C26.7267424,65.5240303 18.2790152,57.0635758 18.2790152,46.7226667" id="helseogfamilie-Stroke-3"></path>
</g>
<g id="Group-8" transform="translate(0.000000, 1.060606)">
<mask id="helseogfamilie-mask-2" fill="white">
<use xlink:href="#helseogfamilie-path-1"></use>
</mask>
<g id="Clip-7"></g>
<polygon id="Fill-6" fill="#4A5A28" mask="url(#helseogfamilie-mask-2)" points="-5.3030303 13.5227273 13.51 13.5227273 13.51 -5.3030303 -5.3030303 -5.3030303"></polygon>
</g>
<g id="Group-11" transform="translate(31.818182, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#helseogfamilie-path-3"></use>
</mask>
<g id="Clip-10"></g>
<polygon id="Fill-9" fill="#4A5A28" mask="url(#mask-4)" points="-5.3030303 14.7222727 13.7878788 14.7222727 13.7878788 -4.38136364 -5.3030303 -4.38136364"></polygon>
</g>
<path d="M62.4649242,25.6347424 C62.4649242,28.7211061 59.967197,31.2230758 56.8861364,31.2230758 C53.8029545,31.2230758 51.3052273,28.7211061 51.3052273,25.6347424 C51.3052273,22.5483788 53.8029545,20.0464091 56.8861364,20.0464091 C59.967197,20.0464091 62.4649242,22.5483788 62.4649242,25.6347424 L62.4649242,25.6347424 Z" id="helseogfamilie-Stroke-12" stroke="#4A5A28" stroke-width="2"></path>
</g>
</g>
</g>
</svg>
<svg width="65" height="72"><use xlink:href="#helseogfamilie" /></svg>
<img src="https://beta.mgk.no/themes/custom/mgk/dev/svg/helseogfamilie.svg">