Menu
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
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">
<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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With