How to make SVGs sharp in Firefox and Internet Explorer - css

When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.
It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.
What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)
What I have tried so far:
I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.
<svg width="16px" height="16px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>


Hack for Firefox:
svg {
transform: translateZ(0);
}
What about IE:
possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.


Use much larger values for width and height.
What you are doing at the moment is essentially specifying a 24 x 16 pixel image, and expanding it to full screen size. SVG should be infinitely scalable, hence the name, but some Browsers, like some TVs are better at pixel interpolation than others.

Related

Animate SVG fill shape by following the form

i wonder how to fill a form continously with html5/css3 to create a loading icon (spinner).
The fill should follow the red line (3) and leave the shape in same direction when it reaches the end (6)
If it would be a thin line i could work with fake line animation, but how i can do this with a thicker shape like this?
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<g>
<path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</g>
</svg>

The main idea is using a very thick line with a changing stroke-dashoffset. I clip the line with your path.
In order to understand it better you may remove the clip-path attribute.
I'm using an input type range to change the value of the stroke-dashoffset
itr.addEventListener("input",()=>{pth.setAttribute("stroke-dashoffset",itr.value)})
<p><input type="range" min="0" max="235" value="235" id="itr"/></p>
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<clipPath id="clip">
<path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</clipPath>
<path id="pth" fill="none" stroke-dasharray="235" stroke-dashoffset="235" stroke="rgb(250,0,0)" stroke-width="72" d="M115,60C15,175 235,175 155,65" clip-path="url(#clip)" />
</svg>
UPDATE
The OP is commenting:
Is it possible to leave the scale-input and animate the filling so the fillup is automatically and when reaching the end that the fill is removing the same direction and when the filling stroke is then empty again, then start from beginning?
For this I'm animating the stroke-dashoffset of the red line from 235 to -235. This way after animating all the dash (from 235 to 0) the animation follows (from 0 to -235) and the gap is now visible.
#keyframes anim {
100% {
stroke-dashoffset: -235;
}
}
#pth {
animation: anim 5s linear infinite;
}
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<clipPath id="clip">
<path id="base" d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z" />
</clipPath>
<use href="#base" />
<path id="pth" fill="none" style="stroke-dasharray:235; stroke-dashoffset:235;" stroke="rgb(250,0,0)" stroke-width="72" d="M115,60C15,175 235,175 155,65" clip-path="url(#clip)" />
</svg>

Why is my SVG image squeezed in IE11?

I'm using SVG image files with <img> tag. The image looks fine in all browsers except for IE11.
How it should look:
How it looks in IE11:
The CSS is set to width:42px; height:auto. I've tried fiddling with viewbox and height and width of the SVG itself, but nothing seems to help.
This is the code:
.st0{
fill:#7F7F7F;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px"
viewBox="0 0 40 40" xml:space="preserve">
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>

I added a red box that shows the area occupied by svg
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" style="border:1px solid red;" >
Chrome
IE11
If you replace height:auto with a fixed size
svg {
width:42px;
height:42px;
}
The image will look the same in all browsers:
the second variant: add the viewport to the svg file width="40" height="40"
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" >
<style type="text/css">
.st0{fill:#7F7F7F;}
</style>
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
The third variant
If you want to leave css rule - height: auto; for the block, then add "preserveAspectRatio"
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" >
<style type="text/css">
.st0{fill:#7F7F7F;}
svg {
width:42px;
height:auto;
}

SVG icon rendering with weird edges

SVG icon on chrome looks very weird, especially the instagram one - on zoom you can see all the weird edges. Does anyone have any idea of how to fix it?
Here is the code for the icon:
<div id="instagram">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="icon">
<path fill="black" class="social_instagram" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
<path class="circle" fill="white" d="M12,8.4c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6s3.6-1.6,3.6-3.6S14,8.4,12,8.4z M12,14.3c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3s2.3,1,2.3,2.3S13.3,14.3,12,14.3z M15.7,9.1c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C16.6,8.7,16.2,9.1,15.7,9.1z M19,9.1c-0.1-2.5-1.5-4-4.1-4.1c-0.7,0-1,0-2.9,0S9.9,5,9.1,5C6.6,5.2,5.2,6.6,5,9.1c0,0.7,0,1,0,2.9s0,2.1,0,2.9c0.1,2.5,1.5,4,4.1,4.1c0.7,0,1,0,2.9,0s2.1,0,2.9,0c2.5-0.1,4-1.5,4.1-4.1c0-0.7,0-1,0-2.9S19,9.9,19,9.1z M17.7,14.8c-0.1,1.9-1,2.8-2.9,2.9c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-1.9-0.1-2.8-1-2.9-2.9c0-0.7,0-1,0-2.8s0-2.1,0-2.8c0.1-1.9,1-2.8,2.9-2.9c0.7,0,1,0,2.8,0s2.1,0,2.8,0c1.9,0.1,2.8,1,2.9,2.9c0,0.7,0,1,0,2.8S17.7,14.1,17.7,14.8z"/>
</svg>
</div>

It looks like your circle is really just a square with some vectors that bend the corners. This may be why Chrome is rendering it differently than you'd like. Instead of using path to draw your circle, use circle instead.
<circle cx="12" cy="12" r="12" fill="black" class="social_instagram"/>

Why is my SVG with position absolute not exactly at the edge?

Whenever I try to position a scaled SVG with position: absolute;, and use 0 as the positioning parameter (i.e. top:0;) the svg does not seem to connect seamlessly.
Especialy when zooming or when creating a responsive layout, this seems to occure.
Consider the following example:
an item with SVG's as rounded corners:
<div class="item">
<svg class="corner top-left" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner top-right" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-left" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-right" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
</div>
The corners are positioned with position: absolute; and rotated in css
.corner {
position: absolute;
height: 20px;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
top: 0;
right: 0;
transform: rotate(90deg);
}
.bottom-left {
bottom: 0;
left: 0;
transform: rotate(-90deg);
}
.bottom-right {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
Now, depending on your screen resolution, you'll see the corners won't all fit seamlessly to the edge. Also when zooming in/out to the website oyu'll see a gap between the SVG and the edge of the element.
A dirty fix is to just offset the element minus 1 pixel in the direction it is positioned. However, the gap seems to be smaller than 1 pixel, thus breaking the design of the element when offsetting 1 pixel. Also, the gap does not appear all the time, only at certain pixel breakpoints.
Does anyone know how to fix this?
FIDDLE
To clarify, I want to prevent these lines from happening:

I'm not sure there is a particularly elegant solution to this problem. It affects Firefox mostly, because I believe Chrome/Webkit tends to snap elements to pixel boundaries, whereas Firefox doesn't.
One solution is to alter your paths so that they draw slightly outside the SVG and then set the <svg> to overflow="visible".
<svg class="corner top-left" ...snip... viewBox="0 0 10 10" overflow="visible">
<path class="st0" d="M10,0 V-2H-2V10H0c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
</svg>
Here, for this top-left SVG, I have created a two-unit "porch" up and to the left. Then if overflow is set to visible, the path will overdraw the little red lines caused by anti-aliasing/rounding.
Here's a demo fiddle with (only) the top left SVGs modified.

SVG icon changes when SVG sprite set to display:none

If I embed an SVG sprite
<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
<g id="phone2">
.....
</g>
</svg>
and reference an embedded icon as follows:
<svg viewBox="1 1 32 32" class="icon">
<use xlink:href="#phone2"></use>
</svg>
If is set the SVG sprite to:
.hidden-svg {
display: none;
}
It changes the look of my icon. See jsbin here.
What can I do to avoid changing the icon?

Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.

Resources