How do I scale a stubborn SVG embedded with the <object> tag?

I have some SVG files that specifies width and height as well as viewbox like this:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

but how to display them in the browser at a size I decide? I want them smaller and have tried:

<object width="400" data="image.svg"></object>

but then I get visible scrollbars.

It works if I change the SVG files to set width and height to 100% instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. Is this possible ?

Solution 1:

You can add "preserveAspectRatio" and "viewBox" attributes to the <svg> tag to accomplish this.

Open the .svg file in an editor and find the <svg> tag. in that tag, add the following attributes:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Replace {width} and {height} with some defaults for the viewBox. I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work.

Save the SVG and it should now scale as expected.

I found this information here:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

Solution 2:

None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <img> tag and width together with an svg works fine.

<img width="400" src="image.svg">

Solution 3:

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img/logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

This setup worked for me.

How do I scale a stubborn SVG embedded with the <object> tag?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts