SVG to PNG Rasterizer
Rasterizing an SVG converts resolution-independent instructions into a fixed grid of pixels. That is necessary whenever the destination cannot handle vectors, and it is a permanent downgrade, so it is worth understanding what the browser rasterizer will and will not do with your file.
How to use it
- Drop in a .svg file.
- The SVG is loaded into an image element and drawn to a canvas at its intrinsic size.
- The .png downloads immediately.
Fonts and external references will not resolve
This is the single most common surprise, and it is a security boundary rather than a bug. An SVG rendered through an image element is loaded in a restricted context that cannot make external network requests. No web fonts, no linked stylesheets, no referenced raster images.
The visible symptom is text rendered in a default serif face instead of your brand font, or missing entirely. The fix is to convert text to outlines in your design tool before exporting. In Illustrator that is Type then Create Outlines; in Inkscape it is Path then Object to Path; in Figma it is Flatten. Once text is paths, it renders identically everywhere and no longer depends on font availability.
The same restriction applies to any <image> element pointing at an external URL, and to CSS loaded via an external stylesheet link. Styles written inline or inside a <style> block within the SVG itself do apply.
Output dimensions come from the SVG, not from you
The PNG is rendered at the intrinsic size of the SVG, which is determined by its width and height attributes, or failing those by its viewBox. An SVG declaring width="24" produces a 24 pixel PNG, which is rarely what anyone wants when they need an asset for a presentation.
If you need a larger raster, edit the width and height attributes in the SVG before converting. Because the source is vector, scaling up before rasterizing costs nothing in quality, whereas scaling up the resulting PNG afterwards is straightforwardly lossy. Setting width and height to four times the nominal size is the usual approach for retina-density assets.
An SVG with no width, height, or viewBox has no intrinsic size at all, and rendering falls back to a default. Adding a viewBox fixes that and is good practice regardless.
When not to rasterize
If the destination supports SVG, keep the SVG. It will be smaller for most icons and diagrams, it stays sharp at every zoom level and pixel density, and its text remains selectable and accessible to screen readers.
Rasterize when you are handing the asset to something that genuinely cannot cope: an email client, a print workflow that rejects vectors, a social preview image, or a legacy document format. Those are real constraints. Rasterizing merely because PNG feels more familiar throws away the main advantage of the source file.
At a glance
| Accepted input | .svg |
|---|---|
| Output | .png with transparency preserved |
| Output size | Intrinsic width and height, or viewBox |
| External resources | Not loaded, by browser security policy |
Frequently asked questions
My text rendered in the wrong font, or vanished. Why?
SVGs rendered this way cannot load external fonts, by design. Convert text to outlines before exporting and the shapes will render exactly as drawn.
How do I get a bigger PNG?
Edit the width and height attributes in the SVG before converting. Scaling the vector before rasterizing is free; scaling the PNG afterwards is lossy.
Is the transparent background preserved?
Yes. PNG supports alpha, and areas with no fill stay transparent. Add an explicit background rectangle to the SVG if you want an opaque result.
My SVG references an external image that did not appear.
External references are blocked in this rendering context for security reasons. Embed the image as a Base64 data URL inside the SVG, and it will render.
Read more
Choosing an image format — Why the same photograph can be 40 KB or 4 MB depending on a single dropdown, and how to choose deliberately.