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 ?
9 answers
solution1
159 2010-08-14 19:41:21
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
solution2
33 ACCPTED 2011-11-15 13:49:33
当我在2009年回复时，这里给出的答案都没有给我带来帮助。因为我现在再次遇到同样的问题，我注意到使用<img>标签和宽度以及svg一起工作正常。
<img width="400" src="image.svg">
solution3
9 2009-08-08 04:43:31
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.
solution4
9 2012-10-18 22:39:49
<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.
solution5
7 2014-07-29 15:59:07
I encountered a problem where iOS on an iPad would not correctly resize SVG images in a <object> tag.
The CSS style would increase or decrease size of the <object> container, but the image inside of it would not be modified (on iPad, iOS 7).
The SVG images were exported from Adobe Illustrator, and the solution turned out to be replacing the width and height in this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
with:
width="100%" height="100%"
I needed to use the <object> tag because the <img> tag does not currently support embedding bitmapped images in SVG's.
solution6
5 2011-09-16 19:30:06
Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag
Then scale the picture simply by setting the height and width to the desired percent values. Good luck.
You can set a fixed aspect ratio with preserveAspectRatio="x200Y200 meet, but it's not necessary
eg
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
solution7
3 2012-04-11 16:04:56
Just use CSS to make the browser resize the SVG! Like so: <object style="width:30%"> See http://www.vlado-do.de/svg_test/ for more details. I just also tried it locally with an SVG that has its width and height given in "pt". It works well in Firefox.
solution8
1 2014-05-04 13:48:24
Here is a PHP solution using QueryPath based on Jim Keller's answer.
Once QueryPath is loaded just pass your svg script to the function.
function scaleableSVG($svg){
$qp = qp($svg, 'svg');
$width = $qp->attr('width');
$height = $qp->attr('height');
$qp->removeAttr('width')->removeAttr('height');
$qp->attr('preserveAspectRatio', "xMinYMin meet");
$qp->attr('viewBox', "0 0 $width $height");
return $qp->html();
}
solution9
1 2009-03-14 10:07:38
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.