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

Let see. I had to refresh my memory on SVG, I haven't used it much these years.

From what I found today, it seems that if you specify dimension of objects without units, they have a fixed size (in pixels, I think). Apparently, then, there is no way to resize them when you resize the SVG (it only change the viewport/canvas size).

Unless, as pointed out, you specify the size of the SVG in percentage OR specify a viewBox (eg. viewBox="0 0 600 500").

Now, if you have no way to change the exported SVG, you are out of luck, I fear. What library do you use?

Answer 2

You can reach into the embedded svg using JavaScript:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Since your svg already has a viewBox, Firefox should scale the 576 pixel width in the viewBox to the 400 pixel width in your document. Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). Other browsers might benefit from different svg tweaks.

Answer 3

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