A blurry PNG usually traces back to the export width, not the conversion itself. Converting SVG to PNG means rendering the vector at a pixel width you choose, which you can do in an online converter, an editor such as Inkscape or Figma, or a command line renderer such as rsvg-convert.

What happens underneath is rasterization. Resolution-independent paths get turned into a fixed-pixel bitmap with an alpha channel.

The W3C PNG specification stores resolution only as metadata in the pHYs chunk, so sharpness depends on pixel width, not on a 300 DPI label. A DPI setting changes the output only while the renderer is working, before the file is written.

When does an SVG need to become a PNG?

Only when the destination can’t render SVG or wants a fixed-size bitmap. Everywhere else, keep the vector file.

Email is where this comes up most. Gmail has never fully supported SVG, and Microsoft announced that Outlook on the web and the new Outlook for Windows would block inline SVG images from late 2025. Classic Outlook never rendered them at all.

WordPress is the other usual culprit. SVG is not on the default allowed list, so the Media Library rejects the upload with a “not allowed to upload this file type” error (older versions say “not permitted for security reasons”). It’s a long-running discussion, tracked in WordPress core Trac ticket #24251.

Upload forms that list only JPG or PNG force the same move. And if your SVG leans on filters or styling that render differently from browser to browser, rasterizing freezes it into one fixed look, which can be a reason all by itself.

On your own pages, SVG graphics stay sharp at any size, so converting a logo or icon only gives you extra files to maintain.

Conversion costs something too. Resolution freezes at the export size. Text turns into pixels and the file stops being editable, which is really the core difference between SVG and PNG.

Choosing a method for SVG to PNG conversion

Which method fits depends mostly on how many files you have and how much say you want over size, transparency and batching.

MethodBest forStrengthLimit
Online converterOne-off filesNo install, fastFile leaves your device
Desktop editorIcons, artboards, design handoffLive preview, per-asset scaleManual, one asset at a time
Command line toolRepeating jobs, build scriptsExact size flags, scriptableRenderer quirks, needs install
Code libraryApps and backendsRuns inside your own codeFont and density handling varies

I’d just count the files. A handful is still manual work, and a folder that keeps growing deserves a script.

The renderer matters more than the tool name. Inkscape, librsvg, resvg and a browser each use their own drawing engine, so the same SVG can differ in filters, fonts and edge cases.

How to convert SVG to PNG online or in the browser

Online, you upload the SVG, set the output width, choose a transparent or solid background and download the PNG. In your own page or app, the Canvas API does the same thing without a server.

Using an online converter

  1. Open a converter such as CloudConvert or ConvertAPI’s SVG to PNG tool.
  2. Upload the SVG file.
  3. Enter the output width or height in pixels.
  4. Choose a transparent or solid background.
  5. Convert, download the PNG and zoom in on edges and text to check them.

Browser-based converters render the SVG with the browser’s own engine. If the file declares no width and height, the browser picks a default size from the viewBox ratio, so type a width yourself.

Size fields have limits. ConvertAPI’s SVG to PNG endpoint accepts widths from 10 to 20000 pixels, per its API reference.

The file also goes to a third-party server, which is the downside. Keep client work and unreleased artwork out of online tools.

Using the Canvas API in the browser

You can turn an SVG into a PNG without a server, using a short JavaScript routine. The order goes like this.

  1. Set the SVG as the source of an Image object.
  2. Create a canvas at the exact target pixel width and height.
  3. Call drawImage on the 2D context.
  4. Call toBlob with the type image/png.

According to MDN, browsers are required to support image/png in toBlob, so the export step needs no fallback.

It breaks if you load the SVG from another origin without CORS approval. The canvas is then tainted and toBlob throws a security error (MDN). Serve the file from your own origin or add CORS headers.

Set the canvas width and height before drawing, since a default-sized canvas crops larger artwork.

Exporting an SVG as PNG in Inkscape, Illustrator, Figma, GIMP and Affinity Designer

Each of these editors exports PNG with a size control. The control sits in a different place in each one and uses a different unit. Inkscape and GIMP ask for pixels or DPI, Illustrator and Figma use scale factors, and Affinity ties its scale to document DPI.

If the artwork needs changes first, editing SVG files in Inkscape or Figma is easier than patching the markup by hand.

Inkscape

Inkscape gives you the most direct control of the five.

Open the Export dialog with Shift+Ctrl+E and pick an area, which can be Document, Page, Selection or Custom. Then enter a width in pixels or a DPI value and export.

Illustrator

Adobe’s documentation for Export for Screens (File, Export, Export for Screens) lists scale presets including 1x, 2x and 3x, plus PNG-8 and PNG-24 output.

Export As lets you set a resolution directly, while Export for Screens works from a scale. PNG-24 keeps full alpha and PNG-8 gives a smaller file.

Figma

Figma’s Help Center states that images exported at 2x carry a DPI of 144. Paste the SVG onto the canvas, open the Export section in the right sidebar, add a PNG setting and choose 1x, 2x or 3x with an optional suffix.

Several scales can be added to one layer and exported together. The guide to downloading images from Figma walks through the panel.

GIMP

GIMP rasterizes an SVG the moment you open it. The import dialog asks for width, height and resolution, and those values fix the pixel size.

Enlarging the layer afterward only stretches pixels. Close the file and reopen the SVG at the larger size instead, then use File, Export As with a .png extension.

Affinity Designer

Switch to the Export Persona, create a slice from the artboard or layer, set its format to PNG and add size scales.

One catch. Affinity’s help pages say slice export sizes (1x, 2x, 3x) are linked to the document DPI, so check the document’s DPI before trusting 2x.

How to convert SVG to PNG with command line tools and code

Whichever renderer you pick, keep it for the whole project, since the same SVG can draw slightly differently in each.

Command line renderers

  • Inkscape works with inkscape icon.svg --export-type=png --export-width=1024
  • For rsvg-convert (librsvg), use rsvg-convert --width=1024 --height=1024 --keep-aspect-ratio icon.svg > icon.png
  • resvg -w 1024 icon.svg icon.png does the job in resvg
  • ImageMagick needs magick -background none -density 1200 icon.svg -resize 1024x1024 icon.png (use convert on ImageMagick 6)

Inkscape’s manual sets the default export to 96 dpi, where one SVG user unit becomes one bitmap pixel, and –export-width overrides the DPI value.

The librsvg manual lists a 96 DPI default too, but older rsvg-convert man pages still in circulation say 90. The gap only matters for SVGs sized in inches, centimeters or points.

resvg also takes a zoom flag, so resvg -z 4 icon.svg icon.png renders at 4 times the natural size (resvg 0.48 manual).

ImageMagick hands SVG rendering to a delegate. Its format list shows both an internal MSVG coder and an RSVG-backed SVG coder, so output depends on the build.

Put -density before the input file. It re-renders the vector at higher resolution, while -resize alone only stretches the finished pixels.

Python and Node.js libraries

CairoSVG covers Python and sharp covers Node.js. Both suit a backend service that converts uploads on demand.

With CairoSVG the call is cairosvg.svg2png(url="icon.svg", write_to="icon.png", output_width=1024). Its documentation says it targets SVG 1.1 and does not support SVG fonts.

Sharp looks like sharp("icon.svg", { density: 450 }).resize(100).toFile("icon.png"). It renders vector input at a default density of 72, per its documentation. If that produces a 16 px icon, a 100 px PNG needs a density of 450 (72 x 100 / 16), because resize() alone stretches the raster.

Puppeteer loads the SVG in headless Chromium, and page.screenshot saves PNG by default. It’s the heaviest option, so I’d only reach for it when the SVG relies on browser CSS that other renderers drop.

Batch converting a folder

One shell loop converts every SVG in a folder.

for f in *.svg; do rsvg-convert --width=512 --height=512 --keep-aspect-ratio "$f" > "${f%.svg}.png"; done

In Python or Node.js, glob the folder and call svg2png or sharp once per file. Use the same renderer for the whole batch, since mixed renderers can leave an icon set with inconsistent edges and spacing.

What pixel size, scale and DPI should the PNG have?

Export at the size the image will display at, then add 2x and 3x versions for dense screens. Pixel width is what counts, because DPI inside a finished PNG is only a label.

When the SVG gives width and height in px, those are used directly as the pixel count. Values in inches, cm or pt get converted at the export DPI, so a 2 inch wide SVG at 300 DPI becomes 600 px wide. With no width and height at all, the viewBox sets the proportions and the tool picks a default size. A width you type into the tool wins over everything else.

After export, the DPI value shrinks to metadata. The PNG specification stores it in the pHYs chunk as pixels per unit, with the unit either unknown or the metre.

A few numbers worth keeping nearby:

  • CSS defines 1in as 96px (MDN, CSS values and units)
  • A 300 DPI label is stored as roughly 11811 pixels per metre, which is 300 divided by 0.0254 (PNG specification)
  • resvg defaults to 96 DPI and accepts a range of 10 to 4000 (resvg 0.48 manual)
  • CairoSVG’s svg2png defaults to a dpi of 96 (CairoSVG source)

Advice online splits on this point. Adobe Community answers tell designers to ignore resolution and set exact pixels for screen PNGs, while the Inkscape manual shows –export-dpi scaling the bitmap at export.

Both are right, just at different stages. DPI changes the pixel count while the renderer works, and only labels the file once it is written.

For print, work backward: pixels equal inches times DPI. A 4 inch print at 300 DPI needs 1200 pixels, and a pixel to inches converter handles the screen-side math.

For screens, a 2x file holds four times the pixels of the 1x file, so file size climbs fast.

Quality loss comes from too few pixels at export, not from the conversion itself.

Transparency and color in the exported PNG

PNG supports an alpha channel, so a transparent background survives export when the renderer leaves it empty. Several tools fill it in unless told otherwise.

  • rsvg-convert leaves the background empty by default, and --background-color=white fills it
  • Inkscape takes --export-background and --export-background-opacity, and without them the document’s page opacity decides
  • Puppeteer hides its default white background with omitBackground: true
  • The Canvas API stays transparent until you paint, so call fillRect before drawImage if you want a solid color

Keep transparency for logos that sit over varied backgrounds. Use a solid white or brand color when the destination places the file on a fixed page, like a slide or a PDF.

Color is simpler. PNG stores indexed, greyscale or truecolor pixels with an optional alpha channel, and the specification defines no CMYK type.

SVG colors are RGB-based, so the exported PNG is RGB too. A print shop that wants CMYK needs a separate conversion, and the difference between CMYK and RGB explains why colors shift when it happens.

PNG can also carry color space data, including a full ICC profile, per the PNG specification.

Why does the PNG come out blurry, or with wrong fonts and missing images?

Soft edges nearly always mean the PNG was exported smaller than it gets displayed. The other symptoms have their own usual causes.

SymptomUsual causeFix
Soft, blurry edgesPNG exported below its display sizeRe-export from the SVG at the target width, plus 2x
Fallback typefaceFont file missing on the converting machineInstall the font, or convert text to outlines
Linked images missingRenderer loads no external filesEmbed images as data: URLs
Filters or effects look differentRenderer supports only part of SVGTest a second renderer, or flatten the effect in an editor
Jagged edgescrispEdges shape rendering or a low anti-aliasing levelUse geometricPrecision, or raise the anti-aliasing level
Artwork cut offExport area is the page, not the drawingExport the drawing area, or correct the viewBox

Suspect fonts first. SVG text stays live text, so the PNG shows whatever the renderer substitutes, and resvg falls back to Times New Roman when no font-family is set (resvg 0.48 manual).

Converting text to outlines beats installing fonts when the file moves between machines. In Inkscape that is Path, then Object to Path, and the result carries no font dependency.

Linked images depend on the renderer. MDN says an SVG used as an image loads no external resources, though data: URLs still work, while resvg’s command line resolves relative paths from the input file’s directory by default.

Effects vary because renderers differ. The resvg README says it aims to render only the static SVG subset, so scripts and animation never run.

How to reduce the file size of the converted PNG

Export no larger than the display size needs, then run OptiPNG for a lossless pass or pngquant when the artwork uses flat colors. Pixel count drives file size more than any compressor does.

PNG-24 (truecolor) keeps the full color range with 8-bit alpha, so it’s safe for gradients, shadows and photographic fills. It also makes the largest files. PNG-8 (indexed) is the small one. It uses a palette of up to 256 colors with an optional alpha table (PNG specification), which works well for flat icons and diagrams and shows banding on long gradients.

Lossless recompression with OptiPNG

OptiPNG recompresses a PNG without losing any information, according to its manual. It tries several filters and compression strategies and keeps the smallest result.

optipng -o7 icon.png trades speed for the best compression, and the default level runs faster. Nothing is lost, so it is safe on every PNG you publish.

Lossy palette reduction with pngquant

According to pngquant.org, its own sample shrank from 75,628 bytes to 19,996 bytes (73% smaller) with full alpha transparency preserved.

Run pngquant --quality=65-80 icon.png and it writes a new file with an -fs8 or -or8 suffix. If the result falls below the minimum quality, pngquant saves nothing and exits with status 99, which matters in batch scripts.

It’s a good fit for flat icons, diagrams and UI sprites. Long gradients, soft shadows and brand colors that must match exactly are a poor fit.

For a further lossless pass afterward, the pngquant README points to oxipng, ImageOptim and zopflipng.

SVG to PNG Conversion FAQ

Can you convert SVG to PNG on a Mac or Windows PC without installing anything?

Yes. Any current browser can do it, through a browser-based converter or a Canvas API page of your own.

A screenshot of the open SVG also works, but it ignores your target pixel size and makes a transparent background harder to keep.

Are online converters safe for private files?

It depends on where the rendering happens. A converter that renders in your browser keeps the file on your device, while a server-side converter receives a copy.

Read the retention policy before uploading anything confidential.

Is it possible to turn a PNG back into an SVG?

Only by tracing. The tool follows pixel edges and builds vector paths that approximate the image, so the result is a redraw, not a restoration.

The process is covered in this guide to converting PNG to SVG.

How do you use an SVG in WordPress when uploads are blocked?

Upload the PNG instead, or install a sanitizing plugin such as Safe SVG. It cleans each file on upload and lets you restrict who can upload SVG.

Adding the MIME type with a code snippet alone scans nothing, so any scripts inside the file stay.

Which PNG sizes does a favicon or app icon need?

Google’s favicon documentation asks for a square (1:1) file of at least 8×8 pixels and recommends going larger than 48×48. It lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats. The app manifest examples on MDN list 192×192 and 512×512 PNGs.

Export each size straight from the SVG instead of shrinking one bitmap, and a PNG favicon stays sharp.

Does exporting to JPG or WebP work the same way?

The size and renderer steps carry over, but JPG has no alpha channel, so a transparent background turns solid.

Puppeteer’s screenshot type accepts png, jpeg and webp, and canvas toBlob takes image/jpeg and image/webp in many browsers (MDN).

Checking a PNG Export and Repeating It

A finished SVG to PNG conversion is correct when the pixel width matches the target, text and linked images match the source, and the background suits the destination. One pinned renderer and one saved command repeat the same result.

Read the pixel dimensions first, with ImageMagick’s identify command. A wrong width invalidates every later check. Then look at text and linked images at 100% zoom, and leave background and file size for last, since a heavy file only needs another recompression pass.

Store the command beside the SVG source so every export runs the same flags.

Pinning a renderer keeps output identical, but upgrades bring both fixes and visual shifts. Re-run the checks after any upgrade, because this guidance reflects documentation verified in October 2026.

Bogdan Sandu
Latest posts by Bogdan Sandu (see all)