Source vector
Load an SVG file or paste markup, set the exact pixel size you need, then download a PNG. The render runs inside this tab, so client artwork and unreleased logos never leave your machine.
Single file, up to a few megabytes of markup. Source dimensions are read from the width, height, and viewBox attributes.
No file loaded yet.
Source vector
PNG output
A vector file stores shapes, coordinates, and fills. Nothing inside it decides how many pixels the finished bitmap holds.
The converter reads the width and height attributes first. When those are missing, it falls back to the viewBox and keeps the ratio, then offers a sensible square target. Files exported from Figma or Illustrator usually carry real dimensions. Icons copied out of an icon set often carry a viewBox alone, so you get a ratio and choose the numbers yourself.
This is why two people converting the same logo end up with different files. The source did not define an answer.
Your markup goes into a Blob, the Blob becomes an object URL, an Image element decodes it, and a canvas draws that image at your target width and height. The canvas returns PNG bytes through toBlob, and the browser saves them. No request reaches a server at any step.
One side effect of the approach is worth knowing. An SVG decoded through an Image element runs in a restricted mode: scripts inside the file never execute, SMIL and CSS animations render as their first frame, and references to files outside the markup stay unresolved. Security-wise that is the behavior you want. Visually it is the reason a small number of files render differently here than in a browser tab.
Round multiples of the source keep strokes on whole pixels, which matters most on thin line icons.
| Use | Pixel target | Reason |
|---|---|---|
| Favicon source | 512 x 512 | Build steps derive 16, 32, and 180 px variants from one clean master |
| App store icon | 1024 x 1024 | Both stores reject anything smaller for the listing asset |
| Docs or README graphic | 2x the display width | Holds up on retina screens without a srcset |
| Open Graph preview | 1200 x 630 | Logo art needs padding added in the SVG first, since the ratio is wide |
| Print at 300 DPI | Inches x 300 | A 3 inch wide badge becomes 900 px |
Most bad conversions trace back to the SVG depending on something outside itself.
The converter scans the markup for these patterns and lists what it found before you download, so a wrong-looking PNG has an explanation next to it. Format problems in the markup itself are easier to spot after a pass through the SVG formatter.
An SVG has no background of its own, and PNG carries an alpha channel, so transparent output is the default here. Keep it when the icon sits on a surface you control.
Pick a solid fill for two situations. Email clients force their own background behind images, and a transparent logo with dark strokes disappears in dark mode. Antialiased edges also pick up a faint halo when semi-transparent pixels blend against a surface far from the color they were drawn on, so baking in the real background color gives cleaner edges than letting the client composite it.
For the opposite direction, or for embedding a vector inside CSS, the SVG to Base64 encoder skips the raster step entirely.
Answers specific to this converter and to browser rasterization.
True vector output stays sharp at any target. Blurring points to a bitmap embedded inside the SVG, which scales like any other raster image. Open the file in a text editor and look for an image tag carrying a base64 payload.
Convert text to paths before export. An SVG decoded as an image has no access to web fonts, so type falls back to whatever the system provides.
Yes. Leave the background set to transparent and the PNG keeps its alpha channel. Choose a color when you need the background baked into the file.
Yes. Open the paste panel and drop in the complete svg element, opening tag included. A fragment without the root element fails to parse and the status line says so.
Render 512 px square and let your favicon generator or build step produce the smaller variants. Scaling a small raster down loses edge clarity that a fresh vector render preserves.
No. Reading the markup, drawing to canvas, and saving the PNG all run in this browser tab. The page keeps working after you go offline.
A blank PNG usually means the SVG relies on external files or a foreignObject block. Inline those assets, or re-export from a vector editor with everything embedded.
