<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 文件本身并在内部调整其大小。有人知道如何做到这一点吗？
这很简单。
将width和height属性转换为viewBox。 出于您的目的，ViewBox 将采用以下形式：
"0 0 <width> <height>"
所以在这种情况下，它将变成：
"0 0 977 1000"
然后将宽度和高度设置为所需大小图标的适当值。 您通常希望它们保持与原始值相同的比率。
<svg width="97.7" height="100" viewBox="0 0 977 1000" 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 图形进行任何其他更改，您是否考虑过免费和开源的 Inkscape？
从它的 Debian 软件包描述：
支持大多数常见的矢量格式，包括PDF，Adobe Illustrator和AutoCAD文件，它对 SVG 网页图形标准。
安装
适用于Mac，Linux，Windows。
对于Windows，如果您喜欢便携式应用程序，可以尝试Inkscape Portable。
在 Linux 上，例如基于 Debian 的发行版，您可以：
$ sudo apt-get install inkscape
墨景
使用文本编辑器，将您发布的 SVG 代码保存到文件中，例如将其命名为 graphic.svg .
启动 Inkscape。
按 Ctrl+O 查看"打开"对话框
浏览并打开graphic.svg 。
观察：在您的情况下，您的图形类似于黑白放大镜。
在图形上单击一次以将其选中。
观察：Inkscape 车把表示您已选择图形。
按住Ctrl-shift-m 键打开"变换"面板。
"缩放"选项卡。
它目前说：
Width: 976.500
Height: 999.936
将单位下拉列表更改为px 。
复选标记Scale proportionally。
假设您希望宽度约为 200 像素宽：
宽度： 200
按 Tab 键退出宽度条目。
观察：由于Scale proportionally，height:已自动重新计算并更新为新值205.824
应用。
关闭"变换"面板。
观察：它看起来比画布小。
按住Ctrl-Shift-d 键打开"文档属性"。
观察：它目前说：
Width: 977
Height: 1000.00
单击"Resize page to content
单击"Resize page to drawing or selection
观察：它现在说：
Width: 201.00
Height: 205.82
关闭"文档属性"对话框。
按Ctrl-shift-s 获取另存为对话框。
名称：图形2.png
右下角下拉菜单，
将Inkscape SVG (*.svg)更改为Plain SVG (*.svg)。
救
因此，现在您已经成功地创建了原始图形的较小版本。
原因
-
Plain SVG (*.svg)略小于默认Inkscape SVG (*.svg)。 1.2K 与 2.1K 对比
进一步调整
如果你看一下尺寸：
- 图形.svg 472B
- 图形2.svg 1.2K
如果最小化文件大小对您很重要，或者出于某种原因您希望消除 Inkscape 提供的所有其他元标记，您可以随时使用文本编辑器来组装最终的较小文件，例如将其命名为 graphic3.svg 。
对于其开头的 SVG 标记，请借用原始代码，但将宽度和高度适当地更改为较新的值。我们之前在 Inkscape 的文档属性中看到画布的大小被调整为：
Width: 201.00
Height: 205.82
因此，请将其调整为 SVG 属性：
<svg height="206" width="201" xmlns="http://www.w3.org/2000/svg">
从graphic2.png，复制<path... >代码。
以关闭 SVG 标记结束文件：
</svg>
保存，现在您的新graphic3.png与原始graphic.svg一样小
javascript：
function scaleSvgString(str, multiplicator){
var result_string="";
var current_number="";
for (var i = 0, len = str.length; i < len; i++) {
//means "is a number or a decimal separator"
if( (str[i].charCodeAt()>=48 && str[i].charCodeAt()<=57) || str[i].charCodeAt()==46){
current_number+=""+str[i];
}else{
if(current_number.length>0){
var scaled_number=Number(current_number)*multiplicator;
result_string+=""+scaled_number;
//reset number buffer
current_number="";
}
result_string+=""+str[i];
}
}
return result_string;
}
称呼它为喜欢
scaleSvgString("<svg> ... </svg>", 0.5);
我还没有实际测试过它，我希望它能工作，哈哈
你可以用 JavaScript 动态地做到这一点。
下面代码段中的工作代码要求您向 svg path(或rect或g或其他任何内容(添加一个id，以填充您想要的区域。您还必须将所需的宽度和高度更改为您想要的任何内容。
优点：
- 您可以对所需的任何形状和大小重复使用此例程。
- 所有计算都是为您完成的。
- 您不必担心纵横比，即相对尺寸。 对于从您
- 喜欢的绘图程序或从在线下载的任何图像，您不必对 svg 代码执行任何操作(除了可能向目标形状添加
id，如上所述(。 - 可以在代码的不同位置重复使用同一图像，而无需进行内部修改，每个位置可能具有不同的所需大小。
- 您可以制作一个 svg 文件(例如
allMyIconsInOnePlace.svg(，包含要在不同位置使用的多个图像，然后通过更改代码中的shpId，仅使用代码将一个特定形状定位到一个特定用途。
缺点：
- 您存储的 svg 代码会有点误导，因为保存的版本不会包含有关其缩放的真实信息，这些信息只会在运行时确定。
- 每次要以这种方式使用映像时，都必须包含并运行此代码。
- 查看修改后的 svg 元素的实际结构的唯一方法是在运行时，例如，在浏览器调试器中使用"inspect 元素"。
var shpId = "myShape";
var desiredWdth = 100;
var desiredHght = 60;
var shp = document.getElementById(shpId);
var svg = shp.ownerSVGElement;
var shpBBox = shp.getBBox();
var viewBoxStr =
shpBBox.x + " " +
shpBBox.y + " " +
shpBBox.width + " " +
shpBBox.height;
svg.setAttribute("viewBox", viewBoxStr);
svg.width .baseVal.value = desiredWdth;
svg.height.baseVal.value = desiredHght;<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
<path id="myShape" 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>