image tool
SVG to PNG
An SVG that exports wrong usually told you why in its own markup: a font it names but does not carry, an image it links to but cannot fetch, a missing viewBox. This reads the file, reports what it found, then exports the PNG at a size you choose.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Drop the SVG, or paste the markup
Both work. The file is read as text in this page, and nothing is sent anywhere.
- 2
Read what the file declares
Declared width and height, resolved to pixels if they are in millimetres or points, the viewBox, and the size the browser will actually rasterise it at.
- 3
Read the preflight
It names every font in the file and tells you which ones are missing from this machine, lists external references that will not load, and flags a missing namespace or viewBox.
- 4
Pick a scale and export
1x, 2x and 3x each show the exact pixel size you will get, so you are choosing a result rather than guessing a multiplier.
Why the report comes before the export
The failures people hit converting an SVG are not conversion failures. The text reflows because a font was named but never embedded. Half the artwork is missing because it was a linked image. The whole thing comes out blank because the root element lost its namespace on the way through a build step. Every one of those is visible in the markup before anything is drawn, so the file is read first and the findings are put where you cannot miss them. Fixing the SVG is almost always better than fighting the PNG.
The font check is the useful one
An SVG that uses text refers to fonts by name. When it is drawn as an image, the renderer needs that font installed locally or embedded in the file, and there is no fetching a webfont. The tool measures each named family against the generic fallbacks and tells you outright whether it is present on this machine. If it is missing, your PNG is already wrong. If it is present, your PNG is right here and wrong on a colleague's laptop. Either way the fix is the same: convert text to outlines before you export the SVG.
Millimetres, points and the 96 pixel inch
Drawing tools often write a physical size into the SVG root, so you get width="60mm" rather than a pixel count. The browser resolves that at 96 CSS pixels to the inch, which makes 60mm exactly 226.77 pixels, a point four thirds of a pixel and a pica sixteen. The spec sheet shows the raw attribute and the resolved pixel value side by side, so the number you are exporting at is never a surprise.
Export at the size you will use
A PNG has one fixed resolution. Too small and it looks soft, far too large and every page load carries bytes nobody sees. The rule that holds is to export at the display size, doubled for a high density screen, and stop there. A logo shown at 120 pixels wants a 240 pixel PNG. That is why the scale buttons print the resulting pixel size on themselves rather than just saying 2x.
Limits
- Fonts render only if they are installed here or embedded in the file. The preflight tells you which, but installed here does not mean installed on anyone else's machine.
- External images and stylesheets referenced by URL will not load, because an SVG drawn as an image cannot fetch anything.
- A foreignObject holding HTML is dropped by most renderers when an SVG is used as an image, so that part will be missing.
- An animated SVG is frozen at its opening frame, because a PNG is one frame and image rendering is static.
- An SVG with no width, height or viewBox has no natural size, so the browser falls back to 300 by 150.
What it does not do
- It does not go the other way. A PNG cannot be turned back into real vector artwork.
- It does not edit, optimise or recolour the SVG. It reports and rasterises, nothing else.
- It does not run any script inside the file, which is deliberate rather than a gap.
Questions people ask
Is my file uploaded?
No. The SVG is read as text in your browser, parsed inert, and drawn onto a canvas in this tab. The page makes no network request after it loads. Brand artwork under embargo is safe here, and you can confirm it yourself by watching the network panel while you convert.
Why does the text look different in the PNG?
The SVG names a font that is neither embedded in it nor installed on this machine, so a fallback was substituted and the spacing shifted. The preflight says so explicitly, by name. The permanent fix is to convert text to outlines in your drawing tool before exporting, which turns the letters into shapes.
Why is part of my artwork missing?
Almost always an external reference. An SVG drawn through an image element runs in a restricted mode with no scripting and no network access, so a linked bitmap or an imported stylesheet simply is not there. The preflight lists them. Embed the image as a data URI inside the SVG and it will appear.
Can I paste markup instead of a file?
Yes. Open the paste panel above the drop zone, drop your markup in and press the read button. It is parsed exactly the same way. That is the quicker path when the SVG is already on your clipboard from a code editor or a design tool, rather than sitting somewhere as a file.
Is it safe to open an SVG somebody sent me?
Here, yes. An SVG can carry script, which is why it is treated as untrusted input: the markup is parsed into an inert document that is never inserted into this page, and rendering goes through an image element where scripting is disabled. Nothing in the file can run.
What size should I export?
The size it will be displayed at, doubled if it needs to stay sharp on a high density screen. For an app icon, use the exact size the platform documents. Going far larger only makes the file heavier without making it look better, since the extra detail is thrown away on the way down.
Why is my exported PNG all black?
Your artwork probably uses currentColor for its fills. That keyword inherits the text colour of whatever contains the SVG, and an SVG drawn as an image has no containing page to inherit from, so it resolves to black. The preflight flags it. Set a real fill value in the file.
Build a deck around this artwork
Take what you made here into presentations.
Create a presentation with OneCraftRelated tools
- Convert an imageSee your own picture measured in PNG, JPEG and WebP before you choose, then convert. Transparency is handled deliberately, and HEIC is explained.
- Image resizerResize a batch of images to an exact width, height or percentage. Fit, fill or stretch, with a stepped downscale that keeps detail. Nothing is uploaded.
- Favicon generatorDrop one image and see your favicon in a browser tab, a bookmarks bar, a Google result and a phone home screen, then download the ICO, PNGs and manifest.
- Image to base64Turn an image into a data URI for CSS, HTML, Markdown or JSON, with the character count, the gzipped cost, and a verdict on whether it should be inlined.
Written and checked by the OneCraft team. Last checked .