在 html 中调整 SVG 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3120739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing SVG in html?
提问by Jenny
So, I have an SVG file in HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.
所以，我有一个 HTML 格式的 SVG 文件，我听说过关于这种格式的一件事是，当你放大它时，它不会全部像素化。
I know with a jpeg or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.
我知道用 jpeg 或任何我可以将它存储为 50 x 50 图标的东西，然后通过手动设置 image_src 中的高度和宽度，将其实际显示为（相当像素化）100 x 100 缩略图（或 10 x 10）标签。
However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.
但是，SVG 文件似乎与 object/embed 标签一起使用，并且更改 THOSE 的高度或宽度只会导致为图片分配更多空间。
IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?
有什么方法可以指定您希望显示的 SVG 图像比实际存储在文件系统中的尺寸更小或更大吗？
回答by Amadan
Open your .svgfile with a text editor (it's just XML), and look for something like this at the top:
.svg使用文本编辑器（它只是 XML）打开您的文件，并在顶部查找类似的内容：
<svg ... width="50px" height="50px"...
Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.
擦除宽高属性；默认值是 100%，所以它应该延伸到容器允许的任何地方。
回答by Lorenz Lo Sauer
Try these:
试试这些：
Set the missing viewboxand 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 widthto the desired percentvalues. Good luck.
Set a fixed aspect ratio with
preserveAspectRatio="X200Y200 meet(e.g. 200px), but it's not necessary
设置缺失的viewbox并在svg标签中填写设置的高度和高度属性的高度和宽度值
然后通过将高度和宽度设置为所需的百分比值来缩放图片。祝你好运。
设置一个固定的纵横比
preserveAspectRatio="X200Y200 meet（例如 200px），但这不是必需的
e.g.
例如
<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">
回答by Tanveer
you can resize it by displaying svg in image tag and size image tag i.e.
您可以通过在图像标签和大小图像标签中显示 svg 来调整它的大小，即
<img width="200px" src="lion.svg"></img>
回答by user2929588
Changing the width of the container also fixes it rather than changing the width and height of source file.
更改容器的宽度也会修复它，而不是更改源文件的宽度和高度。
.SvgImage img{ width:80%; }
This fixes my issue of re sizing svg . you can give any % based on your requirement.
这解决了我调整 svg 大小的问题。您可以根据您的要求提供任何百分比。
回答by duhaime
I have found it best to add viewBoxand preserveAspectRatioattributes to my SVGs. The viewbox should describe the full width and height of the SVG in the form 0 0 w h:
我发现最好为我的 SVG添加viewBox和preserveAspectRatio属性。视图框应以以下形式描述 SVG 的完整宽度和高度0 0 w h：
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>
回答by Chris P
Use the following code:
使用以下代码：
<g transform="scale(0.1)">
...
</g>
回答by Lawrence Whiteside
Here is an example of getting the bounds using svg.getBox():
https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44
这是使用以下方法获取边界的示例svg.getBox()：https:
//gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44
At the end you get numbers that you can plug into the svg to set the viewbox properly. Then use any css on the parent div and you're done.
最后，您将获得可以插入 svg 以正确设置视图框的数字。然后在父 div 上使用任何 css 就完成了。
// get all SVG objects in the DOM
var svgs = document.getElementsByTagName("svg");
var svg = svgs[0],
box = svg.getBBox(), // <- get the visual boundary required to view all children
viewBox = [box.x, box.y, box.width, box.height].join(" ");
// set viewable area based on value above
svg.setAttribute("viewBox", viewBox);
回答by Josh Habdas
I have an SVG file in HTML [....] IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?
我有一个 HTML 格式的 SVG 文件 [....] 有什么方法可以指定您希望显示的 SVG 图像比实际存储在文件系统中的尺寸更小或更大？
SVG graphics, like other creative works, are protected under copyright law in most countries. Depending on jurisdiction, license of the work or whether or not you are the copyright holder you may not be able to modify the SVG without violating copyright law, believe it or not.
SVG 图形与其他创意作品一样，在大多数国家/地区都受版权法保护。根据管辖权、作品的许可或您是否是版权所有者，您可能无法在不违反版权法的情况下修改 SVG ，信不信由你。
But laws are tricky topics and sometimes you just want to get shit done. Therefore you may adjust the scaleof the graphic without modifying the work itself using the imgtag with widthattribute within your HTML.
但法律是棘手的话题，有时你只想把事情做好。因此，您可以使用HTML 中的带有属性的标签来调整图形的比例，而无需修改作品本身。imgwidth
Using an external HTTP request to specify the size:
使用外部 HTTP 请求指定大小：
<img width="96" src="/path/to/image.svg">
Specifying size in markup using a Data URI:
使用数据 URI在标记中指定大小：
<img width="96" src="data:image/svg+xml,...">
SVGs can be Optimized for Data URIsto create SVG Faviconimages suitable for any size:
可以针对数据 URI 优化SVG以创建适合任何尺寸的SVG Favicon图像：
<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">
