在创建时自动缩放SVG [英] Automatically Scaling SVG At Time of Creation

问题描述

目前我正在使用此命令生成SVG：

Currently I'm using this command to generate the SVG:

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

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

I'd like to double the size of the image. Using GS's -r and -g options just gives me the same image. I'm not sure these options are supported within GS with the SVG device.

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

I've tried using ImageMagick's convert to bypass ghostscript but when I go to see the image in a browser it displays the SVG as code.

原始图像是裁剪的PDF。我尝试直接缩放，但没有获得高质量的图像，可能是由于我在ImageMagick中没有标记的选项。

The original image is a cropped PDF. I tried scaling that directly but didn't get a quality image perhaps due to an option I failed to flag in ImageMagick.

推荐答案

我无法帮助你处理你的Ghostscript查询（它看起来像-r和-g只能在渲染为位图时应用），但我可以给你一个关于如何使用SVG输出的提示。

I can't help you with your Ghostscript query (it looks like -r and -g may only apply when rendering as a bitmap), but I can give you a hint about how to work with the SVG output.

选项1

您可以使用CSS扩展SVG。例如： style =transform：scale（4）;。但这可能不适用于所有浏览器。

You can scale the SVG with CSS. For example: style="transform: scale(4);". But that may not work in all browsers.

选项2

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

You can adjust the SVG header so that it displays larger when rendered. To do that, you need to add a viewBox attribute to your SVG. This step is complicated a little bit by the fact that the dimensions of your SVG are expressed in points ("pt"). Whereas the viewBox dimensions are expressed in CSS pixels. A point is 1/72 of an inch. Whereas a CSS pixel is 1/96 inch.

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

Anyway, the viewBox attribute describes the bounds of the SVG content and the format is "<minX> <minY> <width> <height>".

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

minX and minY are probably both 0 for your files. For width and height, we need to convert the specified width and height from the <svg> to the default coordinate space.

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

In your example, the width is "5pt". Converted to CSS pixels, this is be 5 * 96 / 72 = 6.6666.

高度为13pt，转换为（13 * 96/72）= 17.3333 。

The height is "13pt", which converts to (13 * 96 / 72) = 17.3333.

所以我们的viewBox变为0 0 6.6666 17.3333

So our viewBox becomes "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的大小与旧的宽度和高度相同。为了使它渲染得更大，你现在可以增加宽度和高度属性。

However this won't render bigger because the viewBox has the same size as the old width and height. To make it render bigger, you can now increase the width and height attributes.

例如，要使它大四倍，宽度和高度翻两番，如下所示：

For example, to make it four times bigger, quadruple the width and height, like so:

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

在这里演示

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

If you want it to fill the browser window, set the width and height to 100%. Or remove them, which is the same thing because they default to that.

这里的演示

希望这有帮助。

这篇关于在创建时自动缩放SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！