title: SVG rendering blurry in all browsers except chrome
body: <p>I have an SVG file that is using a pattern to make the background of a schedule. In Google Chrome, this renders as expected, with every line not being anti-aliased. However, in Firefox, Safari, and Internet Explorer, it renders with every line being 2px that are semi-transparent.</p>
  
  <p><strong>What I Tried</strong></p>
  
  <p>After many hours of searching and trying different approaches, I have come to the following conclusions:</p>
  
  <ol>
  <li>The blurriness is in part caused by the fact that the svg has a dynamic width and is solved when a <code>viewBox</code> attribute is applied, however this looses all scalability which defeats the purpose of using an svg.</li>
  <li>When there is only one svg on the page, it appears to look normal (or close enough to normal), however when there are multiple in succession, every other one (or sometimes randomly) will appear with each 1px line appearing as 2px anti-aliased line (looks bad).</li>
  <li>Offsetting the x and/or y-values by .5 pixels does not change anything and can make the rendering look even worse sometimes.</li>
  <li>Adding <code>shape-rendering: crispEdges;</code> to the style of each line can either <strong>a)</strong> make the lines disappear completely or just not have any effect whatsoever or <strong>b)</strong> make the colors in the 2px lines darker, but not actually making the lines 1 pixel.</li>
  <li>The <code>enable-background</code> attribute appears to have no effect on the </li>
  </ol>
  
  <p>Again, none of these problems appear in Chrome, but do in <em>all other modern browsers</em></p>
  
  <p><strong>The SVG in question</strong></p>
  
  <pre><code>&lt;svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
      &lt;pattern id="day" width="100%" x="0" height="40" patternUnits="userSpaceOnUse"&gt;
        &lt;line x1="0" y1="0" x2="100%" y2="0" style="stroke:#bbb;stroke-width:1" /&gt;
        &lt;line x1="0" y1="20" x2="100%" y2="20" style="stroke:#ccc;stroke-width:1" stroke-dasharray="3,3" /&gt;
      &lt;/pattern&gt;
      &lt;pattern id="hours" width="100%" x="0" height="40" patternUnits="userSpaceOnUse"&gt;
        &lt;line x1="0" y1="0" x2="100%" y2="0" style="stroke:#000;stroke-width:1" /&gt;
      &lt;/pattern&gt;
    &lt;/defs&gt;
    &lt;rect x="0" width="5%" height="500" fill="url(#hours)" /&gt;
    &lt;rect x="7%" width="17%" height="500" fill="url(#day)" /&gt;
    &lt;rect x="26%" width="17%" height="500" fill="url(#day)" /&gt;
    &lt;rect x="45%" width="17%" height="500" fill="url(#day)" /&gt;
    &lt;rect x="64%" width="17%" height="500" fill="url(#day)" /&gt;
    &lt;rect x="83%" width="17%" height="500" fill="url(#day)" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Images of Renderings</strong></p>
  
  <p><em>VIEW FULLSCREEN TO SEE EFFECT</em></p>
  
  <p><strong>Chrome (reference):</strong></p>
  
  <p><a href="http://i.imgur.com/BMjFmH6.png" rel="nofollow">http://i.imgur.com/BMjFmH6.png</a></p>
  
  <p><strong>Firefox (with <code>shape-rendering: crispEdges;</code>):</strong></p>
  
  <p><a href="http://i.imgur.com/4cgZjq7.png" rel="nofollow">http://i.imgur.com/4cgZjq7.png</a></p>
  
  <p><strong>Firefox <em>(with .5px renderings, after multiple included svg's. Note, image rendered at different size than previous ones.)</em></strong></p>
  
  <p>(Can't post 3 links, but use this id after imgur.com):
  JiuswRF.png</p>
  
  <p>Any help on this problem would be  <strong><em>greatly</em></strong> apreciated.</p>
  
  <p>Thanks!</p>