🔷 SVG to PNG
Rasterise an SVG at any scale with no loss. Checks first for external fonts, remote images and a missing viewBox — the three things that silently ruin the output.
Choose an SVG, or drop it here
Rendered in this tab. Nothing is uploaded.
What SVG to PNG Does
An SVG has no size. It is a set of drawing instructions plus a viewBox describing proportions, which is why it stays sharp at any scale and why "convert it to PNG" is an incomplete instruction until you say how big. The useful consequence is that scaling up costs nothing: unlike every other conversion, there is no detail to lose and no blur to introduce, because the pixels are being generated rather than resampled.
The reason conversions still go wrong is that rendering an SVG through a canvas happens in a deliberately restricted mode. No network access at all: external stylesheets are ignored, remote images do not load, web fonts are not fetched, scripts do not run. A file that looks perfect in a browser tab — where all of those resources load normally — can rasterise to something quite different, and nothing warns you. So the file is scanned first and the specific problem is named.
Live text is the trap that catches people most often. An SVG referencing a typeface renders with whatever the converting machine actually has installed, so a missing font is silently substituted and the letters change shape, width and spacing. The only reliable fix is converting text to outlines in the design tool before exporting, and no converter can do it afterwards — by then the glyph identities are all that survive.
The last check is the viewBox. Without one there is no declared coordinate system to scale by, and the browser falls back to a default that is usually 300 by 150, which is where a surprising export size comes from.
How to Use SVG to PNG
- Add an SVG, or drop it onto the box
- Read any warnings — external fonts, remote images and a missing viewBox all change the output
- Set the scale; the exact output pixel size is shown as you move it
- Choose PNG, WebP or JPG, convert and save
What is ignored when an SVG is rasterised in a browser
All of these load normally when the SVG is viewed directly, which is why the difference is a surprise.
| In the file | When rendered to canvas |
|---|---|
| External stylesheet (@import or <link>) | Not loaded — those rules simply do not apply |
| Remote image (<image href="https://…">) | Not loaded — the area is blank |
| Web font (Google Fonts, @font-face with a URL) | Not loaded — a fallback face is substituted |
| <script> | Not executed — anything it would have drawn is missing |
| Inline CSS, embedded data: URIs, local fonts | Work normally |
Choosing a scale
| Scale | Use for |
|---|---|
| 1× | The declared size, when the image sits in a fixed slot |
| 2× | The usual choice — sharp on high-density displays |
| 3–4× | Large hero images, or artwork that will be cropped afterwards |
| 8×+ | Print, or when you want a master to scale down from later |
How to Read Your Result
Outline your text before exporting
It is the single highest-value habit for anyone converting SVGs. Once text is paths, the rendering is identical everywhere and no font substitution can change it. The cost is that the text is no longer editable in the SVG, so keep the editable original.
A surprising output size means a missing viewBox
If a file exports at 300 × 150 regardless of what it looks like, it has no viewBox and no width and height either. Add one in your editor rather than working around it with the scale slider — the artwork will then behave predictably everywhere, not just here.
Keep PNG for anything with transparency or flat colour
SVG artwork is usually logos, icons and diagrams: flat regions and hard edges, which is exactly what PNG compresses well and what JPG handles badly. WebP is smaller again and keeps the alpha channel.
Limitations & Accuracy Notes
- Rendering uses your browser’s own SVG engine, so anything it does not support — some filter effects, less common features — is rendered as it would be on screen, not as another renderer might.
- External resources are never fetched. That is a security property of canvas rendering, not a setting.
- Fonts must be present on this device, or embedded in the file as a data URI.
- Animated SVG is rasterised at its initial state; there is no frame selection.
- Extremely large outputs are limited by the browser’s maximum canvas size, which varies by device and is smaller on phones.
Frequently Asked Questions
What size should I export at?
Why does my text look wrong in the PNG?
My SVG uses an external stylesheet or a remote image and it came out wrong.
What is a viewBox and why does it matter?
Can I keep the transparent background?
Is my file uploaded?
References & Further Reading
- MDN — Drawing SVG images to a canvas — How an SVG is drawn through an <img>, and the restrictions that come with it
- MDN — SVG viewBox — The attribute that gives an SVG its proportions and makes scaling predictable