Firefox SVG graphics blurry

Question

I have a responsive web design with a SVG logo/image which is dynamic with its container. All major browsers seem to support SVG really good.

My SVG is dynamic, so if I scale up my browser window, the SVG does it too. In Chrome and IE9 it works like a charm. In Firefox the SVG is blurry at some sizes. But I can't say its all the time blurry when it's over the initial SVG size. It just seems not to rerender correctly all the time while I'm scaling up my browser window.

That's what it looks like sometimes (have a look at it in fullsize to see the difference):

Maybe I'm using the wrong way to embed it. That's what my CSS and HTML look like:

<div id="logo"></div>

CSS:

#logo {
   background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
   height: 22em;
   background-repeat: no-repeat;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
}

Grab the SVG with the link in the CSS if you want to have a look at it. It's made with Adobe Illustrator.

Any idea how to fix that?

Answer 1

To make an SVG image scale to the size of its container, make sure your svg tag has a viewBox set:

<svg viewBox="0 0 347 189">

but no width or height attributes, i e not:

<svg width="347px" height="189px" viewBox="0 0 347 189">

This, by default, will retain its aspect ratio by scaling up to the largest width or height that fits, whichever dimension hits the boundary first.

You can change preserveAspectRatio strategy in all sorts of interesting ways, if that particular behaviour isn't the one you seek.

Answer 2

The easiest solution is to scale up the SVG in a vector image editor like Illustrator. Scale it to the rendered resolution in the browser (or higher). Since it is a vector, scaling it up won't affect the file size.

Answer 3

I've run into the exact same issue, myself. I was able to fix it in Firefox by editing the SVG in a text editor and changing the <svg> element's width attribute value to 100%, but leaving all other attribute values alone. In your particular example, here's the change to be made:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

That did the trick for me and should do the same for you; I can't be 100% without a test case to work with, though.

NB: Setting both the width and the height to 100% broke Safari's rendering of the SVG in my particular case. Be sure to only set the width to 100%.

Answer 4

Another similar "gotcha" I found was when I exported an svg from illustrator the width and heights weren't round numbers - so when I opened the SVG in an editor the width was something like "100.6789px". By carefully editing the image in illustrator first to be round numbers and then using the same width and height for firefox it solved fuzzy images for me.

Answer 5

Update 2013-10: Confirmed fixed in v24 which now made it into the release channel

---

Update 2013-07: Bug is solved! Fix will make it into Firefox 24 which will be released somewhere between September and October

---

I read about a somewhat simple solution to this problem somewhere that I now use in my projects (will add source when i find it again):

simply set width and height of the svg-container to the maximum values the image is likely going to have and you are fine. Works in all current browsers just fine. only restriction is, that firefox and opera (yes, the same two browsers that caused this mess) dont work well with very big images --> dont use too high values for the dimensions

original file:

<svg width="64px" height="128px"> 

lets say the maxium width will be 3x that big, then your SVG should contain this:

<svg width="192px" height="384px"> 

(yes, the svg node can have more attributes...)

The reason why this works is that Opera and FF render SVGs before resizing them instead of the other way round as it is supposed to be done with vector gfx

UPDATE: credits go to David Bushell who wrote a wonderfull article on Resolution Independence With SVG.

Answer 6

The problem is that when you use SVG as a background image Firefox chooses what size to render the vectors to, and then scales those image-based-pixels up as necessary. Here's a related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

The simplest fix here is not to use SVG as a background image, but to embed your SVG directly, or reference it via an <img> tag.

If you put up a working test case showing the problem and files then we can help you with actual code and fixes.