Fit <svg> to the size of <object> container

Question

I have this markup:

#widget1 {
    height:100px;
    width:200px;
}

<div class="widget" id="widget1">
    <object data="foo.svg" type="image/svg+xml" />
</div>

I managed to make the <object> element fill up the outer <div>, but the inner foo.svg file has its own ideas how big it is. I need foo.svg (which consists of an <svg> element, of course) to be the same size as <object> and <div>.

Answer 1

This is answered (with examples) in the svg primer.

tl;dr summary:

• remove 'width' and 'height' attributes on the svg root, and add a 'viewBox' attribute with the value "0 0 w h", where w and h are the absolute values usually found in the width and height attributes (note that percentages and other units aren't allowed in the viewBox attribute)

Answer 2

Try to add: width: XXXpx !important; height: XXXpx !important;