maratoolHow to convert SVG to PNG at 1x, 2x, 3x, and 4x
Paste the markup and type the pixel size you need. The PNG comes out of your own browser, with no design app in the loop.
Vectors are the right format right up until something refuses to take one. Slide decks, app store listings, README badges, email clients, older CMS uploaders: all of them want pixels. The SVG to PNG converter rasterizes the vector at whatever size you name, so a logo can go out at 512, 1024, and 2048 from the same source.
How it works
- Paste the markup into the box, or switch to the upload tab and drop a .svg file. The upload path reads the text and drops it into the same editor.
- Set the size. Width and height start at the intrinsic size of the artwork, the aspect lock fills in the second number when you type the first, and the 1x through 4x buttons multiply the original dimensions.
- Pick a background, which starts transparent, then download. The preview updates as you type and the file is named after the source plus the output dimensions.
Why 2x and 3x are not the same as scaling up
Exporting at 1x and then enlarging the PNG in an image editor gives you soft edges, because the pixels that were not there have to be invented. This tool does it the other way round: the canvas is sized first, then the vector is drawn into it. At 3x the browser redraws every curve at 1536 by 1536 rather than stretching a 512 pixel bitmap. Edges stay crisp because they were never rasterized at the smaller size.
That is also why the multipliers are worth using for anything shipping to a phone. A 44 pixel icon on a 3x display needs a 132 pixel asset to look right, and the difference is obvious side by side.
The SVG with no size
An SVG only has an intrinsic size if it declares width and height, or a viewBox. Plenty of icons exported from Figma or hand-trimmed for the web have neither, and a browser treats those as zero by zero. Loading one into an <img> and drawing it produces an empty canvas, which is the usual explanation for "my export came out blank".
When the tool sees that case it falls back to 512 by 512 and says so above the size fields. The output is still correct, it just needs you to decide what "full size" means. If the SVG has a viewBox but no width and height, the viewBox numbers are used, which is almost always what you want.
What does not come across
Rasterizing through a blob URL puts the SVG in its own isolated document, and browsers lock that down:
- External references fail. An
<image href="https://...">or a stylesheet loaded with@importwill not be fetched, and the tool reports the render failure rather than handing you a half-drawn PNG. - Web fonts are not available. Text styled with a font that lives in your CSS falls back to a system font. Convert text to outlines before exporting if the typeface matters.
- Scripts inside the SVG never run. Anything animated by JavaScript renders in its initial state.
Everything embedded in the file itself is fine: gradients, filters, clip paths, masks, base64 images, and @font-face rules with a data URI source.
Shrink the source first
If the SVG came out of a design tool it probably carries editor metadata, empty groups, and coordinates with twelve decimal places. None of that changes the PNG, but it does slow the parse on a large file. The SVG optimizer cleans it up. Going the other direction, from a bitmap to a vector, is the job of the image tracer.