title: Make embedded SVG scale to fit parent container
body: <p>I want to compose my first SVG figure and embed it in HTML. It's easy if I resize my HTML container to fit the hard-coded SVG size—otherwise bad things happen:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>figure {
    background-color: gray;
    padding: 10px;
    width: 250px;
    height: 100px;
  }
  figure svg {
    background-color: pink;
  }
  figure svg circle {
    fill: salmon;
  }
  figure svg text {
    fill: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure&gt;
    &lt;svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
      width="50mm" height="50mm"
    &gt;
      &lt;circle cx="25mm" cy="25mm" r="25mm" /&gt;
      &lt;text x="25mm" y="33mm" font-size="25mm" text-anchor="middle"&gt;SVG&lt;/text&gt;
    &lt;/svg&gt;
  &lt;/figure&gt;
  
  &lt;figure&gt;Hello, World!&lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Being scalable is the killer feature of the format but I can't make it work or even understand how it works. I'm completely confused with the basic concepts of viewport, coordinates, sizes, user units... and the articles I've read haven't helped (many suggest you even need CSS hacks).</p>
  
  <p>Is it possible to fix my code so the <code>&lt;svn&gt;</code> items expands or shrinks automatically to fit the dimensions of the <code>&lt;figure&gt;</code> they're wrapped in? Or do I need to use JavaScript to change <code>width</code> and <code>height</code> dynamically?</p>