title: Firefox SVG graphics blurry
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>That's what it looks like sometimes (have a look at it in <a href="http://f.cl.ly/items/2D1m0F3c2y343u1d3F02/Image%202012-01-21%20at%203.45.22%20PM.png" rel="noreferrer">fullsize</a> to see the difference):
  <img src="https://i.stack.imgur.com/XLlMZ.png" alt="enter image description here"></p>
  
  <p>Maybe I'm using the wrong way to embed it. That's what my CSS and HTML look like:</p>
  
  <pre><code>&lt;div id="logo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#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%;
  }
  </code></pre>
  
  <p>Grab the SVG with the link in the CSS if you want to have a look at it. It's made with Adobe Illustrator.</p>
  
  <p><strong>Any idea how to fix that?</strong></p>