title: How to draw a vertical line in SVG
body: <p>I am trying to draw a vertical line with SVG. </p>
  
  <pre><code>&lt;style&gt;
    svg#chart {
      background: lightgray;
    }
    #chart line {stroke: #555555; stroke-width:1}
  &lt;/style&gt;
  &lt;svg id="chart" width="300" height="225"&gt;
    &lt;line x="20" y1="20" x2="20" y2="130"&gt;&lt;/line&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/V58nJ.png" rel="nofollow"><img src="https://i.stack.imgur.com/V58nJ.png" alt="enter image description here"></a></p>
  
  <p>Given that "x" and "x2" are the same I would have expected the line to be completely vertical. I'm pretty new to this type of programming, so I am likely missing something very obvious, however this is not the behavior I would have expected.</p>
  
  <p>How do I make this line vertical?</p>