title: Why is my SVG line blurry or 2px in height when I specified 1px?
body: <p>I'm creating a line with SVG and it is appearing blurry in my web page. To be more clear, it appears larger than the stroke width of 1px. Why is this happening and is there a way to fix it in SVG?</p>
  
  <p>Here is the code. When I run this code by itself it is not blurry. When it's in my web page the line appears to be about 2px in height rather than 1. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#HorizontalLine1178  {
   stroke:rgb(154,154,154);
   stroke-width:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="width:100%;"&gt;
      &lt;line id="HorizontalLine1178" y2="97" y1="97" x2="100%" x1="62" &gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>