How to use the SVG to PNG & PNG to SVG Converter
SVG to PNG, JPG or WebP
- Open the SVG → PNG/JPG/WebP tab and drop an .svg file, or paste the code into SVG code. The sample illustration renders straight away.
- Set the size with the Scale buttons (1×, 2×, 4×, 8× of the SVG’s own size) or type a Width and Height. Leave Keep aspect ratio on unless you really want to stretch it.
- Choose the Format, set Quality for JPG or WebP, and decide on Transparent background or a solid color.
- Press Download PNG (the label follows the format you picked) — the box above the button shows the exact pixel size and file size first. Copy image puts a PNG on the clipboard for pasting into Figma, Canva or a document.
PNG or JPG to SVG
- Open the PNG/JPG → SVG tab and drop a logo, lettering or flat illustration.
- Pick a Preset — Logo / flat, Posterized or Line art — then adjust Colors (or Threshold for line art), Detail and Smoothing.
- Compare the two previews, check the path count and file size, and press Download SVG or Copy SVG code.
Both directions run entirely in your browser; files are read locally and nothing is uploaded. The tracing engine (the public-domain imagetracer.js library) loads only when you open the second tab.
Choosing the pixel size of an SVG export
An SVG has no fixed resolution. Its coordinates live in a viewBox — the sample’s viewBox="0 0 240 160" says the drawing is 240 units wide and 160 tall — and the renderer can draw it at any size without blur. A PNG, by contrast, stores a fixed grid of pixels, so the moment you convert, you have to decide how many.
Work backwards from where the image is going:
- Screen use: multiply the display size by the screen density. An icon shown at 64 CSS pixels needs 128 px for 2× phone screens and 192 px for 3×.
- Print: multiply inches by DPI. A 3-inch sticker at 300 DPI needs 900 px across.
- Units in the file: SVG and CSS define 1 inch as 96 px, so 1 pt is 1.333 px and 1 mm is 3.78 px. An SVG saved as A4 (
width="210mm") is 793.7 px wide at 1×. To print that page at 300 DPI you need 2480 px, which is a scale of 3.125 — type 2480 into Width and the height follows.
The converter caps the output at 10,000 px per side and 50 megapixels so your browser does not run out of memory.
What tracing can and cannot do
Tracing works the other way: it looks for areas of one color in a bitmap and draws an outline path around each area. That works beautifully for artwork that already is flat color — logos, lettering, stamps, two-color illustrations, scanned ink drawings. It works badly for photographs and painterly art, because every soft gradient gets cut into bands and every band becomes more paths.
Numbers from our own tests show the pattern. The 600 × 600 sample badge, traced with the Logo preset, gives 6 colors, 58 paths and a 10.1 KB file. The Posterized preset on the same badge gives 147 paths and 54.4 KB, because smoothing creates in-between colors along the edges. A soft-gradient test scene of 1800 × 1200 px, traced with the Posterized preset at 24 colors and Detail 10, produced 1,174 paths and a 333 KB file — and a real photograph with texture goes much further.
| Preset | What it does | Good for |
|---|---|---|
| Logo / flat | Few colors, crisp corners, ignores tiny specks | Logos, icons, flat illustrations, sticker art |
| Posterized | More colors with smoothing, rounder shapes | Stylized portraits, poster-like versions of paintings |
| Line art | Black and white only, white removed | Ink drawings, lettering, cutting-machine and laser files |
Detail controls how closely curves follow the pixels and how small a shape can be before it is dropped. Smoothing blurs the image slightly before tracing, which removes JPG noise and anti-aliasing speckles. Remove background color deletes the layer that touches the image corners, which is usually what a cutting machine needs.
Tips from practice
Outline your fonts before converting to PNG. An SVG drawn as an image cannot load web fonts or linked files, so text falls back to a system font. In Illustrator use Create Outlines, in Inkscape Object to Path, or build lettering with the Text to SVG Outline Tool.
Trace the biggest file you have. A 200-pixel logo from a website traces into wobbly edges. Find the original artwork or a large export; the converter scales anything above 1000 px down for tracing and then stretches the vector back to the original size.
Fewer colors, cleaner file. Start with the lowest Colors value that keeps the design recognizable. If your source is a painting, reduce it to a handful of flat colors first with the Image Posterize Tool and trace that.
Scan line art at high contrast. For hand-drawn lettering, scan at 300–600 DPI, then drag Threshold until the strokes are solid and the paper is clean. The Line Art Extractor can pull lines out of a pencil sketch first.
Check the path count before cutting. Cutting software can slow down with thousands of tiny paths, and every speck becomes a cut. If the count looks high, lower Detail or raise Smoothing and watch it drop.