A Lazy Developer's Guide to Converting SVG image to PNG

Engineering Jul 21, 2020

There are several proper "legit" ways of converting an SVG (vector) image to PNG (raster) image:

  1. Use Adobe Illustrator or Adobe Photoshop to rasterize SVG,
  2. Use a Node.js package like convert-svg-to-png,
  3. Use online convertors like savetopng.com or ezgif.com/svg-to-png (more at https://www.google.com/search?q=SVG+image+to+PNG+online), or
  4. Use a Chrome extension

But, obviously, these are not fun.

Apple's Safari browser has a neat "Capture Screenshot" feature under Safari Dev Tools.

If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar”.

Open the SVG image you want to convert in Safari by either drag-dropping or using "Open with" context menu. Now, right-click and click on "Inspect Element".

On the inspector panel, select the <svg> element and right-click on it to open the context menu. Click on "Capture Screenshot" and select the location to save the generated image.

That's it.

(More Lazy Developer's Guides)

Brajesh Sachan

Brajesh, drives direction of Deskera’s future technology and shapes Deskera as the technology leader. With his expertise and over 15 years of experience, he has significantly contributed to Deskera

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.