在创建时自动缩放 SVG

Question

目前我正在使用这个命令来生成 SVG：

gs -sDEVICE=svg -dNOCACHE -sOutputFile="photo.svg" -q -dbatch -dNOPAUSE "photo.pdf.out" -c quit

我想把图片的大小加倍。使用 GS 的 -r 和 -g 选项只会给我相同的图像。我不确定 GS 中的 SVG 设备是否支持这些选项。

我尝试使用 ImageMagick 的 convert 绕过 ghostscript，但是当我在浏览器中查看图像时，它会将 SVG 显示为代码。

原始图像是裁剪后的 PDF。我尝试直接缩放它，但没有获得高质量的图像，可能是因为我未能在 ImageMagick 中标记一个选项。

Answer 1

我无法为您的 Ghostscript 查询提供帮助（看起来 -r 和 -g 可能仅在呈现为位图时适用），但我可以为您提供有关如何使用 SVG 输出的提示。

选项 1

您可以使用 CSS 缩放 SVG。例如：style="transform: scale(4);"。但这可能不适用于所有浏览器。

选项 2

您可以调整 SVG 标头，使其在渲染时显示得更大。为此，您需要在 SVG 中添加 viewBox 属性。由于 SVG 的尺寸以点（“pt”）表示，这一步有点复杂。而 viewBox 尺寸以 CSS 像素表示。一个点是 1/72 英寸。而 CSS 像素是 1/96 英寸。

无论如何，viewBox 属性描述了 SVG 内容的边界，格式为"<minX> <minY> <width> <height>"。

minX 和 minY 对于您的文件来说可能都是 0。宽高需要将<svg>中的指定宽高转换为默认坐标空间。

在您的示例中，宽度为“5pt”。转换为 CSS 像素，这是 5 * 96 / 72 = 6.6666。

高度为“13pt”，转换为 (13 * 96 / 72) = 17.3333。

所以我们的 viewBox 变成了"0 0 6.6666 17.3333"

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'
     width='5pt' height='13pt' viewBox="0 0 6.6666 17.3333">
    <ellipse cx="2.5pt" cy="6.5pt" rx="2.5pt" ry="6.5pt" fill="green" />
</svg>

但是这不会渲染得更大，因为 viewBox 的大小与旧的宽度和高度相同。为了使其渲染得更大，您现在可以增加宽度和高度属性。

例如，要使其大四倍，则将宽度和高度增加四倍，如下所示：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'
     width='20pt' height='52pt' viewBox="0 0 6.6666 17.3333">
    <ellipse cx="2.5pt" cy="6.5pt" rx="2.5pt" ry="6.5pt" fill="green" />
</svg>

Demo here

如果您希望它填满浏览器窗口，请将宽度和高度设置为100%。或者删除它们，这是一样的，因为它们默认是这样的。

Demo here

希望这会有所帮助。