How to Convert SVG to PNG and Back — 5 Lossless Methods
You downloaded a logo as SVG, but a marketplace, CRM or email builder only accepts PNG? That's a two‑minute task — if you know which tool to use. The reverse task, PNG to SVG, works completely differently, and most online converters do it badly. Let's cover both directions.
SVG → PNG is trivial: browser, Figma, any online converter. The key is to set the pixel size upfront, because a PNG can't be enlarged afterwards. PNG → SVG is not a conversion but a redraw; automatic tracing only works for simple one‑color marks.
SVG to PNG: 5 working methods
1. Right in the browser
Open the SVG in Chrome or Firefox (drag it into a window), right‑click → "Save image as…" — some browsers offer PNG directly. If not, a screenshot works, but only at on‑screen size.
2. Figma — best size control
- Drag the SVG into any Figma file — it lands as an editable vector.
- Select it → the Export section at the bottom right.
- Pick PNG and a multiplier (1x, 2x, 4x) or an exact width.
- Export — done.
Bonus: recolor the logo or add a background before exporting.
3. Online converters
Convertio, CloudConvert, svgtopng and dozens of clones: upload, download. Two caveats. First, check the size setting — many services render the SVG at its "nominal" size (say, 48×48) and hand you a tiny image. Second, don't upload confidential artwork to random services — the file travels to someone else's server.
4. Photoshop and Illustrator
Photoshop: File → Open, set a generous pixel size at import, then Export → PNG. Illustrator: File → Export As → PNG with a resolution picker. Same principle: the size is chosen before rasterization.
5. Command line — for automation
# librsvg (macOS: brew install librsvg)
rsvg-convert -w 1024 logo.svg -o logo.png
# Inkscape
inkscape logo.svg --export-type=png --export-width=1024The width flag (-w 1024) determines the final quality.
Always render the PNG at the size you need, or larger. Making a bigger PNG from SVG is free; enlarging a finished PNG without blur is impossible. When in doubt, go 1024 px or more.
PNG to SVG: why the "converter" lies
A PNG contains no shape information — only pixels. A converter doesn't translate the format; it guesses outlines from pixels. That's called tracing, with three outcomes:
- Simple one‑color mark — tracing does fine. Inkscape (Path → Trace Bitmap) gives a usable result.
- Logo with gradients, fine detail, text — ragged edges, lost detail, and a file heavier than the source PNG.
- A photo — pointless entirely.
Some online "PNG to SVG converters" simply wrap your bitmap inside an SVG shell (<image href="...">). The extension changed; the pixels didn't. Check with a text editor: a real vector consists of <path>, <circle>, <rect> — not a single <image> tag.
The honest fix for a complex logo is a manual redraw — or finding the original SVG. For most known brands it exists, and that's exactly what our catalog stores.
FAQ
What PNG size for social media? Avatars — at least 400×400; posts and covers — per platform, but no less than 1080 px on the long side. Easier: render 2048 px once and downscale.
Will transparency survive? Yes — PNG has an alpha channel, and every method above keeps the background transparent by default. A white background only appears if you export to JPG.
Batch conversion? Online tools cap file counts; for batches use the command line (method 5) or Figma — select everything and export at once.
Why did the PNG come out with clipped edges? SVG has a viewBox — the "window" the artwork lives in. Shapes outside it (common after manual edits) get cut by the renderer. Open the SVG in Figma and check everything sits inside the frame.
How do I convert a transparent SVG into a PNG with a background? Sometimes you need one — say, for a JPG preview. In Figma, put a colored rectangle under the logo and export together. On the command line, rsvg‑convert has a -b '#FFFFFF' flag.
Why does Illustrator export a PNG with huge margins? It exports the artboard, not the object. Either fit the artboard to the artwork (Object → Artboards → Fit to Artwork Bounds) or use Export Selection.
Typical scenarios walked through
Scenario: a social avatar from an SVG logo. Don't convert the logo as‑is: first build a 1024×1024 square frame in Figma, place the mark with 15–20% margins on a colored background — and export that frame. Direct conversion of a horizontal logo yields a narrow stripe useless as an avatar.
Scenario: a logo for a PowerPoint deck. Modern PowerPoint accepts SVG directly (Insert → Pictures) — and it beats PNG: the logo stays crisp on any projector. Convert to PNG only for old Office versions.
Scenario: printing on a T‑shirt or a mug. Sublimation printers often want high‑res PNG. Calculate from physical size: a 30 cm print at 300 dpi is ~3550 pixels. Render with margin — 4000 px on the long side.
Scenario: a batch of site icons. Don't convert at all — use SVG directly in the markup: lighter, sharper, CSS‑recolorable. All embedding methods are in how to embed SVG.
Why an online converter sometimes returns an "empty" PNG
A common complaint: the service ran, but the PNG is transparent or black. Causes, most likely first:
- Colors defined via CSS classes instead of
fillattributes — the service's simplified renderer skipped the styles. Fix by re‑saving the SVG from Figma (it bakes styles into attributes). - External fonts or images referenced — without access, the converter renders nothing. Outline text before converting.
- Filters and masks — exotic SVG effects aren't supported by every renderer. Check the file in a browser: if it's empty there too, the file itself is the problem.
The universal fallback when online tools misbehave is Figma: its renderer is the most predictable of the freely available ones.
In short
SVG to PNG: set the size and hit Export anywhere. PNG to SVG: don't trust the "convert" button — trace a simple mark, redraw a complex one, or find the original vector.
The fastest route is not converting at all: every brand in our logo catalog already ships both SVG and PNG, and the PNG can be downloaded at the size you need.