title: Fit <svg> to the size of <object> container
body: <p>I have this markup:</p>
  
  <pre><code>#widget1 {
      height:100px;
      width:200px;
  }
  
  &lt;div class="widget" id="widget1"&gt;
      &lt;object data="foo.svg" type="image/svg+xml" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I managed to make the <code>&lt;object&gt;</code> element fill up the outer <code>&lt;div&gt;</code>, but the inner foo.svg file has its own ideas how big it is. I need foo.svg (which consists of an <code>&lt;svg&gt;</code> element, of course) to be the same size as <code>&lt;object&gt;</code> and <code>&lt;div&gt;</code>. </p>