在html中调整SVG的大小？

因此，我有一个HTML格式的SVG文件，我听说这种格式的一个特点是，当你放大它时，它并没有得到所有的像素化

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

但是，SVG文件似乎与对象/嵌入标记一起使用，更改这些标记的高度或宽度只会为图片分配更多空间

---

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

用文本编辑器打开

.SVG

文件（它只是XML），并在顶部查找类似的内容：

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

试试这些：

设置缺少的视图框，并在svg标记中填写设置的高度和高度属性的高度和宽度值

然后，只需将高度和宽度设置为所需的百分比，即可缩放图片。祝你好运

使用
preserveSpectratio=“X200Y200 meet
（例如200px）设置固定纵横比，但这不是必需的

e、 g

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

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

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

.SvgImage img{ width:80%; }


这解决了我重新调整svg大小的问题。您可以根据自己的要求给出任何百分比。
下面是一个使用
svg.getBox（）获取边界的示例。
：

最后，您可以将数字插入svg，以正确设置viewbox。然后在父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);

//获取DOM中的所有SVG对象
var svgs=document.getElementsByTagName（“svg”）；
var svg=svgs[0]，
box=svg.getBBox（），//
我有一个HTML格式的SVG文件[…]有没有办法指定您希望SVG图像显示得比文件系统中实际存储的图像小或大

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

但是法律是棘手的话题，有时你只是想把事情搞定。因此，你可以在HTML中使用
img
标记和
width
属性来修改图形本身，而不必修改工作

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

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



使用以下命令指定标记中的大小：



SVG可以创建适合任何大小的图像：

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

我发现最好向我的SVG添加
viewBox
和
preserveAspectRatio
属性。viewBox应该以
0 0 w h
的形式描述SVG的全宽和全高：

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

使用以下代码：

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


...
是的，没错，但您还需要添加“viewBox”属性（例如，在您的50x50px示例中，viewBox=“0 50”），否则内容可能无法正确缩放（取决于容器尺寸）.screah将自动为您执行此操作，.Hooray！这很有帮助！事实证明，我已经在文件中有了100%的内容，但视图框是关键！谢谢大家！如果其他人看不到，则“视图框”区分大小写。此外，如果剪切图像，前两个坐标是左上角，后两个坐标是coordinates是缩放前的宽度和高度。请注意…和…都会起作用。我认为使用dinates会导致标签的故障切换功能丢失（这可能与版本8及以下的IE用户有关）。老实说，这是最好的选择。这很有魅力。这样做以及添加
width=“100%“
和
height=“100%”
非常适合我。
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

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