Convert SVG file to multiple different size PNG files

Question

I have a logo image in SVG format and I am wondering if theres a way to generate multiple different sized png files.

Eg, I set 20 different width and height and it gener

Answer 1

If you haven't already, install imagemagick. On OSX, that requires rsvg support specifically:

brew install imagemagick --with-librsvg

You also need inkscape, otherwise you may find that your images come out all black (except for transparent areas).

brew install homebrew/gui/inkscape

Then, you should be able to convert as follows:

convert -density 1536 -background none -resize 100x100 input.svg output-100.png

The 1536 is a workaround for something I'm not able to find good answers to. In my experiments, omitting the -density argument creates images that are terribly small. Converting an image to -size 100x100 at -density 1024 gives me an output image of 96x96, so what I'm doing instead is overshooting on the density and resizing down to the target size.

TL;DR use a density that is 1500 times larger than your target size, and go from there.

There are many ways to bulk-run that command. Here is one in the shell:

for s in 10 100 200 ; do convert -density 1536 -background none -resize ${s}x${s} input.svg output-${s}.png ; done

Answer 2

The accepted answer is fine. There is an official help on options available. Also basic Shell commands will do nicely here:

for x in 10 100 200 ; do inkscape --export-png logo${x}.png -w ${x} logo.svg ; done

On the command line in windows use this line from @avalancha in the comments

for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done

Answer 3

I created a tool to do exactly that. You can define which output sizes you want, and their folder structure. So it's as easy as just running it on your folder with svg files, and then png files are added to your project in correct folders.

https://github.com/Inrego/SvgToPng

I hope it's helpful.

Answer 4

Take a look at inkmake. I actually made that tool just for batch exporting SVG files to PNG etc in different sizes. It was design because I wanted to save in Inkscape and then just run inkmake in a terminal and it will export all depending PNG files.

Answer 5

Here's how to make it much faster (3x for me for just 5 exports on an SSD) by launching Inkscape just once, and how to export the images to different directories (as Android uses):

#!/bin/sh
# Converts the Inkscape icon file ic_launcher_web.svg to the launcher web & app png files.

PROJECT="My Project Name"
INPUT="source-assets/ic_launcher_web.svg"
MAIN="${PROJECT}/src/main/"
RES="${MAIN}res/"
DRAWABLE="${RES}/drawable"

inkscape --shell <<COMMANDS
  --export-png "${MAIN}ic_launcher-web.png"         -w 512 "${INPUT}"
  --export-png "${DRAWABLE}-mdpi/ic_launcher.png"   -w  48 "${INPUT}"
  --export-png "${DRAWABLE}-hdpi/ic_launcher.png"   -w  72 "${INPUT}"
  --export-png "${DRAWABLE}-xhdpi/ic_launcher.png"  -w  96 "${INPUT}"
  --export-png "${DRAWABLE}-xxhdpi/ic_launcher.png" -w 144 "${INPUT}"
quit
COMMANDS

This is a bash shell script. On Windows you can run it in MINGW32 (e.g. GitHub's Git Shell) or convert it to a Windows DOS shell script. (For a DOS script, you'll have to change the "here document" COMMANDS into something DOS can handle. See heredoc for Windows batch? for techniques such as echoing multiple lines of text to a temp file.)

Answer 6

I used the below command to create the icons for Angular PWA.

First "cd" into the inkscape installation folder before running the below command in windows command prompt.

for %x in (72 96 128 144 152 192 384 512) ; do inkscape --export-filename=C:\temp\icons\icon-%xx%x.png -w %x -h %x "{filePath}\{fileName}.svg"