title: Fix SVG rendering differences in Firefox / Chrome
body: <p>I'm using SVG.js to render a SVG graphic. It needs to be pixel-perfect, no fuzzy lines etc.</p>
  
  <pre><code>var draw = SVG(wrapper).size(560, 360)
  draw.attr('shape-rendering', 'crispEdges');
  draw.fixSubPixelOffset();
  </code></pre>
  
  <p>Now I don't have the weird fuzzy lines and all is good - but:</p>
  
  <p>Apparently, <code>crispEdges</code> rounds down in Chrome and up in firefox, so in the end, I have sharp graphics, but it's all for nothing because firefox renders some stuff 1 pixel off.</p>
  
  <p><strong>Chrome</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Ou79g.png" alt="Chrome - correct rendering"></p>
  
  <p><strong>Firefox</strong></p>
  
  <p><img src="https://i.stack.imgur.com/lwZ8R.png" alt="Firefox - broken rendering"></p>
  
  <p>Notice that neither is perfect, but since I optimized for Chrome, it's broken in Firefox - and if I fix it for Firefox, it will be broken in Chrome. In particular, the "I" bar and the hour lines bother me - they need to be perfectly positioned. Also, the tooltip is a few pixels off.</p>
  
  <p>I'm sure some will ask for more code - I can provide it, but it's not really relevant to the problem, i.e. here's how the I bar is rendered:</p>
  
  <pre><code>if(data.now.day == index) {
      var mx = sl_BAR_HOFFSET + (sl_BAR_WIDTH / 1440)*data.now.time;
      var my = sl_BAR_VOFFSET-2;
  
      group.line(0,0,0,sl_BAR_HEIGHT+4)
          .stroke({ width: 1, color: sl_COLOR_NOW })
          .move(mx, my);
  
      group.line(0,0,3,0)
          .stroke({ width: 1, color: sl_COLOR_NOW })
          .move(mx-1.5, my);
  
      group.line(0,0,3,0)
          .stroke({ width: 1, color: sl_COLOR_NOW })
          .move(mx-1.5, my+sl_BAR_HEIGHT+3);
  }
  </code></pre>
  
  <p>I'd appreciate some advice how to fix this cross browser incompatibility. Some shim or anything?</p>