svg image is blurry in all browsers

Question

I'm using an svg image in my website. But the image gets blurry on all browsers. Does any one have a some clues to why this is happening?

Here is the html:

<div class="panel">
   <img id="logo" src="img/teste.svg" alt="">
</div>

(panel class is from foundation)

Here is the css:

#logo {
position: absolute;
top: 0%;
height: 100%;
left: 1%;
width: 17%;
min-width: 219px;
min-height: 67px;
z-index: 1;}

I can´t show the actual image, but here is the beginning of the svg file, don't know if it's relevant:

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

Answer 1

This could be something to do with the scaling of the element that has the image.

I'm not certain if your case is the same, but I noticed blurry svg css backgrounds when I used vw (viewport width) to set the size of the element. Apparantly the browser first assumes some absolute value, and then corrects it based on the relative value (eg % or vw) that is provided.

In any case, I managed to get better results by doing this:

• double the width and height values: width: 7.2vw; becomes width: 14.4vw;
• add transform: scale(0.5);

It appears the browser first renders the svg to pixels at double the size (thus very detailed, but still blurry), then when scaling it down by half the size the result is a much more crisp image.

Answer 2

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

Your height is set as 239.988px - try to round that to a full pixel if you can. Same with width. Browsers tend to have problems with pixel rounding, so try to stay inside full values.

Answer 3

Add the preserveAspectRatio="none" in svg tag

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" preserveAspectRatio="none" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

more about PreserveAspectRatioAttribute