SVG is a vector format — it stores shapes and paths as mathematical instructions. PNG is a raster format — it stores pixels. Converting SVG to PNG means rendering the vector at a specific pixel size. You need PNG when a platform doesn't support SVG, when you need a fixed-resolution image for print or social media, or when you need compatibility with older software. Here are four free methods.
Before You Convert: Choose the Right Resolution
SVG is resolution-independent — you can render it at any size without quality loss. Before converting, decide what pixel dimensions you need:
- Web icons: 32×32, 64×64, or 128×128 px — small PNGs for favicons and UI icons
- Social media profile images: 400×400 or 800×800 px minimum
- Print: use 300 DPI as a baseline — a 3-inch print needs 900×900 px for a square logo
- Retina / HiDPI displays: export at 2× or 3× the CSS pixel size (e.g., 200×200 px PNG for a 100×100 CSS element)
The PNG will be exactly as sharp as the size you export at — so choose the largest size you'll need and scale down from there.
Method 1: Browser (Fastest, No Install)
Any modern browser can render an SVG and let you screenshot or save it as PNG. This is the quickest method for simple SVGs:
- Open the SVG file in Chrome, Firefox, or Safari (drag it into the browser)
- Right-click the image and choose Save image as — some browsers offer direct PNG export
- For precise sizes: open browser DevTools (F12), find the
<svg>element, and setwidthandheightattributes to your target pixels before screenshotting
Limitation: browser screenshots are limited to screen resolution. For high-resolution PNG (e.g., 4000×4000 px), use Inkscape or ImageMagick instead.
Method 2: Inkscape (Free, Best Quality)
Inkscape is the best free tool for SVG-to-PNG conversion with full control over output resolution. It's free and open-source for Windows, Mac, and Linux.
- Download and install Inkscape from inkscape.org
- Open your SVG file in Inkscape
- Go to File → Export PNG Image (or press Shift+Ctrl+Eon Windows/Linux, Shift+Cmd+E on Mac)
- In the Export PNG dialog:
- Document tab: exports the entire SVG canvas at the document size
- Drawing tab: crops to the actual drawing content (removes empty whitespace)
- Selection tab: exports only the selected element
- Set Width and Height in pixels, or setDPI (96 DPI = screen, 300 DPI = print quality)
- Click Export As, choose a filename and location, then click Export
Inkscape preserves transparency — if your SVG has a transparent background, the PNG will also have a transparent background.
Method 3: Command Line with ImageMagick (Batch Conversion)
If you need to convert multiple SVGs or want to automate the process, ImageMagick (free, open-source) works from the terminal:
- Install ImageMagick from imagemagick.org (or via Homebrew on Mac:
brew install imagemagick) - Convert a single file at 300 DPI:
convert -density 300 input.svg output.png - Convert at a specific pixel size:
convert -size 1000x1000 input.svg output.png - Batch convert all SVGs in a folder:
for f in *.svg; do convert -density 300 "$f" "${f%.svg}.png"; done
ImageMagick is the best option for automation, CI/CD pipelines, or converting large numbers of SVG files at once.
Method 4: Online SVG to PNG Converters
For quick one-off conversions without installing software:
- Convertio (convertio.co): upload SVG, set output size, download PNG
- CloudConvert: supports custom width/height and DPI settings
- SVGtoPNG.com: simple drag-and-drop with resolution options
Online tools work well for simple logos and icons. For SVGs with custom fonts or complex effects, check the output quality — some online converters don't handle all SVG features correctly.
Transparency: Keeping or Removing the Background
SVGs often have transparent backgrounds. Here's how each method handles it:
- Inkscape: preserves transparency by default — the PNG will have a transparent background
- ImageMagick: preserves transparency. To add a white background: add
-background white -flattento the command - Browsers: usually preserve transparency in saved images
- Online tools: most preserve transparency — check the output before using
If you need the PNG with a white background (for platforms that don't support transparency), use image conversion to add a background after exporting.
SVG to PNG: What to Expect
- Quality: the PNG will be perfectly sharp at the export size — but if you later scale the PNG up past that size, it will blur
- File size: a 1000×1000 px PNG of a simple logo is typically 10–100 KB. Complex SVGs with many colors produce larger PNGs
- Text: text in SVGs renders correctly if the font is embedded or converted to outlines. If not, use Inkscape with the font installed
- Gradients and effects: SVG gradients, shadows, and filters render well in Inkscape and ImageMagick. Online tools vary
After converting, use image compression to reduce the PNG file size without visible quality loss — useful for web use.