title: How does the viewport coordinate system work in svg?
body: <p>I am trying to understand how the coordinate systems works in <code>svg</code>. </p>
  
  <p>In the following HTML, I am unable to understand why the images enlarge if I don't specify viewport. </p>
  
  <p>There seems to be a default size of <code>viewport</code> if I don't specify any value. What is it?</p>
  
  <pre><code>&lt;!-- what is the default dimension of a viewport? --&gt;
  &lt;p&gt; no viewport or view box. viewport seem to have a default size. anything outside is clipped&lt;/p&gt;
  &lt;svg style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="50" ry="50"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  
  &lt;p&gt; no viewport or view box. viewport seem to have a default size. anything outside is clipped&lt;/p&gt;
  &lt;svg style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="1500" ry="1500"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  
  &lt;p&gt;viewport but no viewbox. Only what is in viewport is visible. Same as default viewport value case but we are specifying the dimensions of viewport here&lt;/p&gt;
  &lt;svg width="50" height="50" style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="50" ry="50"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  
  &lt;p&gt;viewport but no viewbox. Only what is in viewport is visible.  Same as default viewport value case but we are specifying the dimensions of viewport here&lt;/p&gt;
  &lt;svg width="50" height="50" style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="1500" ry="1500"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  &lt;!-- why this is large?--&gt;
  &lt;p&gt;viewbox but no viewport. Viewport takes same space as viewbox&lt;/p&gt;
  &lt;svg viewBox="0 0 50 50" style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="50" ry="50"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  &lt;!-- why this is large?--&gt;
  &lt;p&gt;viewbox but no viewport. Viewport takes same space as viewbox&lt;/p&gt;
  &lt;svg viewBox="20 20 100 100" style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="50" ry="50"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  
  &lt;p&gt;viewport and viewbox. Value of viewport determines what would be visible&lt;/p&gt;
  &lt;svg width="10" height="10" viewBox="0 0 50 50" style="border-style: dotted"&gt;
    &lt;ellipse cx="50" cy="50" rx="50" ry="50"&gt;&lt;/ellipse&gt;
  &lt;/svg&gt;
  </code></pre>