How to Convert SVG to PNG and Back — 5 Lossless Methods

You downloaded a logo in SVG, and the marketplace, CRM or email builder accepts PNG only. The task looks symmetrical: there's a "convert" button one way, and one the other way too. In reality the two directions work completely differently. SVG becomes PNG in two minutes in any tool, and there's exactly one place to get it wrong. PNG, meanwhile, cannot be turned into SVG automatically at all — the button promising otherwise is lying to you. Let's walk both directions and the reason for this asymmetry.

Why SVG turns into PNG easily

The reason lies in what each format stores. SVG holds an instruction: "draw a curve from here to here, fill with #21A038". To produce a PNG, the program simply executes that instruction and writes the result into pixels. The description is complete and nothing needs guessing, so any renderer handles it, from a browser to a command‑line utility.

But the operation has one irreversible moment. While executing the instruction, the program must choose what size to execute it at, and the written pixels can't be recomputed later. Hence the one real conversion mistake: taking the default size, getting a 48×48 image and then stretching it to banner width. So the methods below differ mainly in how conveniently you can set the size.

Five ways to get a PNG

1. Straight in the browser — for a one‑off PNG

Any browser opens an SVG and can save it. Drag the file into a Chrome or Firefox window, then right‑click → "Save image as…": some browsers offer PNG immediately.

The method wins on speed, but the size here is governed by on‑screen scale. For large PNGs, move on to the next one.

2. Figma — the most predictable size control

Here the size is set explicitly, which suits designers and everyone else:

1. Drag the SVG into any Figma file — it lands as an editable vector.
2. Select the object → the Export section at the bottom right.
3. Choose PNG and a multiplier (1x, 2x, 4x) or a specific pixel width.
4. Export — done.

As a bonus you can recolor the logo or place a background before exporting, which gets its own scenario below.

3. Online converters — fast, with two caveats

Convertio, CloudConvert, svgtopng and dozens of others run on "upload a file — download a PNG". There are exactly two caveats, and both follow from what's above.

The first is size. Many services render an SVG at its "nominal" size (48×48, say), and you get a tiny image; look for the size setting before converting. The second concerns privacy: the file travels to someone else's server, so confidential layouts are better kept out of random services.

4. Photoshop and Illustrator — if they're already open

Photoshop: File → Open, set a generous pixel size when opening the SVG, then File → Export → PNG. Illustrator: File → Export → Export As → PNG, resolution is chosen right there. The logic is identical: size is set before rasterization, because changing it afterwards is too late.

5. Command line — when there are many files

For a batch it's faster to install a tool once than to push each file through an interface by hand:

# librsvg (macOS: brew install librsvg)
rsvg-convert -w 1024 logo.svg -o logo.png

# Inkscape
inkscape logo.svg --export-type=png --export-width=1024

Note the width flag (-w 1024): it determines the final quality. The same size choice, just written explicitly.

Why the reverse path fails

Now it's clear what makes the forward direction work: the program has a full description of the shapes. Going back, that description simply doesn't exist. A PNG holds only a grid of colored dots — no "circle" and no "curve" is recorded inside the file.

So a PNG → SVG converter translates nothing. It guesses contours from color boundaries. The operation is called tracing, and its result depends on how closely the picture resembles a set of simple shapes:

• A simple single‑color mark (a silhouette, an icon) — tracing does a decent job. Inkscape (Path → Trace Bitmap) or vectorizer services give a workable result.
• A logo with gradients, fine detail and text — you get ragged edges, lost details and a file heavier than the source PNG.
• A photo — the result is meaningless at any setting.

You can judge a trace without squinting at the edges. Open the resulting SVG in Figma and count the anchor points: a hand‑drawn mark has dozens, a traced one has hundreds or thousands, because the program outlines every step of the pixel boundary with its own point. Hence the weight: a traced gradient logo easily outweighs the source PNG several times over. The second sign shows in color: a flat fill breaks into dozens of near‑identical shades, and recoloring such a mark with a single fill edit stops working, which is usually the reason to want a vector at all.

Because honest tracing is hard, some services fake it.

There are two honest ways out for a complex logo: draw it in vector by hand, or find the original SVG. The second is faster and free: most well‑known brands have a vector, and our catalog holds exactly those official files.

Comparing the directions

Task	Difficulty	Tool	Result quality
SVG → PNG	2 minutes	Figma, browser, online	identical to the original
PNG → SVG (simple mark)	10 minutes	Inkscape Trace	acceptable
PNG → SVG (complex logo)	hours of work	manual redraw	depends on the artist

Typical scenarios

The "size first" rule almost always means "frame first" in practice. Four situations show it most clearly.

A social media avatar. Converting a horizontal logo directly gives a narrow strip, useless for a round avatar. Build a square 1024×1024 frame in Figma, place the mark with 15–20% padding and a colored background and export that frame.

A logo for a PowerPoint deck. Modern PowerPoint accepts SVG directly (Insert → Pictures), and vector wins here: the logo stays crisp on any projector. PNG is only needed for Office versions older than 2016.

Printing on a T‑shirt or mug. Print shops ask for high‑resolution PNG, and the size is derived from the physical one: a 30 cm print at 300 dpi is about 3550 pixels. Render generously — 4000 px on the long side.

A batch of icons for a website. Conversion is redundant here: SVG in markup is lighter, crisper and recolors from CSS. Embedding methods are covered in how to embed SVG on a website.

Why a converter returns an empty PNG

A separate common complaint: the service finished, but the PNG came out transparent or black. The cause is always the same — the renderer couldn't fully execute the file's instruction. There are three specific reasons, by descending likelihood:

1. Colors set via CSS classes while the fill attributes sit empty — the service's simplified renderer skipped the styles. Fixed by re‑saving the SVG from Figma: it bakes styles into shape attributes.
2. The file uses external fonts or images — without access to them the converter draws emptiness. Convert text to curves before converting.
3. Filters and masks — exotic effects aren't supported by every renderer. Open the file in a browser: if it's empty there too, the problem is in the file itself.

The universal answer to fussy online services is Figma: its renderer is the most predictable of the publicly available ones.

Common questions

What PNG size for social media? Avatars — 400×400 minimum, posts and covers — per the platform's spec, but no less than 1080 on the long side. It's easier to make 2048 px once and scale down.

Will transparency survive? Yes: PNG supports an alpha channel, and every method listed leaves the background transparent by default. A white background appears only when exporting to JPG.

Can I convert a batch at once? Online services usually cap the count, so for batches use the command line (method 5) or Figma: select all objects and export them together.

What should I use for an email campaign? PNG only: mail clients barely support vector, and Gmail and Outlook drop an SVG silently, leaving a blank space. Render at twice the size the image occupies on screen.

Why is my PNG cropped at the edges? An SVG has a viewBox — the frame the picture lives in. Shapes that ended up outside it after manual edits get cut off by the renderer. Open the file in Figma and check that all content sits inside the frame.

How do I get a PNG with a background instead of transparency? In Figma, place a rectangle of the needed color under the logo and export them together. On the command line, rsvg-convert has the -b '#FFFFFF' flag for this.

Why does Illustrator export a PNG with huge margins? It exports the whole artboard. Either fit the artboard to the logo (Object → Artboards → Fit to Artwork Bounds) or use Export Selection.

The bottom line

The asymmetry of the two directions comes down to one thing: a vector records a description of shapes, a raster doesn't. So any tool turns SVG into PNG, and the only thing to watch is size: set it upfront and generously. There's no road back: tracing will pull through a simple single‑color mark, and everything else has to be redrawn by hand or found as an original vector.

That last option is almost always faster: in our logo catalog every brand already has both SVG and PNG, and the PNG downloads at the size you need — no conversion required at all.