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"

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

＆＃13;

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

＆＃13;

Answer 2

如果您只是想要一个免费的解决方案来可靠地扩展或对SVG图形进行任何其他更改，您是否考虑过免费和开源Inkscape？

来自Debian软件包说明：

支持大多数常见的矢量格式，包括PDF，Adobe Illustrator和AutoCAD文件，它具有无与伦比的支持 SVG web图形标准。

安装

适用于Mac，Linux，Windows。

对于Windows，如果您喜欢便携式应用，可以尝试Inkscape Portable。

在Linux上，例如基于Debian的发行版，您可以：

$ sudo apt-get install inkscape

Inkscape中

使用文本编辑器将您发布的SVG代码保存到文件中，并将其命名为graphic.svg。

启动Inkscape。

Ctrl + O 查看“打开”对话框

浏览并打开graphic.svg。

观察：在您的情况下，您的图形类似于黑白放大镜。

在图形上单击一次以选择它。

观察：Inkscape车把表示您已选择了图形。

Ctrl - shift - m 打开变换面板。

比例标签。

目前说：

Width: 976.500

Height: 999.936

将单位下拉菜单更改为px。

勾选标记Scale proportionally。

假设您希望宽度约为200像素宽：

宽度：200

按标签退出宽度条目。

观察：由于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 以获取“另存为”对话框。

name：graphic2.png

右下方的下拉菜单，

将Inkscape SVG (*.svg)更改为Plain SVG (*.svg)。

保存

所以现在你已经成功地创建了原始图形的较小版本。

原因

Plain SVG (*.svg)略小于默认Inkscape SVG (*.svg)。 1.2K vs 2.1K

进一步调整

如果你看一下尺寸：

graphic.svg 472b
graphic2.svg 1.2K

如果最小化文件大小对您来说很重要，或者由于某种原因您希望消除Inkscape提供的所有其他元标记，您始终可以使用文本编辑器来组合最终的较小文件，例如将其命名为{{ 1}}。

对于其开放的SVG标记，请从原始代码借用，但将宽度和高度适当地更改为较新的值。我们之前在Inkscape的文档属性中看到，画布被重新调整为：

graphic3.svg

因此，请将其调整为SVG属性：

Width: 201.00

Height: 205.82

从<svg height="206" width="201" xmlns="http://www.w3.org/2000/svg">开始，复制graphic2.png ... <path代码。

使用关闭的SVG标记结束文件：

保存，现在您的新</svg>与原始graphic3.png一样小

Answer 3

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

我实际上没有测试过它，我希望它可以工作lol

Answer 4

您可以使用JavaScript动态执行此操作。

以下代码段中的工作代码要求您向要填充的svg id（或path或rect或其他）添加g你想要的地方。您还必须将所需的宽度和高度更改为您想要的任何值。

<强>赞成：

您可以将此例程重复用于任何形状和任何尺寸。
所有计算都是为您完成的。
您不必担心宽高比，即相对尺寸。
您不必对svg代码执行任何操作（除了可能为目标形状添加id之外，如上所述），用于从您喜欢的绘图程序中提取或从在线下载的任何图像。
您可以在代码中的不同位置重复使用相同的图像而不进行内部修改，每个图像可能具有不同的所需大小。
您可能会创建一个包含您想要在不同位置使用的多个图像的单个svg文件（例如allMyIconsInOnePlace.svg），然后只需使用代码通过更改{{1}来针对特定用途定位一个特定形状在代码中。

<强>缺点：

您存储的svg代码会有点误导，因为保存的版本不会包含有关其缩放的真实信息，只会在运行时确定。
每次要以这种方式使用图像时，都必须包含并运行此代码。
查看修改过的svg元素的实际结构的唯一方法是在运行时，例如，在浏览器调试器中使用“inspect element”。

shpId

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文件的大小

4 个答案:

安装

Inkscape中

原因

进一步调整