Convert SVG to PNG online (free)

Why convert SVG to PNG?

SVG stays sharp at any size and is ideal for product UI. Many destinations still demand a bitmap: email clients that strip or block SVG, Word/PowerPoint inserts, CMS media libraries that only accept PNG/JPEG, and social uploaders that reject vector files. Rasterizing once gives you a portable asset without leaving the browser.

PNG beats JPEG for icons and logos because it keeps an alpha channel — soft edges and hollow marks sit cleanly on light or dark backgrounds. That is why “SVG to PNG” remains a high-intent search even in a vector-first world.

Converting does not mean PNG should replace SVG in the app. Use PNG for handoff; keep the SVG (or a React component) as the source of truth when color and scale still matter in code. Preview, share, React, and PNG share one Source panel in the same editor.

Worked example: 24×24 icon → 48×48 PNG

A common request from design or marketing: “send the mark as PNG for the deck / newsletter.” The SVG is a 24×24 icon. SVGEditor’s exporter draws it at 2×, so the download is 48×48 — sharper on retina screens when shown at 24 CSS pixels.

Source SVG (size comes from width / height):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
  <path
    d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
    stroke="#38BDF8"
    stroke-width="1.5"
    stroke-linejoin="round"
  />
</svg>

Paste into SVGEditor, keep PNG open, then Download PNG. The sizing contract inside the tool is intentionally simple:

// How SVGEditor sizes the canvas (simplified from the real exporter)
const scale = 2;
pngWidth  = svgWidth  * scale;  // 24 → 48
pngHeight = svgHeight * scale;  // 24 → 48
// drawImage stretches the vector into that pixel grid; alpha is kept

Display the file at the original CSS size so the extra pixels work for you:

<!-- 48×48 file, shown at 24 CSS px → sharp on 2× screens -->
<img
  src="/icons/layers.png"
  width="24"
  height="24"
  alt=""
  decoding="async"
/>

/* or */
.icon-layers {
  width: 24px;
  height: 24px;
  background: url("/icons/layers.png") center / contain no-repeat;
}

Need a larger file for print or a hero thumbnail? Raise width / height on the SVG first (for example 200×200 → 400×400 PNG), then download again. The 2× factor still applies on top of those attributes.

How browser SVG → PNG rasterization works

Understanding the pipeline explains most “broken export” tickets. In-browser converters (including SVGEditor) follow the canvas path:

1. Parse / serialize the SVG and ensure a proper xmlns.
2. Read width / height (fall back to viewBox if needed).
3. Load the SVG into an Image via a blob URL (image/svg+xml).
4. Draw onto a canvas at the target pixel size (SVGEditor uses a fixed 2× scale).
5. Call canvas.toDataURL("image/png") (or toBlob) to download.

// Sketch — SVGEditor already does this in the PNG tab
const scale = 2;
canvas.width = Math.round(width * scale);
canvas.height = Math.round(height * scale);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
link.href = canvas.toDataURL("image/png");
link.download = "svgeditor-export.png";

Why a fixed 2× instead of window.devicePixelRatio? Export must be deterministic: the same SVG should yield the same PNG on a laptop and a phone. Device DPR would make downloads differ by machine — bad for design handoff. You opt into more pixels by enlarging the SVG attributes. That choice is intentional in SVGEditor: marketing gets one reproducible file; engineering can still keep the vector for UI.

Percentage sizes and missing units: if the root SVG only has width="100%" (or no size at all), the rasterizer falls back to viewBox width/height, then 512×512. Explicit CSS-pixel attributes avoid “why is my PNG huge/tiny?” threads.

External images inside the SVG, missing namespaces, cross-origin fonts, or exotic filters are the usual reasons drawImage fails — fix the markup in Source, then retry.

How to convert SVG to PNG online

Use SVGEditor’s free SVG to PNG converter when you want a transparent download without installing Inkscape, Illustrator, or a CLI. No account, no upload to a server — typically a few minutes from paste to file.

1. Paste or upload SVG with size set

   Open the converter. Paste markup into Source or use Upload for a .svg file. Keep viewBox and set explicit width / height so the pixel math is predictable before the 2× step.

2. Preview the PNG raster

   The PNG tab is already selected on the tool page. Confirm strokes, fills, and edges look right. Checkerboard means transparent areas in the UI — it is not written into the PNG pixels.

3. Download the 2× PNG

   Click Download PNG. SVGEditor rasterizes at 2× width/height for sharper retina display when you show the asset at the original CSS size.

4. Choose PNG vs SVG for the destination

   Ship the PNG to email, decks, or bitmap-only uploads. Keep the SVG — or export React JSX — when the same mark must scale and follow currentColor in the product UI.

Need an inline CSS background instead of a file? Switch to the Data URI tab in the same workspace (URL-encoded or Base64).

Retina sizing, alpha, and anti-aliasing

• 2× export: a 24×24 SVG becomes a 48×48 PNG. Display at 24 CSS px for crisp 2× screens. Upscale SVG attributes first if you need more absolute pixels.
• Alpha: empty / translucent SVG areas stay transparent in the download. Preview swatches on the live Preview tab do not bake into the PNG.
• Hard-coded fills: a black icon on a transparent PNG is fine in a light email; on a dark slide it vanishes. Recolor the SVG before export, or keep vector for themed UI.
• Hairline strokes: a 1px stroke at small sizes can look soft after rasterization. Slightly thicker strokes (or larger export size) read cleaner in decks and email.
• Premultiplied alpha: soft edges on transparent PNGs can pick up a faint fringe when composited on unexpected backgrounds. If you see a light halo in a dark deck, re-export after checking fills on both light and dark in the live preview first.
• Fallback size: if width/height are missing, SVGEditor falls back to viewBox (or 512). Prefer explicit dimensions so stakeholders get the size they asked for.

Optional HTML for responsive sharpness (1× CSS size, 2× file from SVGEditor):

<img
  src="/icons/layers.png"
  srcset="/icons/layers.png 2x"
  width="24"
  height="24"
  alt="Layers"
  decoding="async"
/>

SVG vs PNG vs Data URI

Same editor, three outputs. Pick by destination — not by habit.

Rule of thumb: SVG/React in the app, PNG for people and tools that only speak bitmap, Data URI for a quick CSS paste without adding an asset to the repo.

Browser converter vs Inkscape / ImageMagick

Desktop and CLI tools still matter for batch jobs. An online converter wins when the cost of setup is higher than the cost of one export.

Example CLI (for teams that already live in the terminal):

# ImageMagick — size is explicit; no automatic 2×
convert -background none icon.svg -resize 48x48 icon.png

# Inkscape
inkscape icon.svg --export-type=png --export-filename=icon.png -w 48 -h 48

SVGEditor’s opinionated 2× is for human handoff (“looks sharp at the icon’s CSS size”). CLI flags make you choose pixels every time — better for pipelines, slower for a single Slack ask.

Why in-browser conversion matters for brand assets

Unreleased logos and client marks should not land on a random upload service. SVGEditor rasterizes with the browser’s canvas — the SVG is not posted to a backend for conversion. That is the same privacy stance as the rest of the product (preview, share-via-hash, React export).

If you use Copy link, treat the URL like the file: the payload lives in the hash on the recipient’s machine. Do not paste confidential marks into public channels.

Common mistakes

• No width / height: export size becomes guesswork (viewBox fallback or 512). Set dimensions before you download.
• Dropping viewBox: scaling and aspect ratio get fragile when you change size for a larger PNG.
• Thinking the checkerboard is in the file: it is only the PNG tab chrome. The download keeps real alpha.
• Expecting theme colors in PNG: once rasterized, fills are fixed. Recolor the SVG first, or keep a React component for UI chrome.
• Using a tiny icon SVG for a large hero: 2× of 24px is still 48px. Enlarge width/height (keep viewBox) before export.
• External images / fonts in the SVG: the canvas path cannot fetch cross-origin assets reliably — inline or remove them, then retry.
• Showing a 2× PNG at full pixel size: a 48×48 file displayed at 48 CSS px looks soft on 1× and huge on 2×. Display at the original CSS size (24).

Practical tips from shipping SVGEditor

• Email: host or attach PNG; many clients (notably older Outlook) mishandle inline SVG. Prefer a hosted PNG URL or CID attachment over inline SVG markup.
• Slides: export at a larger CSS size (e.g. 256 → 512) so zoom does not pixelate.
• Favicons: browsers want dedicated sizes; a single 2× icon PNG is a start, not a full favicon set. Generate each target size separately before shipping.
• Cleanup: strip editor junk and unused ids before rasterizing — fewer surprises if you also keep the vector.
• Share before download: use Copy link so a teammate can verify the preview.
• Same paste, other formats: React, React Native, and Data URI stay one click away — useful when marketing wants PNG and engineering wants JSX from one source.

FAQ

Is there a free SVG to PNG converter online?

Yes. SVGEditor’s SVG to PNG tool runs in your browser for free — no account and no file upload to a server. Paste SVG, keep the PNG tab open, and download (use the button at the top of this guide).

Does converting SVG to PNG keep transparency?

Yes. The file keeps alpha from the SVG. The checkerboard is only the preview chrome, not pixels in the download.

What size is the exported PNG?

Rasterization uses 2× the SVG width and height. A 24×24 icon becomes 48×48. Set those attributes (and keep viewBox) for predictable pixels; enlarge them first for print or large thumbnails.

Why is my SVG to PNG export blurry or tiny?

Size follows the SVG dimensions, then ×2. A 16×16 source stays small even after 2×. Raise width / height on the root <svg>, preview again, then download. Display the PNG at the original CSS size so retina sharpness shows up.

When should I use PNG instead of SVG?

When the destination needs a bitmap — email, Office, many CMS uploads, social. Keep SVG for UI you will still theme and scale.

PNG download vs Data URI — which should I use?

Download PNG when you need a file to attach or upload. Use the Data URI tab when you want to paste a CSS background-image or inline data: URL without a separate asset.

Is in-browser SVG to PNG safer than uploading?

For private marks, yes — conversion stays on your device. Still treat share URLs carefully; the payload lives in the hash.

Can I convert SVG to React as well as PNG?

Yes — same editor. Switch to the React tab when you need a component instead of a bitmap. For the full JSX / React Native playbook, see the related guide below.

Related guide

Convert SVG to React (JSX) — components, SVGR, React Native, and when to keep SVG as a component instead of exporting PNG.

Convert your SVG now

Paste once, preview the 2× raster, download a transparent PNG — or export React / Data URI from the same workspace. Free, no account.