在HTML中调整SVG的大小？

156

因此，我有一个HTML格式的SVG文件，据我所知，关于格式的一件事是，当您放大该文件时，它并不会全部像素化。

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

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

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

html svg

— 珍妮
source

177

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

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

擦除宽度和高度属性；默认值为100％，因此它应该扩展到容器允许的大小。

— 阿玛丹
source

75

是的，没错，但是您还需要添加一个'viewBox'属性（例如，在50x50px的示例中为viewBox =“ 0 0 50 50”），否则内容可能无法正确缩放（取决于容器尺寸）。Scour会自动为您做到这一点，即codedread.com/scour。

— ErikDahlström10年

万岁！有帮助！事实证明，文件中已经包含100％的内容，但是视图框才是关键！谢谢你们俩！

— 珍妮2010年

26

如果对其他人不明显，则“ viewBox”区分大小写。此外，如果要裁剪图像，则前两个坐标是左上角，后两个坐标是缩放前的宽度和高度。

— 2013年

1

请注意，<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>将起作用。

— 2014年

48

试试这些：

设置缺少的视图框，并在svg标签中填写所设置的height和height属性的height和width值
然后只需将高度和宽度设置为所需的百分比值即可缩放图片。祝好运。
设置一个固定的宽高比preserveAspectRatio="X200Y200 meet（例如200像素），但这不是必需的

例如

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

— 洛伦兹·洛索尔
source

24

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

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

— 坦韦尔
source

1

我认为使用<img>的问题是您失去了<object>标记的故障转移功能（这可能与版本8及以下版本的IE用户有关）。

— 内森·克劳斯

10

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

.SvgImage img{ width:80%; }

这解决了我调整svg大小的问题。您可以根据需要提供任何％。

— 用户名
source

8

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

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

— 杜海姆
source

2

老实说，这是最好的选择。奇迹般有效。

— 贾斯汀

6

使用以下代码：

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

— 克里斯·P
source

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);

— 劳伦斯·怀特塞德
source

1

我在HTML [....]中有一个SVG文件，是否可以指定您要显示的SVG图像小于或大于实际存储在文件系统中的SVG图像？

但是法律是棘手的话题，有时您只是想把事情搞砸。因此，您可以调整图形的比例，而无需使用img带有width在HTML中属性。

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

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

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

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

可以针对数据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">

— 乔什·哈布达斯（Josh Habdas）
source