编辑 SVG 文件的大小

Question

<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

此 svg 将生成一个搜索图标。它是在 1000 高和 977 宽的基础上编写的。如果我改变宽度和高度，它会裁剪它并且不会调整它的大小。我想在网上看到一种数学方法或任何可以帮助我编辑代码并调整其大小的工具。我在 HTML 页面上使用它，我知道我可以只使用 css 来调整它的大小。但是，我不想这样做。我想修复 svg 文件本身并在内部调整它的大小。任何人都知道如何做到这一点？

Answer 1

这很简单。

将width和height属性转换为viewBox。出于您的目的，viewBox 将采用以下形式：

"0 0 <width> <height>"

所以在这种情况下它会变成：

"0 0 977 1000"

然后将宽度和高度设置为您想要的大小图标的适当值。您通常希望它们与原始值保持相同的比率。

"0 0 <width> <height>"