SVG font not rendering in all browsers - svg

I have an issue where SVG font is rendering incorrectly in windows based browsers.
Here is my code for the svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg
width="34px" height="34px" viewBox="0 0 34 34" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
<title>VS. + Oval 20</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="EVENTS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sports-Event-PRE" transform="translate(-368.000000, -661.000000)">
<g id="Group" transform="translate(120.000000, 634.000000)">
<g id="VS.-+-Oval-20" transform="translate(249.000000, 28.000000)">
<g id="Group-9">
<g id="Group-10">
<circle id="Oval-20" stroke="#4B4954" stroke-width="2" fill="#000000" cx="16" cy="16" r="16"></circle>
<text id="VS" font-family="DIN-Bold, DIN" font-size="12" font-weight="bold" fill="#FFFBEE">
<tspan x="9.468" y="21">VS</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g> </svg>

Related

SVG size controll

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>

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>

svg changes when converted to symbol

I have this dummy svg showing a cirle with some grey figure inside
<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-585.000000, -391.000000)">
<g transform="translate(585.000000, 391.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
<g transform="translate(21.500000, 27.823529)" id="Page-1">
<path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
</g>
</g>
</g>
</g>
</g>
when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result
<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>
Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck.
What am I missing here?

UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.
svg {
width: 100px;
}
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c">
<circle cx="43" cy="43" r="43" fill="currentColor" />
</symbol>
<mask id="mask" color="#fff">
<use xlink:href="#c" />
</mask>
</defs>
<use xlink:href="#c" color="#666" />
<path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2" color="#fff">
<circle cx="43" cy="43" r="43" fill="#FFF" />
</mask>
</defs>
<circle cx="43" cy="43" r="43" fill="currentColor" />
<path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>

It is probably not a complete answer but I managed to get it work;
First I extended my defs with a clipPath using my circle
<defs>
<circle id="circle" cx="43" cy="43" r="43"></circle>
<clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>
Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.

Why does Safari render svg g with edge/border?

<svg width="29px" height="29px" viewBox="36 168 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<ellipse id="checkbox-circle" stroke="#F2B91A" stroke-width="3" cx="12.5" cy="13.5" rx="12.5" ry="12.5"></ellipse>
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Problem is that Safari renders a small border for the checkbox-checked g:
image link
Codepen: http://codepen.io/anon/pen/GjGmGE?editors=1000#0
Edit:
It was actually in the path. Other browsers just don't render it.
Proper path:
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745" id="Combined-Shape"></path>
</g>

The lines you are complaining about are actually a part of your path. If we draw it with a stroke instead of a fill, you can see what I mean.
<svg viewBox="36 168 29 29">
<g id="checkbox" stroke="black" stroke-width="0.2" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Load the file into your editor and delete the extra lines.

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