title: How to make a <svg> element expand or contract to its parent container?
body: <p>The goal is to have the <code>&lt;svg&gt;</code> element expand to the size of its parent container, in this case a <code>&lt;div&gt;</code>, no matter how big or small that container may be.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;style&gt;
      svg, #container{
          height: 100%;
          width: 100%;
      }
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" &gt;
           &lt;rect x="0" y="0" width="100" height="100" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The most common solution to this problem seems to be setting the <code>viewBox</code> attribute on the <code>&lt;svg&gt;</code> element. </p>
  
  <pre><code>viewBox="0 0 widthOfContainer heightOfContainer"
  </code></pre>
  
  <p>However, this does not seem to work in cases where elements within the <code>&lt;svg&gt;</code> element have predefined widths and/or heights. For example, the <code>&lt;rect&gt;</code> element, in the above code, has its width and height explicitly set.</p>
  
  <p>So the obvious solution is to use % widths and % heights on those elements as well.  But does this even have to be done?  Especially, since <code>&lt;img src=test.svg &gt;</code> works fine and expands/contracts without any problems with explicitly set <code>&lt;rect&gt;</code> heights and widths.</p>
  
  <p>If elements like <code>&lt;rect&gt;</code>, and other elements like it, have to have their widths and heights defined in percentages, is there a way in Inkscape to set it so that all elements with the <code>&lt;svg&gt;</code> document use percentage widths, heights, etc.. instead of fixed dimensions?</p>