Convert SVG file to multiple different size PNG files

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!

---

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

---

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` }'

---

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

---

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.

---

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

---

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

---

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.

---

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"

---

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