在HTML中调整SVG大小？

Question

我在HTML中有一个SVG文件，关于这种格式的一件事我听说过，就是当你放大它时，它不会变得像素化。

我知道用JPEG或其他格式，我可以将其存储为50x50的图标，然后通过手动设置image_src标签中的高度和宽度来实际显示为（相当像素化的）100x100缩略图（或10x10）。

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

有没有办法指定要显示比文件系统中实际存储的SVG图像更小或更大的尺寸？

- J.R.

Answer 1

用文本编辑器打开你的.svg文件（它只是XML），并查找顶部类似于以下内容：

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

删除宽度和高度属性；默认值为100％，因此应该可以拉伸到容器允许的任何大小。

- Amadan

---

是的，但你还需要添加一个'viewBox'属性（例如，在你的50x50像素示例中加入 viewBox="0 0 50 50"），否则内容可能无法正确缩放（将取决于容器尺寸）。Scour可以自动为您完成此操作，网址是http://www.codedread.com/scour/。 - Erik Dahlström

太好了！这很有帮助！原来我已经在文件中将所有东西都设置为100％了，但是视口是关键！谢谢你们两个！ - J.R.

如果对其他人来说不太明显，那么请注意，“viewBox”是区分大小写的。此外，如果你要裁剪图像，前两个坐标是左上角，后两个坐标是在缩放之前的宽度和高度。 - Big McLargeHuge

注意，以下两种格式都可以使用：<div style="width: 50px;height: 50px"><svg viewBox="0 0 1000 1000">...</svg></div>和<svg viewBox="0 0 1000 1000" style="width: 50px; height: 50px" >...</svg>。 - widged

为了补充 @ErikDahlström 和 widged 的答案，您可以访问 Developers Mozilla 官方网站，查看 viewBoxes 的完整文档。这 4 个值是 min-x、min-y、width 和 height，后两个可以接受负参数。 - Gabriel Sánchez

Answer 2

尝试以下方法：

1. 设置缺失的viewbox，并在svg标签中填写高度和宽度值的height和width属性。

2. 然后通过将height和width属性的值设置为所需百分比来简单地缩放图片。祝好运。

3. 使用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">

- Lorenz Lo Sauer

Answer 3

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

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

- Tanveer

---

对我来说，这是最好的答案，因为它不需要编辑SVG文件。 - undefined

Answer 4

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

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

- duhaime

---

老实说，这是最佳选择。效果非常好。 - Justin

为我而言，这样做并添加 width="100%" 和 height="100%" 完美地解决了问题。 - n8jadams

Answer 5

请使用以下代码：

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

- Chris P

---

这需要额外的考虑才能使其正常工作。图像的空间将被分配到页面上，但是图像只会出现在可用空间的左上角10％，其余部分为空白。这个解决方案只能在显示SVG图像的内容中实施更改后才能正常工作。 - Thundter

Answer 6

调整容器宽度可以修复问题，而无需更改源文件的宽度和高度。

.SvgImage img{ width:80%; }

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

这修复我的重新调整SVG大小的问题。您可以根据需要提供任何百分比。

- neuro_tarun

Answer 7

这里有一个使用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);

- Lawrence Whiteside

---

如果你能学会将这个封装成一个方法，那该多好啊。 - mjs

Answer 8

移除svg元素中的height和width属性。添加一个viewBox属性，例如viewBox 0 0 100 100，然后使用普通的CSS height或width来缩放svg元素。

注意：viewBox属性区分大小写。如果使用小写字母b，则无法工作。

.fifty{
height: 50px
}
.hundred{
height: 100px
}

<h3>50x50</h3>
<section>
<svg class="fifty" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg>
</section>
<h3>100x100</h3>
<section>
<svg class="hundred" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg>
</section>

- Ronnie Royston

Answer 9

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

像其他创意作品一样，SVG图形在大多数国家都受版权法保护。根据司法管辖区、作品许可证或您是否是版权持有人，您可能无法在不侵犯版权法的情况下修改SVG，信不信由你。

但是法律是棘手的话题，有时您只想完成工作。因此，您可以使用HTML中的img标签和width属性调整图形的比例，而无需修改作品本身，调整比例。

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

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

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

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

SVG可以针对数据URI进行优化，创建适用于任何尺寸的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">

- vhs