DEV Community

Cover image for How to Convert SVGs to PNGs
Daniel Feldroy for Feldroy

Posted on

How to Convert SVGs to PNGs

The interior artwork of Two Scoops of Django was hand-drawn, scanned, and embellished using Inkscape. The native format of Inkscape is SVG, and it also generates pdf_tex files for use within the custom LaTeX build we've used for years.

For the forthcoming Two Scoops of Django 3.x we're moving off LaTeX to one powered by Bookdown. While Bookdown uses LaTeX to render PDFs, it uses other engines to render other formats. To accommodate those engines, we need to convert the existing SVG images to PNG format. Here's what I figured out:

Step 1: Install librsvg

# On Mac
brew install librsvg

# On Windows using Chocolaty
choco install rsvg-convert
Enter fullscreen mode Exit fullscreen mode

If you want me to include your favorite package manager, supply the command in the comments and I'll add it!

Step 2: Convert Images

# from within the tsd3.x/images directory
rsvg-convert ../tsd1.11/images/themepark.svg -o themepark.png -b white
Enter fullscreen mode Exit fullscreen mode

About the Arguments:

-o is short for --output. If that's not included the rsvg-convert returns an error that says Multiple SVG files are only allowed for PDF and (E)PS output.

-b is short for --background. For the Two Scoops of Django SVGs, not including that means the background is a very dark gray.

Result

Here's our primary test file for exploring converting SVG to PNG. Original art by @audreyfeldroy.

Icecreamlandia, the Official Theme Park of Two Scoops of Django. Original artwork by @audreyfeldroy

Top comments (0)