Automatically Scaling SVG At Time of Creation

Question

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

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

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.

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.

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.

Answer 1

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.

Option 1

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

Option 2

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.

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

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.

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

The height is "13pt", which converts to (13 * 96 / 72) = 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>

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>

Demo here

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.

Demo here

Hope this helps.