36

我正在尝试将 SVG 转换为 PNG(或任何光栅格式)并同时调整大小。

我以为我会使用 ImageMagick 来完成这项任务,但它似乎在调整大小之前转换为光栅。

这会导致图像质量不佳。

  • 有没有办法让 ImageMagick 在转换为光栅之前调整 SVG 的大小?

  • 或者是否有其他工具可以在调整 SVG 大小后以编程方式将其转换为栅格?

  • 或者,我可以使用其他一些工具吗?

目前我正在通过命令行使用 ImageMagick:

convert file.svg -resize 100x100 file.png

源图像“大小”是未知的,目标大小直到运行时才知道。

4

6 回答 6

47

这就是我这样做的方式,它似乎工作。

convert -background none -density 1000 -resize 1000x compass.svg compass.png

这是每个部分的作用。

  • 用于-background none确保 SVG 的任何透明部分保持透明且不会被白色填充。
  • 由于 ImageMagick 仅适用于光栅图像,因此您需要使用-density 1000并指定要调整 SVG 大小的宽度。这样,当您实际调用 resize 命令时,加载的 SVG 的栅格表示已经具有 1000 的宽度,否则您最终会从 SVG 图像的原始大小向上或向下调整栅格的大小。
  • 现在使用-resize 1000x给你的SVG一个新的宽度,高度将自动计算以保持纵横比。

其中一个陷阱是,我真的不知道如何根据高度调整大小并计算宽度,因为-density它应用于宽度,而不是高度。因此,您必须事先知道 SVG 的实际比例并相应地使用宽度。

于 2016-02-18T19:07:24.853 回答
41

SVG定义为矢量,而不是位图——这是 IM 喜欢处理的。当 IM 读入一个向量时,它不知道大小,所以当你这样做时:

convert compass.svg -resize 1000x1000 compassB.jpg

它创建一个默认大小的位图画布,在其上“绘制”矢量,然后调整其大小并将其保存为JPEG. 结果,如果您的预期尺寸大于 IM “猜测”的画布质量差 - 由于将图像光栅化到太小的画布上,它无法创建不再拥有的信息。

在此处输入图像描述

解决方案是预先告诉 IM需要将矢量绘制到大画布上,然后再进行光栅化:

convert -size 1000x1000 compass.svg compassA.jpg

在此处输入图像描述

于 2015-01-13T09:45:10.247 回答
12

我为此制作了svgexport

svgexport file.svg file.png 100:100
于 2015-01-13T05:36:21.003 回答
5

所以事实证明inkscape有一个命令行界面。

不幸的是,inkscape 的-w-h参数不保留纵横比。然而,它确实提供了一种查询当前宽度和高度的方法——但一次只能查询一个。

所以解决方案是运行inkscape不少于3次。

inkscape -f svgfile.svg -W
<read stdin into some variable>
inkscape -f svgfile.svg -H
<read stdin into some variable>
<calculate aspect ratio and apply logic to retain aspect for new size>
inkscape -f svgfile.svg -w <newwidth> -h <newheight> -e file.png

在我的实例中,我必须通过 ImageMagick 运行生成的文件来执行其他操作。

从 C# 做这一切至少可以说是很麻烦的,所以这个问题对于更好的解决方案仍然是开放的。

于 2013-08-13T14:37:24.513 回答
2

使用 image magick 7,您可以在一行中执行以下操作:

magick in.svg -density "%[fx:((1080/w)*72)]" -delete 0 -background none in.svg -scale 1080x out.png

这将自动确定正确的密度,使其以正确的分辨率缩放。将 2 '1080' 值交换为您喜欢 png 的宽度。

于 2021-04-01T08:31:02.580 回答
0

奇怪的是 ImageMagick 会以一种尺寸渲染然后重新缩放位图。除非 SVG 在其中定义了特定的大小。检查您正在使用的 SVG 文件的widthheight属性。尝试将宽度和高度更改为100%,看看是否有所不同。

<svg width="100%" height="100%" ...etc...>

(假设您可以控制正在使用的 SVG 文件)。

于 2013-08-13T13:55:35.283 回答