SVG scaling adds whitespace/padding instead of resizing the whole element

Asked Jun 26 '14 at 12:53

Active Jan 29 '23 at 11:14

Viewed 569 times

I'm trying to scale an SVG according to user's viewport width

I have this css:

.thesvg {

padding: 0;
line-height: 0;
margin: 0;
width: 50%;
max-width: 360px;

}

It scales as it should horizontally, and the aspect is kept

But it adds whitespace/padding to the top/bottom (and maintains original element height) instead of scaling down entirely

But only in some browsers.. or I think so (maybe because of different viewport sizes)

Is this a bug? Or how can I fix this and achieve a perfectly fluid SVG just by managing the width (if possible)?

asked Jun 26 '14 at 12:53

mowgli

Maybe I need to wrap it up in a div – mowgli Jun 26 '14 at 12:58
probably you should have a look at the `viewBox` attribute... http://tutorials.jenkov.com/svg/svg-viewport-view-box.html – philipp Jun 26 '14 at 13:48
Or this - http://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container – Paulie_D Jun 26 '14 at 14:03

0 Answers0