SVG size controll - svg

I am new to svg and have a question, how to make svg element to get bigger?
How can i control it?
player container
here is my code:
<div class="player-container">
<svg width="100%" height="100%" viewBox="0 0 97 97" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
opacity="0.153808594">
<g id="Car-concept" transform="translate(-193.000000, -733.000000)" fill="#8E95D7">
<g id="Group-10" transform="translate(127.000000, 596.000000)">
<g id="Group-14" transform="translate(66.000000, 137.000000)">
<circle id="Oval" cx="48.5" cy="48.5" r="48.5"></circle>
</g>
</g>
</g>
</g>
</svg>
<svg class="moving-outline" width="100%" height="100%" viewBox="0 0 453 453" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#646DBE" stroke-width="10" />
</svg>
<h3 class="time-display">45%</h3>
</div>

Related

how to anikmate this svg while scrollling?

<svg class="desktop-img" xmlns="http://www.w3.org/2000/svg" width="821.334" height="509.375" viewBox="0 0 821.334 509.375" preserveAspectRatio="true" version="1.1">
<path id="Path_244" class="path" data-name="Path 244" d="M-15596.515,315.963s-64.138,86.644-155.208,86.033-153.659-47.666-263.047-49.682-212.582,34.27-284.648,148.329-38.8,246.323-38.8,246.323" transform="translate(16375.888 -274.001)" fill="none" stroke="#ef404a" stroke-linecap="round" stroke-linejoin="round" stroke-width="60" ></path>
</svg>
Want animate this curve while scrolling

Trying to use svg sprites

Does not work SVG sprites on my template. I google it a lot but found solutions did not work for me.
when I use:
<svg>
<use xlink:href="icons.svg#icon"></use>
</svg>
browser shows 'shadow-root closed'
when I trying to use SVG as inline, g tag inside SVG tag moves far away from parent SVG tag.
How to make my SVG file is useful?
My svg file > Codepen

From your file with icons, first make a sprite of icons.
To do this, wrap the code of each icon with <symbol> tags instead
of the group tag <g>
Then save as a stand-alone icons.svg file and add it to the same folder next to index.html
Add this file to your application’s HTML
<object type="image/svg+xml" data="icons.svg">
Your browser does not support SVG
</object>
or specify the full path if the file with icons is in another folder
<object type="image/svg+xml" data="images/icons.svg">
Your browser does not support SVG
</object>
An example of your converted sprite icon file:
<!-- Generator: Adobe Illustrator 23.0.0, 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 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1 c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0 c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
</svg>
The icons are loaded into your application, but they will not be
visible until called by the <use> command
Then by ID icon you call it in the right placeHTML page
<svg viewBox="0 0 676 289">
<use xlink:href="icons.svg#instagram" />
</svg>
Below is a sample code for inline adding sprite icons:
<!-- Generator: Adobe Illustrator 23.0.0, 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 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1
c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8
c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0
c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1
c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8
c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6
c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
<svg viewBox="0 0 676 289">
<use xlink:href="#instagram" />
<use xlink:href="#facebook" />
<use xlink:href="#ok" />
<use xlink:href="#vk" />
<use xlink:href="#GooglePlus" />
<use xlink:href="#twitter" />
<use xlink:href="#Search" />
</svg>
</svg>

Png as background inside svg shape

I'm trying to create an header using a svg to generate a curved shape, like so
I copied the SVG code generate from Sketch, deleted some extra tags and fixed the image path
<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
</defs>
<g id="Header-Copy" transform="translate(0, -163.000000)">
<mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
<use id="Rectangle-Copy-2" fill="#0BE17D" transform="translate(720.000000, 481.765165) scale(-1, 1) translate(-720.000000, -481.765165) " xlink:href="#path-1"></use>
<image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
</g>
</svg>
But I end up with this
How can I make this work?

Remove the transform attribute from element <use id="Rectangle-Copy-2">.
<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
</defs>
<g id="Header-Copy" transform="translate(0, -163.000000)">
<mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
<use id="Rectangle-Copy-2" fill="#0BE17D" xlink:href="#path-1"></use>
<image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
</g>
</svg>

How can I blur svg image?

I want to blur all this svg image : https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/eu.svg?short_path=4cf8a66
I want the same result as the following CSS :
filter: blur(2px);
-webkit-filter: blur(2px);
Is there a way to do something like this:
<svg blur="0.5">
like opacity with:
<svg opacity="0.5">
?

The filter attribute maps to the filter CSS property in SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
<defs>
<g id="d">
<g id="b">
<path d="M0-1l-.31.95.477.156z" id="a"/>
<use transform="scale(-1 1)" xlink:href="#a"/>
</g>
<g id="c">
<use transform="rotate(72)" xlink:href="#b"/>
<use transform="rotate(144)" xlink:href="#b"/>
</g>
<use transform="scale(-1 1)" xlink:href="#c"/>
</g>
</defs>
<path fill="#039" d="M0 0h640v480H0z"/>
<g filter="blur(0.2px)" transform="translate(320 242.263) scale(23.7037)" fill="#fc0">
<use height="100%" width="100%" xlink:href="#d" y="-6"/>
<use height="100%" width="100%" xlink:href="#d" y="6"/>
<g id="e">
<use height="100%" width="100%" xlink:href="#d" x="-6"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -5.076 .534)"/>
</g>
<use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/>
</g>
</svg>

With Jekyll, links inside SVG graphics aren't working

I have an SVG graphic in a Jekyll project with code like this:
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 451.5 100" enable-background="new 0 0 451.5 100" xml:space="preserve">
<a xlink:href="http://google.com">
<g id="step1_1_">
<rect x="19" y="15.7" fill="whitesmoke" stroke="orange" stroke-miterlimit="10" width="110.6" height="69.1"/>
<text id="step1" transform="matrix(1 0 0 1 36.1851 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">widget</tspan></text>
</g>
</a>
<a xlink:href="http://nytimes.com">
<g id="step2_1_">
<rect x="170.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/>
<text id="step2" transform="matrix(1 0 0 1 190.2962 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">gizmo</tspan></text>
</g>
</a>
<a xlink:href="http://yahoo.com">
<g id="step3_1_">
<rect x="321.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/>
<text id="step3" transform="matrix(1 0 0 1 342.4126 38.7301)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Copy the scripts</tspan></text>
</g>
</a>
<g id="arrows">
<g>
<g>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="134" y1="46.5" x2="156" y2="46.5"/>
<g>
<path d="M162,46.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C155.6,43.6,159.2,45.4,162,46.5z"/>
</g>
</g>
</g>
<g>
<g>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="287" y1="48.5" x2="309" y2="48.5"/>
<g>
<path d="M315,48.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C308.6,45.6,312.2,47.4,315,48.5z"/>
</g>
</g>
</g>
</g>
</svg>
```
This image is just three rectangular shapes that are formatted with links using the a tag.
When I view the image in the browser by itself, the links work. However, when I view the image inside a Jekyll site, the links no longer work. Any ideas why?

If you embed your svg as an image (img) you have no control over it (external css and js) and links are not clickable. Options are :
inline svg
{% include_relative workflow.svg %}
using the object tag
<object data="/workflow.svg" type="image/svg+xml" class="mailicon" />
</object>
More info on https://css-tricks.com/using-svg/

Resources