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

Question

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 ?

Answer 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