SVG to PNG: The Complete 2026 Conversion Guide

You don't need Photoshop to turn an SVG into a PNG. You don't even need to install anything.

An SVG is just code — text describing shapes. A PNG is a grid of pixels. The conversion itself takes about ten seconds, and most of the mistakes people make happen before they ever click download: wrong size, lost transparency, text in a font the converter doesn't have. This guide works through them in order — paste first, size second, transparency third, then the platform-specific stuff.

The ten-second version: paste the code, grab the PNG

Open the SVG in any text editor — Notepad, TextEdit, VS Code, anything — and copy everything. Then open our Image Converter, paste the code in, and download your PNG. No account, no upload to some random server, no watermark.

Why paste code instead of uploading a file? Because half the time your "SVG" is already code. It's sitting in a design tool, in a page's source, or on an icon site. Pasting skips the save-a-file step entirely. And if you do have an actual .svg file, the converter takes uploads too.

Four places cover nearly every paste, and each one has its own way of grabbing the code. From a .svg file: open it in a text editor, select all, copy — an SVG is plain text, so what you see is the whole graphic. From Figma: select the layer, right-click, Copy as, then Copy as SVG — and tick "Outline text" on export too, for reasons you'll see below. From a website: right-click the graphic, Inspect, find the <svg> tag in the Elements panel, right-click it, and choose Copy element, which grabs the code exactly as the page rendered it. From an icon library: most put a copy button right on the icon, so paste what it gives you rather than hand-typing the opening tag from memory.

One warning about code lifted from a site: check the license before it goes anywhere near a deliverable. "I found it in the page source" is not a license.

Before you hit download: three checks on the paste

A good paste starts with <svg and ends with </svg>. If either end is missing, you copied half a graphic. Go back and copy the whole element, not a selection inside it.

Then three quick checks. First, size. Look for width, height, and viewBox on the opening tag. An SVG with only a viewBox — say, viewBox="0 0 24 24" and no width or height — has no pixel size of its own. Some browsers report that as zero, so the export comes out blank or 1×1. Fix it by adding width and height from the viewBox numbers, or typing a width into the converter.

Second, the namespace. The opening tag should carry xmlns="http://www.w3.org/2000/svg". Most converters cope without it, but a few render nothing when it's missing, and you'll waste ten minutes blaming the wrong thing. Third, the background rectangle. Search the code for a <rect> spanning the full canvas. If one is there with a fill, that colour is part of the artwork and will bake into every PNG. It is not a transparency bug. Delete that rect if you want a transparent result.

And if there's no size at all, browsers fall back to a 300 × 150 canvas — so a drawing outside that box comes out cut off. The real fix is a viewBox on the code, not a bigger export.

Three ways a paste quietly breaks

Fonts fall back silently. An SVG stores a font name, not the font itself. Paste code that says "Inter" onto a machine without Inter, and the converter draws whatever the system picks — spacing shifts, and a logo comes out slightly wrong. Convert text to outlines in Figma or Illustrator before you copy, so the letters become shapes that need no font. Keep an editable copy first, because outlined text cannot be retyped.

Linked images and styles vanish. A browser draws pasted SVG in a closed box: it will not fetch an <image> pointing at another file, a web font, or an outside stylesheet, and it gives no error — the piece just renders as nothing. If your PNG has a hole in it, that is why. Embed the image as a data URI, or export a self-contained SVG from the design tool.

CSS classes do not travel. Code copied from a page often leans on classes defined in that page's stylesheet, which stays behind when you copy the element. A fill="currentColor" icon pasted from a dark-mode page can even bake in the wrong colour. When the result looks half-styled, replace class-based fills with plain fill attributes before converting.

Two things never to do with pasted code: do not rename a file to change its format — logo.svg renamed to logo.png is still SVG inside, and most apps will refuse it — and do not screenshot the SVG open in a browser tab. A screenshot locks in the wrong size, fuzzy edges, and no transparency control.

How big? Do the maths before you export

An SVG has no fixed size, so you choose how big the PNG comes out. Export scale is just a multiplier on the SVG's base dimensions. Your logo SVG is 200×200 at base size? Export at 1x and you get a 200×200 PNG. At 2x, 400×400. At 4x, 800×800. At 8x, 1600×1600.

Don't guess the scale. Work it out from where the PNG will actually appear: required pixels = display size in CSS pixels × device pixel ratio, and export scale = required pixels ÷ your SVG's declared size. An icon declared at 24×24 will be displayed at 48 CSS pixels wide on a phone screen with a pixel ratio of 2, so it needs 48 × 2 = 96 physical pixels across. A 2x export gives you only 48 — half of what the screen wants, and that is exactly why it looks soft. You need 4x for the full 96. That is why "just use 2x" is a starting point, not a rule.

For print, the maths flips to inches: pixels = inches × 300. A logo printed 2 inches wide needs 600 pixels across, a business card logo at 3.5 × 2 inches needs 1050 × 600, and a full A4 page needs 2480 × 3508. Do that multiplication before you export — a PNG can't gain pixels later.

Export sizes for common uses

Export each size fresh from the SVG — never by stretching a smaller PNG:

• Favicon: 32×32 for the browser tab, 48×48 for good measure. Add 180×180 for the Apple touch icon and 192×192 plus 512×512 for Android and PWA manifests.
• App icon: 1024×1024 master. Both app stores scale down from it, so this is the one size you should never cheap out on.
• Website logo: twice the width it will display at. A header logo shown at 250 pixels wide wants a 500-pixel PNG.
• Email header: 600 pixels wide max, or 1200 if you want it sharp for retina mail clients, displayed at 600.
• Social posts: 1080×1080 for a square post, 1080×1920 for Stories, 1200×630 for a link-share image.
• Slides and documents: 1920×1080 covers a full HD slide; 1024 to 2048 wide covers most document images.
• Print: inches × 300, every time. A 4 × 6 inch print needs 1200 × 1800 pixels.

One catch: a square logo can't become a 1200×630 share image just by typing a new width — the aspect ratios don't match, so you'd stretch it. Build the wide layout in the SVG first, then rasterize that at 1200 wide.

So which scale do you actually need? 1x for favicons and tiny UI icons. 2x for anything shown on modern screens — retina displays need the extra pixels to look sharp. 4x for print or large banners. 8x is overkill for most people: the file gets huge and you'll never see the difference on a screen. At normal viewing distance, 1x looks soft on a retina display and 2x looks crisp, while 4x and 8x are hard to tell apart unless you zoom in close — past the screen’s pixel density, the extra pixels add file size, not visible sharpness. Don't export bigger than you need — it just bloats your page weight for nothing.

Export big once. Shrink forever.

This is the habit that saves the most rework: export at the largest size you will ever need, then shrink copies down for each use. Shrinking a PNG is safe — you're throwing away pixels you have. Growing one is not — the software has to invent detail, and that's the blur everyone complains about. A single 2048-pixel master can feed your website, your slides, and your social posts.

The only price is file size, which grows with the square of the width: doubling the width quadruples the pixel count. If a file comes out bigger than expected, shrink the colour palette first — most SVG artwork uses a handful of flat colours, and 32 colours often looks identical to 256.

The DPI number is a label, not a setting

Once a PNG is written, its DPI number is just a label stored in a metadata chunk. It does not make the image sharper: a 400-pixel PNG tagged 300 DPI and the same 400-pixel PNG tagged 72 DPI look identical on screen. DPI only matters while the renderer is working, as a way of turning physical units into pixels — Inkscape defaults to 96 DPI, which is why one SVG unit becomes one pixel at default settings. Think in pixels for screens, and use DPI only as the print calculation (inches × 300).

Same file, four tools: where the size button hides

Online converter (fastest). Open our Image Converter, drop in the SVG or paste the code, and type the exact pixel width you worked out above. The height follows the artwork, so nothing stretches. Pick transparent background for logos on varied backgrounds, or a solid colour when the destination shows transparency as black.

Figma. Select the frame, open the Export panel, choose PNG, and set the scale — 1x, 2x, or 3x. You can stack several scales on one layer and export them all at once. Remember the scale multiplies the frame size, so a 24-pixel frame at 2x gives you 48 pixels, not 96 — run the maths above first.

Inkscape. Open the file, press Shift+Ctrl+E, pick the export area (Drawing trims empty page margins; Page keeps them), then type a pixel width or set the DPI — 96 for screen, 300 for print.

Command line. For a whole folder, nothing beats a loop. rsvg-convert -w 1024 icon.svg -o icon.png sets an exact width, and rsvg-convert -z 4 icon.svg -o icon.png scales by a factor. With ImageMagick, put -density before the input file — magick -density 300 input.svg -resize 1024x1024 output.png — because density controls how the vector is drawn, while resize alone only stretches the finished pixels. Keep one renderer for a whole icon set, since each draws filters and fonts slightly differently.

The checkerboard test

PNG supports transparency, and that's half the reason people convert to it. The classic mistake is exporting with a white background baked in and only noticing when the logo sits on a dark website looking like a sticker.

Before you download, check the preview. If you see the grey-and-white checkerboard behind your graphic, transparency is intact. If you see solid white, something added a background — go back and check whether a background rectangle is hiding in the SVG code (look for a <rect> with a fill colour near the top of the file) and remove it.

Our converter preserves the alpha channel by default, so what you see in the preview is what you get in the download.

Why the background turns black — and the fix

The black-box result has one cause: the converter dropped the alpha channel. A fully transparent pixel still stores colour values underneath, usually 0, 0, 0 — black. Drop the alpha and that black shows through. Re-export with transparency switched on, and check the SVG for the background rectangle described above, since a full-canvas <rect> will bake into every export no matter what the converter does.

One more thing that looks like the same bug but isn't: a transparent PNG can still show a black thumbnail in File Explorer — that is the thumbnail cache, not your image. Open the file itself to judge.

Some destinations cannot show transparency at all — older email clients and anywhere the file gets flattened to JPG later. For those places, bake a white background in on purpose instead of fighting it. Outlook is the sharpest example: it never rendered inline SVG, and from late 2025 it blocks SVG images outright, so a PNG is the only safe format for email.

The text problem nobody warns you about

If your SVG contains text, the PNG renders that text using whatever fonts are installed on the machine doing the converting. If the original designer used a font you don't have, your PNG comes out with a fallback font and looks wrong — different spacing, different weight, sometimes a completely different typeface.

Two fixes. Best: convert the text to outlines first — in Figma, tick "Outline text" on export; in Illustrator, use Type > Create Outlines. That turns letters into plain shapes, so they render identically everywhere. Quick-and-dirty: install the missing font before converting.

Honest caveat: no converter can magically render a font it doesn't have. If text fidelity matters — a logo, a brand mark — outlines are the only bulletproof option. It's not the converter's fault; it's just how fonts work.

Windows 11 has no Save As PNG. Here is what works instead

Double-click an SVG on Windows 11 and it opens in Edge. There is no Save as PNG anywhere — not in File Explorer, not in Photos, not in Paint. Here is every method that works, fastest first.

1. The browser method (10 seconds, nothing to install)

Open our Image Converter, paste your SVG code or drop in the .svg file, pick your export size, and download the PNG. The converter runs in your browser, so your file never uploads anywhere. If your SVG is already code — copied from an icon library or Figma — pasting skips the save-a-file step. Pick 2x for screens, 4x if it might get printed later.

2. Inkscape: the free desktop option with full control

If you convert SVGs more than once a month, install Inkscape — free, open source, from inkscape.org. Open the file, go to File > Export PNG Image (Shift+Ctrl+E), pick your export area — Page exports the whole canvas, Drawing trims the empty space — set a width or DPI, and hit Export. Note the default: 96 DPI, so one SVG unit becomes one pixel. For print, set 300 DPI — a logo printing 2 inches wide needs 600 pixels across. Prefer the command line? One command does it: inkscape input.svg --export-type=png --export-filename=output.png --export-width=1024. Loop it over a folder to batch-convert the lot.

3. Paint and Photos: what actually works (and what doesn't)

Paint is the wrong tool for this. It can open some SVGs if you right-click and choose Edit with Paint, but the rendering is unreliable and you get no control over the export size — and a wrong-size PNG is a blurry PNG. Photos only opens SVGs for viewing. There is no hidden export button in either app. What does help: PowerToys. Install it from the Microsoft Store or with winget install Microsoft.PowerToys, turn on the SVG preview in File Explorer Add-ons, and you get thumbnails and a preview pane for every SVG in a folder.

4. Right-click conversion: File Converter (best for batches)

If you would rather never open an app, install the open-source File Converter. After installing, right-click any SVG and choose File Converter > To Png — on Windows 11 it sits under Show more options, or hold Shift while right-clicking for the classic menu. Select a dozen files at once and it converts the lot, saving each PNG next to its SVG. Or with ImageMagick: magick mogrify -density 300 -resize 200% -format png *.svg.

5. The PowerPoint trick (and why your deck keeps growing)

PowerPoint and Word accept SVGs directly: Insert > Pictures > This Device, pick the file. To get a PNG out, right-click the inserted image and choose Save as picture, then pick PNG. PowerPoint quietly creates a hidden PNG copy of every SVG you insert. That invisible copy is often bigger than the SVG itself, which is why decks with a few icons balloon in size. If file size matters, convert to a lean PNG first and insert that instead.

What not to do on Windows

• Do not rename the file. Changing logo.svg to logo.png changes the name, not the format — most apps will refuse it.
• Do not screenshot it. A screenshot of the SVG open in Edge gives you the wrong size, fuzzy edges, and no transparency control.
• Do not pay for Canva Pro just for this. Transparent PNG export in Canva needs the paid plan; the free browser method above does it in ten seconds.
• Do not upload client files to a random converter. If the artwork is not yours to share, use a tool that converts in your browser.

On Mac: don't look in Preview

Preview — the app that opens everything — does not convert SVGs. Don't waste ten minutes looking for the option; it isn't there. Use the browser converter, or grab Inkscape for Mac if you convert often. Same ten-second process either way.

Why the upload button said no

You drag a logo into LinkedIn or WordPress and get the same refusal: file type not supported, upload a PNG or JPG. SVG and WebP get rejected for opposite reasons — an SVG because of what it can do, a WebP because of what the software on the other end can't do. Fixing the wrong one wastes the afternoon.

An SVG is a document wearing a picture's clothes

PNG, JPG, and WebP store a grid of pixels. An SVG stores instructions written in XML — and XML can carry <script> tags, event handlers like onload, links to outside resources, and <foreignObject>, which embeds raw HTML. A file that looks like a logo can behave like a web page. The danger depends on how the file is shown. Loaded through an <img> tag, browsers apply a strict image context: scripts don't run and outside resources don't load. Opened directly in a tab, or inlined into a page, the same file can run code. That gap is what platforms close by refusing the upload: they can't control how the file will be displayed after it's stored, so they don't store it. Stored cross-site scripting is the concrete version: an attacker uploads an SVG avatar, a victim opens it, and the script runs on the site's own origin and reads session cookies. Sanitizers exist, but a platform taking uploads from millions of strangers would rather reject the format than trust every file to be cleaned.

The 1 KB file that ate 3 GB

The most famous reason platforms distrust XML is the Billion Laughs attack: ten entities, each made of ten copies of the previous one, and the document itself is a single reference to the largest one. A parser that expands it builds a billion copies of the string "lol" — a file under 1 KB taking up almost 3 GB of memory. The quieter variant, quadratic blowup, needs no nesting: one 50,000-character entity referenced 50,000 times turns about 200 KB into 2.5 GB when parsed. The attack was first reported in 2002 and widely addressed from 2008, yet it still shows up in modern reports — libexpat had an entity-expansion issue in 2024 (CVE-2024-28757). Rasterizing to PNG ends both attacks: a PNG has no entities to expand, no scripts to run, nothing to parse but pixels.

WordPress says no on purpose

WordPress blocks SVG uploads out of the box with "Sorry, this file type is not permitted for security reasons." That is a deliberate core restriction, not a bug, and it still holds in current versions — getting an SVG into the media library takes a plugin or custom code. The right fix is a sanitizing plugin: Safe SVG cleans uploads with the enshrined/svg-sanitize library, stripping scripts, event handlers, and foreign objects before the file is stored. The wrong fix is adding define('ALLOW_UNFILTERED_UPLOADS', true); to wp-config.php — that opens uploads to any file type for admins and editors, including .php scripts. And don't confuse SVGO with a sanitizer: it optimizes coordinates and strips editor metadata, and will happily minify a malicious script and keep it. Optimization is not security.

WebP's problem is the opposite one

WebP is the opposite story in WordPress: native support arrived in version 5.8 (2021), AVIF in 6.5. If a WebP still bounces, the block is usually downstream — an older upload_mimes list, a security plugin restoring a 2017-era allowlist, or a media service that checks the extension instead of the file type.

Browsers stopped being the problem years ago. Safari, the last major holdout, added WebP in version 14 (September 2020, macOS Big Sur and iOS 14), and around 97% of browser traffic can display WebP now. The failures happen in software that never got a WebP decoder: desktop Outlook shows a blank box or a paperclip that won't preview, desktop Word's Insert Picture dialog rejects the file, and older apps and upload portals with extension allowlists do the same. Email is the worst case: you can't predict the recipient's client. Gmail in a browser displays WebP but converts it to JPG and drops animation; desktop Outlook often shows nothing at all. For anything that leaves the browser — newsletters, attachments, documents — JPG for photos and PNG for graphics with transparency is still the safe pair. Some uploaders ignore the .jpg extension and read the file signature. WebP's container is RIFF with a WEBP marker, so renaming a .webp file to .jpg doesn't fool them — the file has to actually be converted. Converting to PNG removes the risk for the PNG itself — a raster image has no scripts, no entities, nothing to execute. The original SVG still needs sanitizing before you share it; the risk lives in the vector file, not the copy.

It still looks wrong? Run this check

If the size is right and the PNG still looks off, the problem is almost always one of these:

• Blurry edges: the PNG is displayed larger than its pixel size. Re-export from the SVG at the display size times the screen's pixel ratio — never enlarge the PNG itself.
• Black background: the alpha channel got dropped. Re-export with transparency on, and check for a full-canvas background rectangle in the SVG.
• Blank PNG: the SVG has a viewBox but no width or height, so some browsers report its size as zero. Add width and height from the viewBox numbers, or type a width in the converter. Firefox used to fail silently on these files entirely — bug 700533, fixed in Firefox 120 — which is why the same file converted fine in Chrome and produced nothing in Firefox.
• Clipped edges: drop shadows and thick strokes spill past the viewBox. Pad the viewBox or export the drawing area instead of the page.
• Wrong font: the converter's machine doesn't have your font, so it substitutes one. Convert text to outlines in your editor before exporting.

Before you convert: do you even need a PNG?

Quick sanity check before you convert: do you actually need a PNG? If you're uploading to Instagram, a marketplace, or anywhere that rejects SVG files — and most platforms do, for the security reasons above — then yes, PNG is right. But if you might need to resize the graphic later, keep the original SVG too. Vector stays sharp at any size; a PNG only looks good at or below its export size.

And if file size matters more than transparency — say, a photo-like graphic for the web — compare against WebP or JPG before committing. The tradeoffs are covered in our WebP vs PNG vs JPG guide.

Paste the code, pick your scale, check the transparency, and download — ten seconds, free, done.