title: How can I preserve the aspect ratio of internal elements of an SVG while allowing the SVG itself to scale?
body: <p>I'm very new to SVG, so I apologize if this is an obvious question. I've tinkered for a few hours and seem to have hit a wall.</p>
  
  <p>I am attempting to create an SVG element in an HTML document which:</p>
  
  <ul>
  <li>has a firm boundary on the outer viewport</li>
  <li>preserves the aspect ratio of internal elements</li>
  <li>does not preserve the aspect ratio of the outer SVG element</li>
  <li>can be resized arbitrarily while maintaining these contraints</li>
  </ul>
  
  <p>This JSFiddle illustrates what I mean and what I have attempted:</p>
  
  <p><a href="http://jsfiddle.net/a8q6S/" rel="noreferrer">http://jsfiddle.net/a8q6S/</a></p>
  
  <p>And here's the same code since I can't post this otherwise:</p>
  
  <pre><code>&lt;div&gt;
       &lt;h2&gt;correct placement and aspect ratio, but cannot be resized without losing relative placement&lt;/h2&gt;
  
      &lt;svg viewBox="0 0 100 100" style="width: 100px; height: 100px; border: 1px solid red;"&gt;
          &lt;circle cx="0" cy="0" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="50" cy="50" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="100" cy="100" r="10"&gt;&lt;/circle&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;h2&gt;correct aspect ratio of circle, incorrect relative placement&lt;/h2&gt;
  
      &lt;svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin" style="width: 200px; height: 100px; border: 1px solid red;"&gt;
          &lt;circle cx="0" cy="0" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="50%" cy="50%" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="100%" cy="100%" r="10"&gt;&lt;/circle&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;h2&gt;correct relative placement, can be resized, but loses internal aspect ratio&lt;/h2&gt;
  
      &lt;svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: 200px; height: 100px; border: 1px solid red;"&gt;
          &lt;circle cx="0" cy="0" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="50" cy="50" r="10"&gt;&lt;/circle&gt;
          &lt;circle cx="100" cy="100" r="10"&gt;&lt;/circle&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this possible? Am I going about this the wrong way?</p>