html - 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

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.