SVG rasterises to PNG by flattening vector paths into a fixed-size pixel grid (e.g. 256 × 256 px).PNG preserves transparency from the SVG paths and works in every editor. You lose scalability and animation, so keep the original SVG for re-export at different sizes.
SVG vs PNG comparison
| Property | SVG | PNG |
|---|---|---|
| Format type | Vector (XML paths) | Raster (pixel grid) |
| Scalable to any size | Yes (infinite zoom, sharp) | No (rasterise per resolution) |
| Typical logo file | 1-10 KB | 30-50 KB |
| Editable in text editor | Yes (plain-text XML) | No (DEFLATE binary) |
| Year introduced | 2001 (W3C SVG 1.0) | 1996 (RFC 2083) |
| Browser support | Universal (~100%) | Universal (~100%) |
| Best for | Logos, icons, diagrams | Fixed-size raster for editors |
| Alpha channel | Yes (per-path opacity) | Yes (RGBA) |
| Animation | Yes (SMIL + CSS + JS) | No (use APNG) |
| CSS/JS interactive | Yes (DOM-addressable) | No |
| Color depth | 24-bit + gradients + filters | 8 or 16 bits/channel |
| Conversion method | Rasterize at chosen resolution | Direct lossless compression |
SVG to PNG — Lossless Browser-Side Vector Rasteriser
Rasterise SVG vector graphics (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011 / W3C SVG 2 Candidate Recommendation 4 October 2018, with active development continuing as the Editor's Draft at svgwg.org/svg2-draft) to lossless PNG (W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004) using the WHATWG HTML Living Standard Canvas 2D Context drawImage() pipeline (html.spec.whatwg.org/#dom-context-2d-drawimage). The browser loads the SVG into an HTMLImageElement, draws it onto a canvas at your chosen target dimensions, and serialises the bitmap via HTMLCanvasElement.toBlob('image/png') — DEFLATE compression per RFC 1951 (Deutsch, May 1996, LZ77 + Huffman with 32 KB sliding window) preserves every pixel exactly. SVGs loaded via the img element are processed in 'secure static mode' or 'secure animated mode' per the SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) conformance rules — scripts and external resources are blocked, so rasterisation cannot execute SVG-embedded JavaScript. PNG's RGBA mode preserves the SVG's transparent regions byte-exactly, so logos, icons, and illustrations with see-through backgrounds round-trip cleanly. Quick presets for 1× / 2× / 4× the SVG's native viewBox dimensions cover the common Retina / hi-DPI use case. Rasterisation occurs in the canvas pixel buffer's sRGB encoding (IEC 61966-2-1:1999) at 8-bit precision regardless of the SVG's declared colour profile. Files never leave the device.
How to convert SVG to PNG
- Drop a .svg file onto the tool or click to browse. The browser parses the SVG via its built-in renderer (loaded as <img> in secure mode — scripts and external resources blocked).
- Pick output dimensions. The 1× / 2× / 4× presets render at multiples of the SVG's viewBox dimensions — 2× covers most Retina displays, 4× covers print and large-format use.
- drawImage() copies the rasterised bitmap to a canvas at the target dimensions, preserving the SVG's alpha channel byte-exactly.
- Canvas toBlob('image/png') serialises pixels via DEFLATE per RFC 1951 — the encode step is fully lossless from the rasterised bitmap.
- Download the PNG. The original SVG stays on disk untouched — files never leave the device.
Common use cases
- Producing raster PNG logos from SVG sources for platforms that reject .svg uploads (most non-design CMSes, social media, app store assets).
- Rendering SVG icons at the exact pixel sizes a design system uses (16 / 24 / 32 / 48 / 64 / 128 px) without re-exporting from a desktop editor.
- Creating PNG variants of an SVG icon set at 1× / 2× / 4× for app icon manifests, favicon bundles, or responsive image srcset entries.
- Exporting SVG artwork as lossless PNG for editorial layout, print pre-press, or archival where re-encoding artefacts are unacceptable.
- Producing PNG fallbacks for environments without SVG support (older browsers, certain email clients) while keeping the SVG master for future re-rasterisation.
Frequently asked questions
What size should I render at?
Pick twice the display size for Retina / high-DPI screens, or the exact pixel size the destination expects. The 1× / 2× / 4× presets multiply the SVG's viewBox dimensions — 1× is screen-density-naive, 2× covers most Retina displays, 4× covers print and large-format. Going larger than needed inflates the PNG file size without visible benefit because the destination will downscale anyway.
Will the PNG preserve transparency?
Yes, byte-exactly. SVG transparent regions map directly to PNG's RGBA mode (8-bit alpha per pixel) or tRNS chunk (per-entry 8-bit alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) per W3C 2nd Edition. The Canvas 2D Context conversion path preserves alpha bytes precisely: render SVG → drawImage onto canvas with alpha → toBlob('image/png') retains every transparent pixel. Logos and icons with see-through backgrounds round-trip cleanly.
Are scripts inside the SVG executed during conversion?
No. SVGs loaded via the <img> element are processed in 'secure static mode' or 'secure animated mode' per W3C SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) conformance rules — scripts, external HTTP loads, and DOM scripting are all blocked. This tool uses the <img> path deliberately so a malicious SVG cannot exfiltrate data or run code during rasterisation. SVGs loaded via <object> or inline <svg> would run scripts; this tool does not use those paths.
Can I render at any aspect ratio?
The tool keeps the SVG's native viewBox aspect ratio so the artwork does not stretch or squash. For non-native ratios, rasterise first at the SVG's natural ratio then crop with the crop-image or aspect-ratio-crop tool. SVG's preserveAspectRatio attribute (default 'xMidYMid meet') governs how the viewBox maps to the canvas; the tool respects that attribute as declared.
What about SVGs containing foreignObject?
SVGs that include <foreignObject> elements taint the canvas (origin-clean = false) per WHATWG html.spec.whatwg.org issue #10641, which causes toBlob() to throw a SecurityError. The conversion will fail. Plain SVGs (paths, shapes, text, gradients, filter primitives) rasterise cleanly. If your SVG has foreignObject content, remove or pre-render it in a desktop editor before bringing it into this tool.
Lossless rasterisation: why PNG is the natural target — and the secure-mode + foreignObject caveats
PNG is the lossless target for SVG → raster because three properties match: (1) PNG's RGBA mode preserves the SVG's alpha channel byte-exactly via the tRNS chunk (per-entry 8-bit alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) or full 8-bit alpha (RGBA mode) per W3C 2nd Edition; (2) PNG uses lossless DEFLATE compression so no quantisation artefacts get baked into the output (unlike JPG via Annex K quantisation); (3) PNG decodes universally across every editor, OS, CMS, and print pipeline since 1996. The conversion is a two-step pipeline: the browser parses the SVG into an HTMLImageElement applying CSS, gradients, filter primitives, and font fallbacks at the target resolution; drawImage() copies that bitmap to a canvas; toBlob('image/png') serialises pixels via the browser's built-in DEFLATE encoder. Two security caveats apply: (a) SVGs loaded via <img> run in secure mode — scripts, external HTTP loads, and DOM scripting are blocked. The tool uses the <img> path deliberately so a malicious SVG cannot execute code during rasterisation. (b) SVGs containing <foreignObject> taint the canvas (origin-clean = false) per WHATWG html.spec.whatwg.org issue #10641, which causes toBlob() to throw a SecurityError. Plain SVGs (paths, shapes, text, gradients, filter primitives) rasterise cleanly; if your source contains foreignObject content, pre-render it in a desktop editor first. Output PNG file size is typically 2–5× larger than the source SVG for icon-style content (PNG's pixel grid is less compact than vector paths) but PNG buys universal compatibility plus the lossless preservation step that JPG cannot offer.
- Source SVG parsed per W3C SVG 1.1 Second Edition (16 August 2011) + SVG 2 Candidate Recommendation
- Browser-side rasterisation via WHATWG Canvas drawImage with SVGImageElement (secure static / animated mode)
- Custom output width and height + quick presets (1× / 2× / 4× the SVG viewBox)
- Aspect-ratio lock toggle — preserve the SVG's native viewBox proportions
- Lossless PNG output via HTMLCanvasElement.toBlob('image/png') — every pixel preserved exactly
- Alpha channel preserved end-to-end — SVG transparent regions → PNG RGBA mode (8-bit precision)
- PNG output uses DEFLATE compression per RFC 1951 Deutsch (May 1996, LZ77 + Huffman, 32 KB sliding window)
- PNG specification: W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 (universal raster format)
Free. No signup. No file uploads. Ads via AdSense (consent required).
Sources (6)
- W3C (SVG Working Group) (2011). Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation 16 August 2011 (w3.org/TR/SVG11/) — source SVG bitstream specification; defines path/shape/text/filter elements and the ViewBox + preserveAspectRatio scaling that lets the same SVG render at 1×, 2×, or 4× target resolutions without precision loss.
- W3C (SVG Working Group) (2018). Scalable Vector Graphics (SVG) 2. W3C Candidate Recommendation 4 October 2018 (w3.org/TR/SVG2/; active development continues as the Editor's Draft at svgwg.org/svg2-draft, last updated September 2025) — successor spec for modern SVG features used by browser-side SVG renderers.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() with SVGImageElement. html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser rasterisation: load SVG into HTMLImageElement → drawImage at target pixel dimensions → toBlob('image/png') retains every transparent pixel via PNG's RGBA mode. Issue github.com/whatwg/html/issues/10641 (filed September 2024) tracks the normative discussion of SVG-as-Image canvas-tainting interop when the source contains <foreignObject>.
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — target lossless raster format with full alpha channel preserved end-to-end from the SVG's transparent regions.
- Deutsch, P. (1996). DEFLATE Compressed Data Format Specification version 1.3. RFC 1951, IETF (May 1996, Aladdin Enterprises — LZ77 + Huffman; 32 KB sliding window) — PNG IDAT compression algorithm applied to the rasterised SVG output.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; SVG colour values rasterise into sRGB in the PNG output.
These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.