Convert SVG to PNG
A vector has no pixel size of its own until somebody gives it one, so the only decision that really matters here is how many pixels wide the PNG should be. Make it deliberately. You are not converting a picture so much as choosing, once, the resolution it is going to exist at.
Nothing is uploaded. Every image stays in this browser tab —here is how that works.
Set the size yourself, because the default is a guess
Out of the box this page fits everything inside a 1920 × 1080 box. That is a sensible default for a photograph and an arbitrary one for a vector, so set the max width — or pick something from the resize preset — to the number you actually need. 512 for a large app icon, 1200 for a social preview image, 32 or 48 for favicon sources, two or three times the CSS size for anything destined for a retina screen.
Two things behave differently here than they would for a photograph, and both are in your favour.
- Asking for more pixels than the SVG declares is not upscaling. For every other format, requesting a size above the source means enlarging a raster, which is what the “Allow upscale” checkbox governs. A vector is simply redrawn at whatever size you ask for, so a 24 × 24 icon requested at 512 comes out as a genuinely crisp 512 px PNG, and the checkbox plays no part.
- The ceiling is 4,096 pixels on the long edge. Ask for 8,000 and you get 4,096. A drawing has no natural resolution to stop at, so a limit has to exist somewhere, and a 30,000 px request would ask your browser for a multi-gigabyte canvas.
Anything the file only points at will not arrive
The SVG is handed to the browser’s own drawing engine, loaded as an image rather than as part of the page. That sandbox is what makes it safe — an SVG can contain scripts, and loaded this way they never run — and it has one consequence worth knowing about: an image-loaded SVG cannot fetch anything from the network.
So an <image href="https://…"> pointing at a remote file comes out blank. An external stylesheet is ignored. A webfont loaded from a URL never arrives, and text set in it falls back to whatever the machine has locally — which means different letterforms, different widths and different line breaks from the ones you designed. This is why an export looks perfect on the machine that made it and wrong on the next one.
The fix is the one every print workflow already knows: convert text to outlines before you export the SVG. The letters become paths, the paths are inside the file, and nothing can be substituted for them. Embedding the font as a data URI also works, in fewer places.
Doing a whole icon set
Drop the folder in at once. The size you set applies to every file, each output keeps its own name with _optimized.png on the end, and Download → Download as ZIP returns the set as one archive — so an icons/ directory of sixty SVGs comes back as sixty correctly named PNGs at a consistent size.
If you need @1x and @2x, run the same batch twice at two widths. Nothing is uploaded, so the second pass costs you a few seconds of your own CPU and nothing else. And a single icon that has to be different can have its own width set on its card without disturbing the rest of the queue.
When a PNG is the wrong deliverable
If the destination can take a vector, give it the vector: it will be smaller than any PNG of it, sharp at every screen density, and recolourable in CSS. Rasterise for the places that genuinely cannot take one — email clients, many CMS image fields, app store and ad platform specs, social preview images, print submission portals, and anything that has to be composited into a photograph.
What changes when you convert SVG to PNG
The result is pixels, and the text inside it stops being text — Trade-off
Everything the vector described — paths, live text, gradients defined mathematically — becomes a fixed grid of pixels. It cannot be edited back into shapes, the text is no longer selectable or searchable, and no screen reader can read it. Keep the original file.
Only the first frame is kept — Trade-off
The source can hold an animation and the output is a single still, so the first frame is converted and the rest are dropped. There is no warning at the point of use — the file simply stops moving — so if the motion mattered, a short muted MP4 or WebM is the format you are looking for, at a fraction of the size an animated GIF would be.
PNG is lossless from here on — Benefit
Whatever the image looks like going in is exactly what comes out, pixel for pixel, and it will stay that way through any number of further PNG saves. That makes it the right target for a master copy, a screenshot, or anything with text and hard edges — and the wrong one for a photograph you want to be small.
An SVG has no natural size unless it declares one — Note
Many vectors carry only a viewBox — an aspect ratio with no dimensions attached — and there is genuinely no correct answer to how many pixels that should become. Files that state a width and a height are rasterised at those; the rest default to 1024 pixels on the long edge. Setting a max width is how you take that decision yourself, and it is worth taking.
The quality slider does nothing here — size comes from dimensions — Note
A lossless target has no quality dial to turn, so the slider is disabled and the only lever that moves the file size is how many pixels there are. Halving the width and height quarters the pixel count, which is almost always a bigger saving than any encoder setting would have been. Set a max width you actually need rather than shipping the original dimensions.
Camera and location metadata are not carried over — Note
EXIF is dropped: the camera model, the exposure settings, the timestamp, and — the one that matters — the GPS coordinates of where the photo was taken. That is a privacy improvement for anything you are about to publish and a loss if you were relying on it for cataloguing. Orientation is the exception: it is applied to the pixels, so the image stays the right way up.
Output is sRGB — Note
Everything this tool writes is in sRGB, the colour space the web assumes. That is what makes the result look the same in a browser, a chat app and a photo viewer without an embedded profile to carry around.
Questions people ask about this conversion
What size will the PNG be if I do not set one?
It will be fitted inside the default 1920 × 1080 box. With the resize preset switched to Original there is no box at all, and then an SVG that declares its own width and height is drawn at those, while one carrying only a viewBox falls back to 1,024 pixels on its long edge — a number the tool has to pick, because the file does not say.
Can the PNG be larger than the size the SVG declares?
Yes, and it stays perfectly sharp. The vector is redrawn at the size you ask for rather than enlarged from a small raster, so the "Allow upscale" checkbox has nothing to do with it. The one hard limit is 4,096 pixels on the long edge.
Why does the text in my PNG look wrong?
Because the font is not inside the file. An SVG rendered as an image cannot fetch anything over the network, so a webfont referenced by URL never loads and the renderer substitutes whatever your machine happens to have. Convert text to outlines before you export and the problem disappears permanently.
Does the transparent background stay transparent?
Yes. Anything the SVG does not paint stays empty, and PNG records that as a real alpha channel, so the icon will sit on whatever colour you put behind it. If you wanted solid white behind it instead, convert to JPG rather than PNG.
Related
Try it with your own file
Drop an image in and see the result before you download anything.