Fit

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>.

score 47 · Accepted Answer · answered Jan 19 '11 at 16:07

47

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)

answered Jan 19 '11 at 16:07

Erik Dahlström

59,452
12
120
139

3

What if I can't edit the `.svg` file? Can I do it from the html? – Colonel Panic Jul 25 '14 at 22:30
2

@ColonelPanic It can be done with script if the svg and the html are same-origin. Here's how to get started with that: http://stackoverflow.com/questions/14376732/work-with-elements-from-embed-or-object-tag. – Erik Dahlström Jul 28 '14 at 13:32
Is it possible to force nested SVG that has own width="300" and height="200" to stretch to fill parent DIV that's 700x500 ? – temuri Jan 10 '15 at 18:00

score 0 · Answer 2 · edited May 28 '21 at 03:58

0

add this to the parent div

#widget1 {
    display: flex;
    justify-content: center;
}

edited May 28 '21 at 03:58

Félix Paradis

5,165
6
40
49

answered Mar 08 '21 at 20:30

mTiberiu

11
2

score -2 · Answer 3 · edited May 27 '21 at 15:58

-2

Try to add:

width: XXXpx !important;
height: XXXpx !important;

edited May 27 '21 at 15:58

marc_s

732,580
175
1,330
1,459

answered Dec 08 '15 at 09:18

dudzio1222

44
4

Fit

3 Answers3

Linked

Fit to the size of container

3 Answers3

Linked

Fit