title: SVG Grid Rendering Chrome,Firefox,IE - Wrong Line Alignment - Blurred Lines
body: <p>In order to create an SVG I am drawing several lines in SVG.
  The issue is that It looks different in Chrome and Firefox.</p>
  
  <p>Chrome: Last line not drawn
  Firefox: Firts line not drawn</p>
  
  <p>BTW: The internet explorer version looks blurred, but this is not the main issue.</p>
  
  <p>So who is right now?</p>
  
  <p>What am I doing wrong.</p>
  
  <p>To give you some background information: I am drawing this grid usually dynamically from JavaScript. Do I have to write ugly hacks to deal with these different SVG browser rendering behaviors?
  (I do not want to use any libraries but plain JavScript)</p>
  
  <p>See this codepen.io here:
  <a href="http://codepen.io/mjost/full/kuaFH" rel="nofollow">http://codepen.io/mjost/full/kuaFH</a></p>
  
  <p>here is the code:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" id="phoenix10_5" viewBox="0 0 960 768"&gt; 
  &lt;defs&gt;
  &lt;style type="text/css"&gt;
  &lt;![CDATA[
  svg
  {
      shape-rendering: crispEdges;
      stroke-linecap: butt;
  }
  text
  {
      alignment-baseline: auto;
  }
  ]]&gt;
  &lt;/style&gt;
  &lt;/defs&gt;
  &lt;rect x="0" y="0" width="960" height="768" rx="0" ry="0" fill="rgb(255, 255, 255)"/&gt;
  &lt;g&gt;
  &lt;rect x="69" y="44" width="746" height="187" rx="0" ry="0" fill="rgb(255, 255, 255)"/&gt;
  &lt;g&gt;
  &lt;svg x="69" y="44" width="746" height="187" viewBox="0 0 746 187"&gt;
      &lt;rect x="0" y="0" width="746" height="187" style="fill: #FFFFFF"/&gt;
      &lt;g&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="746" y2="0"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="18" x2="746" y2="18"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="37" x2="746" y2="37"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="56" x2="746" y2="56"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="74" x2="746" y2="74"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="93" x2="746" y2="93"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="112" x2="746" y2="112"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="130" x2="746" y2="130"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="149" x2="746" y2="149"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="168" x2="746" y2="168"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="187" x2="746" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="0" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="74" y1="0" x2="74" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="149" y1="0" x2="149" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="223" y1="0" x2="223" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="298" y1="0" x2="298" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="373" y1="0" x2="373" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="447" y1="0" x2="447" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="522" y1="0" x2="522" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="596" y1="0" x2="596" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="671" y1="0" x2="671" y2="187"/&gt;
          &lt;line stroke="#000000" stroke-width="1" x1="746" y1="0" x2="746" y2="187"/&gt;
      &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>