如何在不调整大小的情况下使SVG图像的视口方形化？

Question

我有一个SVG图像（让我们说一个简单的图标），它具有以下内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-74 304H54a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v404a6 6 0 0 1-6 6zM128 208c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80zm208 133.477V360c0 13.255-10.745 24-24 24H104c-13.255 0-24-10.745-24-24v-18.523c0-22.026 14.99-41.225 36.358-46.567l35.657-8.914c29.101 20.932 74.509 26.945 111.97 0l35.657 8.914C321.01 300.252 336 319.452 336 341.477z"/></svg>

视图框不是正方形（448！= 512），我需要使短边等于长边，以使其内容不会失去其原始比例（=>不要拉伸），并且它们需要在画布的正中央。

示例：将左侧的图像转换为右侧的图像。 （边界不是实际路径，而是视图框）

编程语言和工具无关紧要。 我只需要一些可以应用于许多文件的东西（在bash脚本中）。 因此，欢迎使用带有第三方库解决方案的imagemagick，inkscape，python。

Answer 1

使用您的测试svg（使用Internet Explorer作为查看器）显示，更改未定义width,height SVG的viewBox不会改变其外观（仅缩放和平移就不会拉伸），因此无需使用矩阵就可以在viewBox单独完成。 这是您的示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
 <path d="M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-74 304H54a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v404a6 6 0 0 1-6 6zM128 208c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80zm208 133.477V360c0 13.255-10.745 24-24 24H104c-13.255 0-24-10.745-24-24v-18.523c0-22.026 14.99-41.225 36.358-46.567l35.657-8.914c29.101 20.932 74.509 26.945 111.97 0l35.657 8.914C321.01 300.252 336 319.452 336 341.477z"/>
</svg>

因此您想将448更改为512但我们仍要使图像居中，因此我们也需要调整x0位置（在相反方向上相差一半(512-448)/2 = 32 ）。 因此，将viewBox更改为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512">
 <path d="M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-74 304H54a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v404a6 6 0 0 1-6 6zM128 208c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80zm208 133.477V360c0 13.255-10.745 24-24 24H104c-13.255 0-24-10.745-24-24v-18.523c0-22.026 14.99-41.225 36.358-46.567l35.657-8.914c29.101 20.932 74.509 26.945 111.97 0l35.657 8.914C321.01 300.252 336 319.452 336 341.477z"/>
</svg>

因此，假设原始参数为： viewBox(x0,y0,xs0,ys0)则新参数将为viewBox(x1,y1,xs1,ys1)其中：

xs1= ys1 = max(xs0,ys0);
x1 = x0 + (xs0 - xs1)/2;
y1 = y0 + (ys0 - ys1)/2;

由于SVG只是文本文件（ XML ），以防您在您的环境中无法对SVG::viewBox进行R / W访问，因此只需编写一个脚本即可在文本文件中搜索/解析/替换viewBox文本...我不编写代码在python中，但在C ++中只是几行代码（请注意，某些SVG是ASCII的，而有些是UNICODE的 ）。

Answer 2

如果使用ImageMagick 7，则可以执行以下操作：

magick -density X -colorspace sRGB file.svg -background white -gravity center -extent "%[fx:max(w,h)]x%[fx:max(w,h)]" result.png

如果使用ImageMagick 6，则需要首先计算最大尺寸，因此

maxsize=$(convert -density X -colorspace sRGB file.svg format "%[fx:max(w,h)]" info:)
convert -density X -colorspace sRGB file.svg -background white -gravity center -extent ${max_size}x${max_size} result.png

这不会放大任何边界框线，只会放大图像。