title: Why is SVG cut off in Chrome?
body: <p>I don't know much about SVG - was just trying to learn a bit. So, I went to the <a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Example" rel="nofollow">Wikipedia SVG Example</a>
  and thought "Oh, can I just embed XML like that in my web page?"  Tried it, and bascially, yes, you can, but the image I see rendered in Chrome (Version 45.0.2454.101 m running on Windows Enterprise 7) is cutoff right about the Y=150 mark (Y = 150 on the Wikipedia page's grid).</p>
  
  <p>Same web page rendered under IE looks just like the image on the Wikipedia page.
  Same web page viewed under Firefox is also cut off like Chrome.  So it seems like IE is getting something right here that Chrome and Firefox are getting wrong.</p>
  
  <p>Here is the whole source of the web page I am viewing:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;SVG test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;h1&gt;SVG test&lt;/h1&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
    &lt;rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" /&gt;
    &lt;circle cx="125" cy="125" r="75" fill="orange" /&gt;
    &lt;polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" /&gt;
    &lt;line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The HTML doesn't get much simpler than this. What is the issue here?  Any easy way to make Chrome and Firefox render the whole image (i.e., like IE does)?</p>
  
  <p>Thanks!</p>