SVG to PNG Conversion: Resolution, Size, and Quality Guide

By FileConvertLab

SVG vector file converting to PNG at four resolutions — 72 DPI, 150 DPI, 300 DPI, and 600+ DPI — with a resolution formula and cheat sheet for print and web use cases
SVG source file (vector, infinitely scalable) converts to PNG at four resolutions. Resolution cheat sheet shows: web/UI at exact pixel size, office print at 150-200 DPI, professional print at 300 DPI, and large format at lower DPI. Formula: pixels = physical size in inches × DPI.

SVG and PNG are fundamentally different. SVG is vector — mathematical paths that scale to any size perfectly. PNG is raster — a fixed grid of pixels. Converting from one to the other means choosing a resolution, and that choice determines whether the PNG comes out sharp or blurry.

The key formula: pixels = physical size (inches) × DPI. A logo meant to be 4 inches wide on a printed page, exported at 300 DPI, needs to be 1200 pixels wide. Export it at 72 DPI instead and you get a 288-pixel file that looks fine on screen but blurry at 4 inches on paper. The resolution you pick depends on where the PNG will be used.

For a quick conversion at the right resolution, use the SVG to PNG converter — set your target width in pixels and the rest is automatic.

The Resolution Formula

Every SVG-to-PNG conversion decision boils down to one formula:

pixels = physical size (inches) × DPI

Work backwards from where the PNG will be used:

  1. Decide the physical size — how large will this image be on the page or screen? (4 inches wide? Full A4 page? 48 pixels on a screen?)
  2. Pick the DPI — 300 for professional print, 72-96 for screen, 150 for office print.
  3. Multiply: that is the pixel size you export at.

For screen use, skip DPI entirely. Decide the pixel dimensions directly — a website header is 1200×630 pixels. An icon is 48×48 pixels. Export at exactly those pixel dimensions.

Resolution by Use Case

Web and UI (any DPI, match display size)

Screens display pixels 1:1. A 48px PNG shows as 48 screen pixels wide no matter what DPI is set in the file. Export at the exact pixel dimensions the element will occupy on screen:

  • App icon: 48×48 px (single), 96×96 px (@2x retina)
  • Website logo: 200×60 px (typical), 400×120 px (@2x)
  • Hero banner: 1200×630 px (OG image standard)
  • Favicon: 32×32 px, 180×180 px (Apple touch icon) For retina/high-DPI screens, export at 2× or 3× the display size and let CSS scale it down. A 48px icon displayed at 24 CSS pixels looks sharp on every screen.

Office printing (150-200 DPI)

For internal documents, drafts, and office laser printers, 150-200 DPI is enough.

The text is readable and the image looks clean. At these resolutions you save file size and print quickly.

  • A4 page at 150 DPI: 1240×1754 px (~8 MB as 24-bit PNG)
  • A4 page at 200 DPI: 1654×2339 px (~14 MB)

Professional print (300 DPI, standard)

Print shops, professional services, and offset printing expect 300 DPI. This is the industry standard — go below it and they may reject the file or the print looks soft. 300 DPI is enough for the human eye at normal reading distance.

  • A4 page at 300 DPI: 2480×3508 px (~31 MB)
  • A3 page at 300 DPI: 3508×4961 px (~62 MB)
  • 4×6 photo print at 300 DPI: 1200×1800 px (~7.4 MB)

Large format (30-75 DPI)

Billboards, banners, and large signage are viewed from metres away. The eye cannot resolve 300 DPI at that distance, so the resolution can be far lower without visible quality loss. A 2 m × 3 m billboard at 30 DPI looks sharp from the intended viewing distance and is vastly smaller than the equivalent at 300 DPI.

Tools for Converting SVG to PNG

Online converter (quickest)

The SVG to PNG converter accepts SVG files and produces PNGs at your chosen dimensions. Set the width in pixels, the height scales proportionally. Handles transparent backgrounds, font rendering, and inline CSS.

Inkscape (free, cross-platform)

Inkscape is the standard free SVG editor. Open the SVG, then File → Export PNG.

Choose the width or height in pixels, set DPI, and export. Inkscape also has a batch export mode for converting multiple SVGs at once. It renders SVG features accurately because it uses the same engine for editing and export.

ImageMagick (command line, automation)

magick -density 300 input.svg -resize 2480x3508 output.png

ImageMagick is ideal for batch or automated SVG-to-PNG workflows. Set the desired density (DPI), then resize to exact pixel dimensions. For batch conversion of all SVGs in a folder, combine with a shell loop.

Common Mistakes

  • Exporting at 72 DPI for print. 72 DPI is the screen default embedded in most SVGs. For print, this produces far too few pixels. Always override to the correct DPI for your use case.
  • Exporting at 300 DPI and scaling down. Exports a huge file, then shrinks it in the browser with CSS — wasting bandwidth. Export at the display pixel size.
  • Converting SVG to JPG instead of PNG. JPG adds compression artifacts that are especially visible in the flat colours and sharp edges of SVG graphics. Use PNG for SVG conversion unless you specifically need the JPG format.
  • Not checking font rendering. If the SVG uses custom fonts not available in the converter, the text renders in a fallback font. Outline the text (convert to paths) before conversion if font fidelity is critical.
  • Ignoring transparent backgrounds. Some tools default to a white background. Confirm transparency is preserved if you need it.

Keep the SVG as Master

The most important habit when working with SVGs: keep the SVG as the master file.

The PNG is a one-time raster export at a specific resolution. If you later need a larger version (for a bigger print, a higher-DPI screen, a new use case), you re-export from the same SVG at the new resolution. No quality loss because the SVG source is still vector.

This is the opposite of starting with a low-res PNG and trying to enlarge it — which produces obvious pixelation. SVG as master = future-proof.

Related Conversions

For a comparison of PNG and JPG — when to use each — see the PNG vs JPG vs WebP guide . If you need to go the opposite direction (raster to vector), the SVG to PNG quick-start covers the basics.

Quick Summary

  • Formula: pixels = physical size × DPI. Decide physical size first, then multiply.
  • Web: export at exact pixel size. 48px icon → 48×48 PNG.
  • Office print: 150-200 DPI. A4 at 200 DPI = 1654×2339px.
  • Professional print: 300 DPI. Print shops expect 300 DPI.
  • Large format: 30-75 DPI. Billboards, banners — viewer is far away.
  • Keep SVG as master. Re-export at new resolutions when needed.
  • Use PNG for SVG output, not JPG. JPG artefacts ruin flat colours and sharp edges.

Frequently Asked Questions

What resolution should I use when converting SVG to PNG?

Depends on the use case: for web and UI, export at the exact pixel size you need (e.g., 48×48 for an icon, no DPI needed). For office prints, 150-200 DPI is enough — A4 at 200 DPI is 1654×2339 pixels. For professional print shops, 300 DPI is the standard — A4 at 300 DPI is 2480×3508 pixels. For large format (billboards, banners), 30-75 DPI is fine because the viewer stands far away. Always decide the physical size first, then multiply by DPI to get pixel dimensions.

Why does my SVG look blurry after converting to PNG?

Because you exported at too low a resolution. SVG has no fixed pixel size — it scales mathematically — so it looks sharp at any zoom level. When you convert to PNG, you lock in a specific pixel grid. If you export a logo meant for a 4-inch print at 72 DPI, you get a 288-pixel PNG that looks blurry when printed at 4 inches. The fix: export at 300 DPI (1200px wide for a 4-inch logo) and the PNG will look sharp at the target physical size.

What DPI should I use for printing?

300 DPI is the print industry standard — virtually every print shop expects images at 300 DPI. Inkjet printers can use 150-300 DPI; laser printers work at 200-600 DPI; professional offset printing requires 300 DPI. For an A4 page at 300 DPI, export your SVG at 2480×3508 pixels. For a 4×6-inch photo print, export at 1200×1800 pixels. The formula: width in inches × 300 = pixel width.

What DPI should I use for web and screen display?

For screens, DPI does not matter — what matters is the exact pixel dimensions. A website header might be 1200×630 pixels. A social media icon might be 48×48 pixels. Export your SVG at those exact dimensions, ignoring DPI. Screens display pixels 1:1 at a fixed resolution, so a 48px PNG will be 48 screen pixels wide regardless of its DPI metadata. Export a retina/@2x version at double the display size for sharpness on high-DPI screens.

Is there any quality loss converting SVG to PNG?

No, if you export at the right resolution. The PNG rendering engine converts the SVG's vector paths to pixels at the chosen resolution. At 300 DPI (for print) or the target pixel size (for web), the result is sharp and accurate. The only quality difference is that the PNG is now a fixed-resolution raster — you cannot zoom in arbitrarily as you can with SVG. Keep the SVG as the master file and re-export at different resolutions when you need different sizes.

How do I convert SVG to PNG without losing the transparent background?

Make sure the converter preserves transparency. Most tools default to transparent background for SVG-to-PNG conversion. Confirm the output format is PNG (which supports alpha channel), not JPG. If the converter asks for a background colour, choose transparent (or don't set one). Check the result by opening the PNG in an image viewer — the background should show as a checkerboard pattern.

Can I set a specific pixel size when converting SVG to PNG?

Yes. Most SVG-to-PNG tools let you set the output width and height in pixels. Enter the exact dimensions you need — e.g., 1200×630 for an Open Graph image. The tool scales the SVG to fit those dimensions and renders it at that pixel resolution. This gives you exact control over the output size. If only one dimension is provided, the other scales proportionally to preserve the SVG's aspect ratio.

SVG to PNG Conversion: Resolution, Size, and Quality (2026)