SVG to PNG Converter

Turn a vector into a pixel-perfect PNG

An SVG is the ideal master format — infinitely scalable, tiny, editable. But the world is full of places that will not take one: most social networks, a great many email clients, marketplaces like eBay and Etsy, office tools, and older content systems all expect a raster image. Converting SVG to PNG is the bridge: you keep the SVG as your source of truth and export a universally-supported PNG whenever you need to actually publish.

The advantage of starting from a vector is that there is no quality ceiling. Unlike upscaling a small PNG — which invents blurry detail — rendering from an SVG produces a perfectly sharp image at whatever resolution you ask for. Vectorizely does this rasterization in your browser, so the file never touches a server: faster, private, and free.

How to convert an SVG to PNG

1. Add your SVG. Drag it onto the tool above or click to browse — it is read locally, never uploaded.
2. Pick an output width. Choose 256, 512, 1024, or 2048 pixels. The height is set automatically from the SVG's aspect ratio.
3. Choose a background. Leave it transparent, or switch to solid white for destinations that flatten transparency.
4. Download the PNG. Save the rasterized image at your chosen size.

Why convert a scalable vector back to a raster?

It feels backwards, but the reasons are entirely practical and extremely common:

• Platform compatibility. Most social media, many email clients, and plenty of marketplaces and CMSs do not render SVG. PNG works everywhere.
• Office and docs. Slides, documents, and spreadsheets handle PNG far more predictably than SVG.
• Exact pixel control. When a spec calls for a precise pixel size — an app icon, a favicon, an ad slot — a PNG at exactly those dimensions removes ambiguity.
• Raster-only pipelines. Some print workflows, game engines, and image processors expect bitmaps.
• Thumbnails and previews. A quick PNG preview of an SVG is handy for listings and galleries.
• Security restrictions. Because SVGs can contain scripts, some platforms reject them outright; a PNG sidesteps that.

Choosing the right resolution

This is where exporting from a vector shines: pick the size for the job, then double it for high-DPI (“Retina”) screens so it stays crisp. A few common targets:

Use	Display size	Export at (2× for sharpness)
Favicon	16–48px	512px (then resize down)
App / social icon	—	512 or 1024px
In-content logo	~200px	512px
Hero / banner graphic	~1000px	2048px
Print	any	The largest available; print needs high pixel density

A good habit: render one generous master PNG (say 2048px) and downscale copies from it as needed. Downscaling stays sharp; upscaling a raster never does — which is the whole reason to keep the SVG around as your source.

Transparent vs. white background

PNG supports transparency, so by default the areas outside your shapes stay see-through — perfect for logos and icons that sit on colored backgrounds. Switch to a white background when the destination flattens or mishandles transparency (some email clients and a few marketplaces), or when you specifically want a card-like solid tile. If you need a brand color behind the artwork, export transparent and place it over your color in the destination, or add the background in the SVG before converting.

SVG vs PNG: keep both, use each for its job

	SVG (vector)	PNG (raster)
Scales without quality loss	Yes	No
Universally accepted	No	Yes
Best as	Your editable master	The published, fixed-size export
Transparency	Yes	Yes
Animation / CSS styling	Yes	No
Photographs	No	Yes (or JPG)

The healthy workflow is to treat the SVG as the master and generate PNGs from it on demand — never the other way around.

Common problems, and how to fix them

• Exported PNG is blank or partial. The SVG likely references an external web font, linked raster, or stylesheet. Browsers rasterize the file in isolation, so embed fonts (convert text to paths) and images (as data URIs) first.
• Wrong size or squashed. The SVG may lack a viewBox. With one present, aspect ratio is unambiguous; if it is missing, add viewBox="0 0 W H" matching the artwork.
• Fuzzy result. You exported too small for the display. Re-export at 2× the display size.
• Unexpected black or white fills. Paths with no explicit fill default to black; set fills explicitly in the SVG.
• Lost transparency. The white-background option is on, or the destination flattened it. Re-export transparent.

Raster and vector, briefly

A raster image — PNG, JPG, WebP — is a fixed grid of colored pixels. It is perfect for photographs and anything with continuous tone, but it is tied to the resolution it was saved at. A vector (SVG) describes shapes as mathematics, so it redraws cleanly at any size. Converting SVG to PNG is the moment you “bake” that math into pixels for one specific purpose. The whole skill is baking at the right resolution: too small and it looks soft, comfortably large and you can downscale it anywhere. Keep the SVG as your master and you can always bake again at a new size — which is exactly why the conversion only ever goes one way in a healthy workflow.

Export a complete icon set in minutes

One of the most common reasons to rasterize an SVG is to produce the many fixed sizes a favicon or app icon needs. From a single SVG you can export every size cleanly, none of them soft:

• Favicons — 16×16, 32×32, 48×48. Render at 512 and downscale for the crispest tiny sizes.
• Apple touch icon — 180×180.
• Android / PWA — 192×192 and 512×512.
• App stores & social avatars — usually 512×512 or 1024×1024.

Render the largest size once, then downscale copies. Downsampling preserves crisp edges; upscaling a small raster never will. This is the practical superpower of keeping a vector master: an entire, pixel-perfect icon set comes out of one file.

SVG to PNG for social, email, and marketplaces

Each destination has its own quirks, and most refuse SVG outright:

• Social media — platforms render uploads as raster and reject SVG. Export PNG at the platform's recommended pixel size, then 2× if they downscale on display.
• Email — many clients strip or ignore SVG, so PNG is the safe choice for logos and signatures — usually on a white background, since transparency renders inconsistently across clients.
• Marketplaces — Etsy, eBay, Amazon, and print-on-demand listings expect raster; export at the largest size the listing allows.
• Docs & slides — PNG places predictably where SVG support is patchy.
• App stores — icon specs are exact pixel sizes; export precisely to spec, no rounding.

Keeping color and edges crisp

Rasterizing from a vector is high fidelity, but a few details help. Export at 2× the display size so anti-aliased edges stay smooth on high-DPI (“Retina”) screens. Expect a thin, soft transition where a shape meets transparency — that is correct anti-aliasing, not a defect, and it is what keeps edges from looking jagged. If you see banding across a gradient, that lives in the SVG's gradient definition, not the export; add more color stops in the source. Colors render in sRGB, which matches the web; if the destination is print, confirm color expectations with the print workflow separately, because screens and presses do not speak the same color language.

When a PNG isn't the right export

PNG is the best general-purpose raster for crisp graphics and transparency, but it is not always the right call. If you are exporting something photographic and file size matters, a JPG or WebP will be dramatically smaller. For the web specifically, WebP usually beats PNG on size at equal quality and supports transparency too. The rule: choose PNG when you need lossless edges or transparency on a logo or icon; reach for WebP or JPG when the content is photographic and bytes matter more than perfectly sharp edges.

Exporting here vs. from Illustrator, Figma, or Inkscape

Design tools can export PNGs too, so when is a dedicated converter better? When you do not have the file open in a design tool, do not want to install one, or simply want a quick, exact-size export without hunting through an export dialog. A focused converter is also faster for one-off jobs and keeps the file on your machine rather than syncing it to a design service. If you are already deep in Figma or Illustrator with the artwork open and need many artboards at once, export from there; for “I have an SVG and need a PNG at 1024px,” a converter is the shorter path.

Doing many files

This tool converts one SVG at a time, which covers the overwhelming majority of real needs. If you genuinely have hundreds of SVGs to rasterize on a schedule, that is a job for a command-line pipeline (tools like resvg, sharp, or a headless browser) rather than any web page — and worth scripting once. For everything short of that, dropping files in one at a time is faster than setting up tooling.

File hygiene for the exported PNG

Give the exported file a descriptive, lowercase, hyphenated name (company-logo-512.png), not export(3).png — it helps you and, on the web, helps search engines understand the image. When you publish the PNG, write real alt text describing what it shows; that is both an accessibility requirement and a small SEO signal. And keep the SVG: the PNG is a disposable export, the vector is the asset worth archiving.

Resolution math: what 1×, 2×, and 3× mean

High-DPI (“Retina”) screens pack two or three physical pixels into each CSS pixel, so an image shown at 200 pixels needs 400 (2×) or 600 (3×) actual pixels to look sharp. That is the whole reason “export at 2×” is standard advice. Worked through: a favicon displayed at 32 px wants 64–96 px rendered; an icon shown at 256 px wants 512 px; a 1000 px hero wants 2000 px. For print, ignore screen multipliers and think in DPI instead — a two-inch logo at 300 DPI needs 600 pixels across. Because your source is a vector, none of this costs quality: pick the largest sensible size, then downscale copies from it as needed.

SVG features that don't rasterize — and how to fix them

A browser renders the SVG in isolation when it converts, so anything that lives outside the file simply disappears from the PNG. The usual culprits:

• External fonts. Text styled with a web font that is not embedded falls back or vanishes. Convert text to outlines (paths) before exporting, or embed the font in the file.
• Linked images. An <image> pointing at a URL or local path will not load during conversion. Embed it as a data URI instead.
• External CSS. Styles in a separate stylesheet are ignored; move them into a <style> block inside the SVG, or inline them as presentation attributes.
• foreignObject & scripts. HTML embedded via foreignObject and any scripting do not render to a canvas. Rebuild those parts with native SVG shapes.

The rule of thumb: a fully self-contained SVG — fonts outlined, images embedded, styles inline — rasterizes exactly as it looks on screen.

A note on color

Exports render in sRGB, the web's standard color space, so what you see on screen is what lands in the PNG — ideal for any digital use. Print is a different world: presses expect CMYK and specific profiles, so treat a screen PNG as a proof and hand your print shop the vector (or a properly converted CMYK file) for the final run. Gradients render smoothly; if you spot banding, it lives in the SVG's gradient definition rather than the export, and adding more color stops in the source fixes it.

Keep your vector as the master

The single most useful habit is to treat the SVG as your source of truth and PNGs as disposable exports. Store and version the SVG; regenerate PNGs whenever a new size or platform comes up. The reverse — recovering a clean vector from a PNG — means tracing, which only ever approximates. So convert raster to vector once (with PNG to SVG or Image to SVG), then render PNGs from that vector forever. It is the difference between owning the recipe and owning a single cooked meal.

Works in any browser, no install

The converter runs in the page itself, so it works in any current browser — desktop or mobile, Chrome, Safari, Firefox, Edge — with nothing to install and no extension or app required. Open it, drop an SVG, get a PNG. On a phone that means rasterizing an icon on the spot without routing your file through a separate app. The work happens on your device's processor, so a very large export takes a moment longer on low-powered hardware — a fair trade for never uploading the file.

Adding a background color or padding

Sometimes you want more than transparent or white behind the artwork — a brand color, or breathing room around a logo. The cleanest approach is to set it in the SVG before converting: add a full-canvas <rect> in your brand color as the first element for a background, or widen the viewBox (and re-center the artwork) to create padding. Both travel with the file, so every PNG you export inherits the same framing. If you only need white, the built-in white-background toggle is faster; for anything else, a few seconds in the SVG gives exact control.

From a PNG back to an editable source

A PNG is the end of the line — pixels, not shapes. If you later need to edit the artwork and only have the PNG, you are back to tracing, which only approximates. So whenever an SVG exists, keep it: it is the editable original, and each PNG is a one-way export for a specific destination. If you have lost the vector and only have a raster logo, our logo vectorizer can trace a fresh editable version — the best available path back to shapes. In practice the safest habit is to store the SVG alongside the rest of your brand or project assets and regenerate PNGs on demand, rather than archiving dozens of one-off exports that drift out of date. The vector is small, future-proof, and the only file you genuinely need to keep — every PNG can be rebuilt from it in seconds, at whatever size the next platform asks for. Think of the SVG as the negative and each PNG as a print: you can always make another print from the negative, but you cannot reconstruct the negative from a print.

How it works

The tool draws your SVG onto an HTML canvas at the exact pixel dimensions you choose, then exports that canvas as a PNG — the same rendering path a browser uses to paint the vector on screen, so the output matches what you see. Everything runs locally with no network round-trip. That is why it is instant, works offline, and keeps your artwork on your own machine.

Private and free, by design

Most converters upload your file, render it on a server, and send back a PNG. Vectorizely renders in your browser instead, so the SVG never leaves your device — safe for unreleased logos and client work. And with no server doing the work, there is no cost to recover: no paywall, no watermark, no “create an account to download.” Keep your SVG as the master, export whatever PNGs you need, and nothing about your artwork is shared with anyone.