Convert SVG to PNG — vector to pixels, DPI, and the file-size scaling law

The short version

1. Decide the final display size first. An app icon at 1024×1024, a web logo at 200×80, a print asset at 2400×1200. PNG is pixel-based; you're committing at export time.
2. Double it for retina. If the icon displays at 200×200, export at 400×400 minimum for 2× displays. Export at 600×600 for 3× if mobile.
3. For print, multiply by DPI/72. A 4" × 4" 300-DPI print asset needs 1200×1200 pixels (4 × 300).
4. Transparent unless you know otherwise. PNG supports alpha; use it. Opt into solid white/custom colour only when you need a flattened file (favicons sometimes, email sigs).
5. Batch with a naming convention. icon@1x.png, icon@2x.png, icon@3x.png for apps; drop the whole folder into batch mode.

That's the full recipe for 90% of SVG-to-PNG exports. The rest of this post is the tough cases — Figma/Sketch gotchas, viewBox-vs-width disagreements, gigantic exports, font embedding.

Why SVG and PNG are both still around

They solve opposite problems. SVG (Scalable Vector Graphics) is an XML description of shapes — paths, fills, strokes, text, transforms. The file stays the same whether you display it at 16×16 or 16000×16000; the browser or renderer rasterises it to pixels at display time. PNG (Portable Network Graphics) is a pixel grid — fixed dimensions, every pixel stored. Great for photos, screenshots, and anywhere the consumer can't (or won't) run an SVG renderer.

The filesize tradeoff is where they diverge most dramatically. An SVG icon weighs 1-3 KB regardless of whether you display it as a thumbnail or a billboard. The equivalent PNG at 32×32 is about 1 KB too, but at 512×512 it's 40 KB, and at 2048×2048 it's 300 KB or more — PNG's filesize scales with the square of the dimension.

Which means: where the consumer can display SVG (modern browsers, iOS/Android native apps starting around 2020, most modern tools), SVG is basically free at any display size. Where PNG is the only option (Windows icons pre-Win10, many e-commerce image pipelines, Slack custom emoji, anywhere img is a literal raster expectation), you pay the pixel tax and have to pick a resolution.

The viewBox vs width/height problem

Every SVG has up to three ways of telling you its dimensions — and they disagree about half the time. When an SVG-to-PNG converter guesses wrong, the export comes out stretched, cropped, or wrong size.

• viewBox — a 4-number spec "min-x min-y width height" defining the internal coordinate system. viewBox="0 0 24 24" says "this icon draws in a 24×24 coordinate space." The most reliable source of "what shape is this?".
• width / height attributes — optional. width="200" height="200" says "when displayed without CSS, render at 200×200 pixels." Often present, often wrong (stale from an old export), often missing entirely on icons.
• CSS dimensions — style="width:32px" or external CSS. Only relevant in a browser context; most converters ignore CSS.

Our converter's logic, in order:

1. If you specified an explicit output size, we use that directly and honour the viewBox aspect ratio.
2. Otherwise, if the SVG has a viewBox, we use viewBox dimensions as the base and scale by your multiplier (1×, 2×, 3× for retina).
3. Otherwise, if the SVG has width/height attributes, we use those.
4. Otherwise we default to 1024×1024 and warn — the SVG didn't self-describe.

Icon libraries (Heroicons, Lucide, Phosphor, Material Symbols) usually ship with a viewBox="0 0 24 24" and no explicit width/height — so an unqualified export would come out at 24×24 pixels, far too small. Always specify output size for icon SVGs.

DPI vs pixel size — the print decision

For print work, DPI (dots per inch) is the unit that matters, not pixels. The math is simple: pixels = inches × DPI. A 4" × 6" photo at 300 DPI needs 1200×1800 pixels.

Standard DPI targets:

• 72 DPI — screen default. Historical quirk; actual screen densities are higher now. Still the assumed baseline for web assets when dimensions aren't specified.
• 96 DPI — Windows screen default. The unit most vector tools assume when you enter physical dimensions.
• 150 DPI — draft print. Large-format posters viewed from 2m+ away.
• 300 DPI — standard photo print. The number every print shop asks for.
• 600 DPI — high-quality print, business cards, fine-detail logos. Overkill for most photographic content.

Our converter accepts input in pixels or physical dimensions + DPI. Enter "2 inches at 300 DPI" and we export at 600×600. Saves the mental math for print work.

Transparency handling

SVG has full alpha support (per-path opacity, gradient alpha, CSS opacity). PNG has full alpha support. In principle this is trivial; in practice a few gotchas catch people.

• Transparent SVG → transparent PNG (default). Background is fully transparent; alpha preserved.
• SVG with drop shadow — the shadow extends beyond the viewBox. If you export at exactly viewBox dimensions, the shadow gets clipped. Our converter offers "pad by shadow bounds" toggle (default on) to auto-expand the canvas.
• Flatten-to-solid output — some destinations (email signatures, older Outlook, Word documents, some social platforms) treat PNG alpha as black. Export with a matching solid background to avoid the "why is the icon on a black square" bug.
• Partial transparency in gradients — older PNG renderers (some print kiosks, cheap email clients) handle 8-bit alpha but struggle with 1-bit (transparent-or-not-transparent). Test in the target renderer if in doubt.

Figma and Sketch export pain points

Design tools export SVG with a lot of implicit assumptions the consumer doesn't know about. Three common failures:

Embedded raster content

Figma happily lets you embed a bitmap inside an SVG. The export contains a base64-encoded PNG inside the XML. Converting that back to PNG at 4× produces a blurry image — you're resampling a raster inside a vector container. Check for <image xlink:href="data:image/png;base64,..."/> in the SVG source; if present, the asset isn't really a vector, and you're bounded by the embedded raster's resolution.

Fonts

Figma/Sketch SVGs usually reference fonts by name (font-family: "Inter"). Our converter uses headless Chromium to render, so it has a standard web-font stack available and substitutes when the named font isn't present. Good-enough for common typefaces; fails for custom or licensed fonts. Best practice: in Figma, select text → right-click → "Outline Stroke" before export, so text becomes paths instead of font references. Our converter warns if an SVG has text without outlining.

Clipped content outside viewBox

Sketch sometimes exports SVGs where the effective graphic area is larger than the viewBox (a shadow overflow, an outside-bounds effect). On screen the browser renders the overflow by default; when rasterising to PNG at exact viewBox dimensions, the overflow gets clipped. Open the SVG in a browser first to verify the visual; if content is cut off in the PNG export, expand the viewBox in the SVG or use our "fit to content bounds" option.

Batch conversion for icon sets

Shipping an app or web product means exporting the same icon at multiple sizes: 1×, 2×, 3× for iOS, a favicon set (16, 32, 48, 192, 512), Android adaptive icon sizes, Slack emoji, OG cards. Doing them one-at-a-time in Figma is an afternoon. Doing them with a batch converter is a minute.

1. Drop the folder of SVGs into our batch mode.
2. Pick a size preset — "iOS icon set" exports 3× per input; "Web favicons" exports 16/32/48/192/512; "Single size" exports just your target. Or list custom sizes.
3. Pick transparent or solid. Solid is more common for favicons; transparent for UI icon sets.
4. Export ZIP. Filenames get a size suffix (icon@2x.png or icon-192.png) automatically.

For design systems with hundreds of icons, CLI tools like svgexport or rsvg-convert scripted against a build pipeline are the long-term answer. Our batch tool is for the "I need all five sizes of twenty icons in the next ten minutes" case.

Anti-aliasing and rendering quality

All SVG-to-PNG conversion involves rasterisation — turning vector instructions into pixels. Quality depends on the renderer's anti-aliasing strategy, especially at small sizes.

• Our converter uses headless Chromium for rendering — the same engine that ships your SVG to browsers. Visually identical output to a browser screenshot.
• Inkscape / rsvg-convert use librsvg / cairo — similar quality, slightly different glyph hinting.
• ImageMagick uses its own SVG renderer — known to misrender complex SVGs with gradients and filters; not recommended for production exports.
• Sketch / Figma export — their own renderers, typically good quality, but you pay the "open the app, export each file" cost.

At small sizes (16×16, 32×32), micro-hinting matters enormously — a 1-pixel stroke will either fall on a pixel boundary (crisp) or straddle two (fuzzy). Our converter supports pixel-snapping at small sizes; toggle in advanced settings.

When to stay in SVG instead

The main reason people convert SVG to PNG is "it has to be a PNG because X." Half the time X is outdated. Places SVG works directly in 2026 but "conventional wisdom" says to convert:

• Web img tags — SVG has worked in <img src="logo.svg"> since IE9 / 2011. No need to convert.
• Email — SVG in email has partial support. Gmail webmail renders SVG; most iOS mail does; Outlook desktop doesn't reliably. For email, PNG is still the safe pick.
• iOS / Android native apps — SwiftUI's Image(systemName:) and SF Symbols eliminate PNG for icons on iOS 13+. Android has VectorDrawable. PNG export is a 2015 workflow; check if your toolchain has moved on.
• Social media avatars and posts — most platforms require PNG/JPG input. Convert here.
• Print — some print shops accept SVG directly; many don't. PDF is actually a better print target than PNG for vector content.
• Slack emoji, Discord custom emoji — require PNG. Convert.

How our converter compares

SVG-to-PNG is an old problem, so there are many options. The differentiators are rendering quality, batch support, explicit size/DPI input, font handling, and whether files upload.

Honest summary: if you're already designing in Figma/Sketch, use their native export for one-offs. For batches of existing SVGs, our converter (no upload, icon-set presets) or Inkscape CLI if you're on desktop already. Skip ImageMagick for anything with gradients or filters.

Works well / doesn't work

Works well

• Icon sets exported at 1×/2×/3× retina, or 16/32/48/192/512 favicon sets
• Logos and illustrations with clean vector content
• SVGs with transparency preserved into PNG alpha
• Batches up to ~500 SVGs per session
• Physical-dimension inputs for print work (inches + DPI)

Doesn't work (well) yet

• SVGs with unoutlined custom fonts (need to outline in Figma first — we warn)
• Embedded raster content bounded by the raster's own resolution (not our problem to solve)
• SVG filters using obscure primitives (feTurbulence chained with feBlend) — most common primitives render correctly
• Very large output sizes (over 16384×16384 hits browser memory limits)

Tips for the best result

• Outline text in Figma/Sketch before export. Avoids font substitution entirely.
• Export retina multipliers (2×, 3×), not just 1×. Running behind on device pixel density is a visible quality bug.
• Pick transparent PNG unless you specifically need solid. Alpha-channel PNG is broadly supported in 2026.
• For print, think in inches + DPI, not pixels. Our converter does the math for you.
• Don't export absurdly large "just in case." 4K when 1K would work costs 10× the bytes for visually identical display.
• Keep the SVG as your master. PNG is lossy in the sense that resolution is a one-way decision; you can always re-export a bigger PNG from the SVG.
• If the output will be a favicon, also generate ICO. Older browsers still ask for favicon.ico at the root.

Common questions

What's the best size to export an SVG to PNG?

Whatever the maximum display size will be, times the retina multiplier of the device showing it. Web hero display at 800px wide? Export at 1600px (2×) or 2400px (3×). App icon displayed at 180×180? Export at 360×360 or 540×540. Never export smaller than the display; always export at least 2× for retina. Then compress with our image compressor — though for PNG we run DEFLATE+palette optimisation, not JPEG.

Why is my PNG blurry at 2×?

Either (a) you exported at 1× and let the browser upscale, which doubles every pixel, or (b) the SVG contained an embedded raster bitmap bounded by its original resolution, or (c) a 1-pixel stroke is landing between two output pixels and anti-aliasing is smearing it. Export at 2× target dimensions and turn on pixel-snapping if needed.

Can I convert PNG back to SVG?

Technically yes, practically no — that's vectorisation ("tracing") and it produces an approximation of the original vectors, not a recovery. For logos and line art, auto-tracers do a fair job. For photographs, never. Our PNG to SVG tool uses potrace for line-art and solid-colour content; read our format guide for when raster-to-vector actually works.

Does SVG have transparency?

Yes — fill-opacity, stroke-opacity, and CSS opacity all work; plus individual paths can have alpha in their fills. Converting to PNG preserves all of this as alpha channel.

How big can an SVG be compared to a PNG at the same display size?

Tiny. An icon SVG is typically 1-3 KB regardless of display size. A 1024×1024 PNG of the same icon is 10-50 KB. A 4096×4096 PNG is 100-500 KB. SVG filesize is roughly constant with display size; PNG scales with the square of dimensions.

Why does my Figma-exported SVG look different in the converted PNG?

Three common causes: (1) Figma uses a custom font that our renderer substitutes; outline text before export; (2) the SVG has effects (shadows, blurs) that overflow the viewBox and get clipped; pad the canvas; (3) Figma's renderer differs slightly from browsers — our converter matches browser output, which may differ from your Figma preview by a pixel or two at small sizes.

Are my SVGs uploaded?

No. Conversion runs in your browser via headless-Chromium-equivalent rendering. Your SVG never leaves your machine. CloudConvert and Convertio both upload.

Ready?

Our SVG to PNG converter is shipping as part of our broader SVG tool set — browse the full toolbox at /tools. For related image-pipeline work in the meantime: our cropper, resizer, and compressor all run in-browser on the same principles. If you're going the other direction — PNG back to vector — our PNG to SVG auto-tracer is live. Related reading: resize guide for the same "pick output dimensions carefully" logic applied to raster-to-raster work, and our AVIF to JPG guide for the modern-format-to-compatibility-format story.