在 html 中调整 SVG 的大小？答案

【问题标题】：Resizing SVG in html?在 html 中调整 SVG 的大小？
【发布时间】：2011-03-08 10:29:37
【问题描述】：

所以，我有一个 HTML 格式的 SVG 文件，我听说过的关于该格式的一件事是，当您放大它时，它不会全部像素化。

我知道使用 jpeg 或任何我可以将其存储为 50 x 50 图标，然后通过手动设置高度和宽度将其实际显示为（相当像素化的）100 x 100 缩略图（或 10 x 10）在 image_src 标签中。

然而，SVG 文件似乎与对象/嵌入标签一起使用，更改 THOSE 的高度或宽度只会导致为图片分配更多空间。

是否有任何方法可以指定您希望显示的 SVG 图像小于或大于文件系统中实际存储的图像？

【问题讨论】：

标签： html svg

【解决方案1】：

使用以下代码：

<g transform="scale(0.1)">
...
</g>

【讨论】：

【解决方案2】：

我发现最好将viewBox 和preserveAspectRatio 属性添加到我的SVG。视图框应该以0 0 w h 的形式描述 SVG 的完整宽度和高度：

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

【讨论】：

老实说，这是最好的选择。像魅力一样工作。
这样做以及添加 width="100%" 和 height="100%" 对我来说非常有效。

【解决方案3】：

我有一个 HTML 格式的 SVG 文件 [....] 是否有任何方法可以指定您希望显示的 SVG 图像小于或大于文件系统中实际存储的大小？

但法律是个棘手的话题，有时你只想把事情搞定。因此，您可以在 HTML 中使用带有width 属性的img 标签和width 属性来修改图片的adjust the scale。

使用外部HTTP请求指定大小：

<img width="96" src="/path/to/image.svg">

使用Data URI：在标记中指定大小：

<img width="96" src="data:image/svg+xml,...">

SVG 可以是Optimized for Data URIs 以创建适合任何尺寸的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">

【讨论】：

【解决方案4】：

以下是使用svg.getBox() 获取边界的示例： https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

最后，您会得到可以插入 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);

【讨论】：

【解决方案5】：

更改容器的宽度也可以修复它，而不是更改源文件的宽度和高度。

.SvgImage img{ width:80%; }

这解决了我调整 svg 大小的问题。您可以根据您的要求给出任何百分比。

【讨论】：

【解决方案6】：

您可以通过在图像标签和大小图像标签中显示 svg 来调整它的大小，即

<img width="200px" src="lion.svg"></img>

【讨论】：

我认为使用的问题是您失去了
没人想再用IE了

【解决方案7】：

试试这些：

设置缺少的viewbox并在svg标签中填写设置的height和height属性的height和width值
然后通过将高度和宽度设置为所需的百分比值来缩放图片。祝你好运。
用preserveAspectRatio="X200Y200 meet设置一个固定的纵横比（例如200px），但这不是必须的

例如

 <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">

【讨论】：

【解决方案8】：

使用文本编辑器（只是 XML）打开您的 .svg 文件，然后在顶部查找类似这样的内容：

<svg ... width="50px" height="50px"...

擦除宽度和高度属性；默认值为 100%，因此它应该拉伸到容器允许的任何值。

【讨论】：

是的，没错，但您还需要添加一个“viewBox”属性（例如，在您的 50x50px 示例中，viewBox="0 0 50 50"），否则内容可能无法正确缩放（取决于容器尺寸）。 Scur 会自动为您执行此操作，codedread.com/scour。
万岁！这有帮助！事实证明，我已经在文件中有 100% 的内容，但视图框是关键！谢谢你们！
如果其他人不明白，'viewBox' 区分大小写。此外，如果您正在裁剪图像，前两个坐标是左上角，后两个坐标是 缩放之前的宽度和高度。
请注意
和会起作用。
要补充来自@ErikDahlström 和widged 的答案，您可以访问Developers Mozilla 的官方网站并查看viewBoxes 的完整文档。 4个值分别是min-x、min-y、width和height，后2个可以接受负参数。