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 generates 20 PNG files. It okay if I have to do it 5 images at a time.

I have illustrator installed and cant figure out how to do this on it.

Thanks for all of your help!

Sisto

Word to the wise, make sure your svg has a viewBox attribute so it'll scale properly – Quass

Answer 1

I don't know about Illustrator, but this should be easy using the Inkscape command line options. For example, using Ruby:

$ ruby -e '[10,100,200].each { |x| `inkscape --export-png logo#{x}.png -w #{x} logo.svg` }'

Copal

Yes that would work, I found out there was no way of doing it with Illustrator which disappoints me so I had to do it manually. – Sisto

That freaks me out... Using cmd line ruby to call a cmd line program 3 times... Is there a name for that craziness? – Carbajal

Thank you for this, just what I needed. – Coworker

Instead of --export-png, --export-filename works for me. – Attalanta

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

Lasky

For people needing only to convert one file, here's an easier copy paste: inkscape --export-png icon.png -w 128 logo.svg – Suberin

For people on the command line in windows use this one for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done – Disrepair

@Disrepair love it, yours should be an answer in it's own right – Tantara

oh thank you, much appreciated :) but the credit for the idea belongs to @zany, no need to split I think – Disrepair

@Disrepair I agree this could be another answer for Windows users. Also could you tell me how to use this with full path to inkscape.exe? If I just replace inkscape with "C:\....\inkscape.exe" it won't work. Thanks! – Interpretive

Answer 3

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

Katharina

@salih This script is written to run within a Unix-like shell such as MINGW on Windows, or the Mac OSX shell, or the Linux shell. (It could be modified to run within the Windows DOS shell or PowerShell.) Save this text as a text file, say export.sh. Run the command chmod ug+x export.sh to mark the script as "executable." Then whenever you want to export your SVG image in multiple sizes, run the script via ./export.sh if it's in the current directory, or simply export.sh if it's on your PATH. – Katharina

github.com/richardaum/svg-to-android-drawable-png @Katharina thank you mate, all credit is yours. – Met

is it possible to make this do every svg in a folder? – Cribbing

@Cribbing yes. The technique depends on your shell, or use a cleaner language like Python. In bash, the core step is for f in *.svg; do echo "--export-png $f.png $f.svg"; done and redirect all those commands into a file like (for ...; echo quit) > commands, then feed it into inkscape like inkscape --shell < commands – Katharina

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.

Cung

Answer 5

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

Paradisiacal

Answer 6

Based on zany's answer but updated to handle Inkscape 1.1 which requires the -o option for output filename and --export-type as opposed to --export-png to declare your export type.

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

Deprave

Answer 7

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.

Unfetter

Answer 8

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"

Boling

Answer 9

On Ubuntu 20.04 with Inkscape 1.1.1 (eb90963e84, 2021-10-02) this generates 6 images with different resolutions (32x32, 64x64, etc) from icon.svg:

for x in 16 24 32 48 64 256 ; do inkscape --export-type="png" --export-filename=${x}x${x}.png -w ${x} -h ${x} icon.svg ; done

---

You can add or remove resolutions by adding elements (separated with spaces) right for x in <here> ;.
Remember this always will generate square images (same width and height).

Change icon.svg to your .svg file and to change the output filenames change --export-filename=<this> to the filename you want.
TIP: use ${x} to get the current resolution (32, 64, etc.).

Crunch