CODEWITHSUNDEEP
csshtmlsvgsize
tillda
tillda

Reputation: 18680

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

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

Upvotes: 19

Views: 31866

Answers (3)

mTiberiu
mTiberiu

Reputation: 11

add this to the parent div

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

Upvotes: 0

dudzio1222
dudzio1222

Reputation: 44

Try to add:

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

Upvotes: -2

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

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)

Upvotes: 47

Related Questions