DEV Community

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

Posted on

7 3

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay