SVG to PNG Converter

About SVG to PNG Converter

How Does SVG to PNG Conversion Work?

The conversion uses the browser's built-in SVG renderer and the HTML5 Canvas API. The SVG markup is parsed, dimensions are set to the target output size, and the browser renders it onto an offscreen canvas. The canvas content is then exported as a PNG file with the chosen background settings. Because the browser's native rendering engine handles the rasterisation, the output is pixel-perfect at the chosen resolution.

Step-by-step process:

Step	What Happens
1. Input SVG	Paste code or upload a .svg file
2. Parse and preview	Browser renders the SVG and displays a live preview
3. Set output size	Choose a scale multiplier (1x-4x) or enter exact pixel dimensions
4. Choose background	Transparent (default) or any solid colour via the colour picker
5. Render to Canvas	SVG drawn at target dimensions onto an offscreen Canvas element
6. Export PNG	Canvas exported as a PNG file with your chosen settings

SVG (Scalable Vector Graphics) is a W3C standard based on XML, first published in 2001 and updated to SVG 2 in the current W3C specification. Around 63% of all websites use SVG imagery as of 2025, according to W3Techs. Despite that widespread adoption, many platforms, email clients, and mobile apps still do not accept SVG files, which is the main reason conversion to PNG remains necessary.

Scale Options and Output Sizes

The scale multiplier determines how many pixels are generated relative to the SVG's viewBox dimensions. A 100x100 SVG at 2x becomes 200x200 - four times the total pixel count:

Scale	Example (100x100 SVG)	Pixels	Best For
1x	100 x 100 px	10,000	Standard displays, web use at intended size
2x	200 x 200 px	40,000	Retina/HiDPI displays, iOS and macOS assets
3x	300 x 300 px	90,000	iPhone 3x assets, very high DPI screens
4x	400 x 400 px	160,000	Print, large format, maximum detail
Custom	Any dimensions	Varies	Specific platform requirements (app icons, social media)

Worked example: A company logo designed at 200x80 in SVG needs a 2x version for Retina displays. Setting the scale to 2x produces a 400x160 PNG. The total pixel count jumps from 16,000 to 64,000. For the same logo exported at 4x (800x320), the pixel count reaches 256,000 - much sharper for print but a larger file.

App Icon and Favicon Size Requirements

One of the most common reasons to convert SVG to PNG is generating app icons and favicons at specific sizes. Apple, Google, and web standards each have their own requirements:

Platform	Required Size(s)	Notes
iOS App Store	1024 x 1024 px	Single master PNG, no transparency allowed. Xcode generates all device sizes from this. As of 2025, Apple's Liquid Glass design applies layered visual effects on top.
Android Play Store	512 x 512 px	Adaptive icon canvas is 108x108 dp (432x432 px at XXXHDPI). Play Store listing uses 512x512.
Web favicon	16x16, 32x32, 48x48	Modern browsers also accept SVG favicons directly, but PNG fallbacks are still standard.
Apple Touch Icon	180 x 180 px	Used when saving a website to the iOS home screen.
PWA Icon	192x192, 512x512	Required in the web app manifest for installable web apps.
Windows Tile	150x150, 310x310	Used in Windows Start menu tiles.

Use this tool's custom dimensions mode to export at any of these sizes. For generating favicons from a larger image, the favicon generator can output all the standard sizes at once.

Background Options and Transparency

PNG supports full alpha-channel transparency, which is one of its key advantages over JPEG. When converting from SVG, there are three background choices:

Option	Result	Best For
Transparent	PNG with alpha channel, no background	Logos, icons, overlays, compositing onto other images
White	Solid white background	Documents, email (many email clients ignore transparency), social media platforms that fill transparent areas with black
Custom colour	Any solid colour picked from the colour wheel	Matching a specific page background, branded materials

Technically, PNG stores transparency as an alpha value per pixel. At 8-bit colour depth (the standard), each pixel has four channels: red, green, blue, and alpha, totalling 32 bits per pixel. An alpha value of 0 means fully transparent, and 255 means fully opaque. This is defined in the PNG specification maintained by the W3C, which uses DEFLATE compression (the same algorithm behind ZIP files) to keep file sizes reasonable.

SVG vs PNG: When to Use Each Format

SVG and PNG solve different problems. SVG is ideal for graphics that need to scale, while PNG is the go-to format for universal compatibility. Here is a direct comparison:

Factor	SVG	PNG
Scaling	Infinite - looks sharp at any size	Fixed resolution - blurs when enlarged beyond native size
File size (simple graphics)	Very small, often under 5 KB for icons and logos	Larger - a 500x500 icon might be 20-50 KB
File size (complex graphics)	Can grow large with thousands of paths	Often smaller for highly detailed illustrations
Browser support	All modern browsers since IE9	All browsers, including legacy ones
Editable	Yes - XML text, editable in any text editor or vector tool	No - pixel data only, requires an image editor
Platform support	Limited - many apps, CMS platforms, and email clients reject SVG	Universal - accepted on every platform
Transparency	Yes, built into the format	Yes, via alpha channel (8 or 16 bits per channel)
Animation	Supports CSS and SMIL animation natively	Static only (APNG exists but has limited support)
Accessibility	Can include title and desc elements for screen readers	Relies on alt text in the HTML img tag

The rule of thumb: keep assets in SVG as the source file for editing and scaling. Export to PNG when a specific platform requires raster images, when sending graphics in email, or when file uploads do not accept vector formats. If the output needs lossy compression rather than lossless, consider converting the PNG to JPEG using the JPG to PNG converter (which also works in reverse) or the image compressor.

Canvas Size Limits by Browser

The conversion relies on the HTML5 Canvas API, and each browser enforces maximum canvas dimensions. Going over these limits produces a blank or corrupted image. Here are the practical limits:

Browser	Max Width/Height	Max Total Pixels
Chrome	32,767 px	268,435,456 (approx. 16,384 x 16,384)
Firefox	32,767 px	472,907,776 (approx. 21,744 x 21,744)
Safari (macOS)	32,767 px	16,777,216 (4,096 x 4,096)
Safari (iOS)	4,096 px	16,777,216 (4,096 x 4,096)

For reliable results across all browsers, keep the output under 4,000 pixels per side. Chrome and Firefox can handle much larger canvases, but Safari (especially on iPhones and iPads) has a hard limit of roughly 16 million total pixels. If the canvas exceeds this, drawing commands silently fail and the exported image will be blank.

Tips for Clean SVG to PNG Conversion

A few common issues can trip up the conversion process. Most of them come down to how SVGs reference external resources:

• Embed fonts: SVGs that link to external Google Fonts or system fonts may render with a fallback font during canvas conversion. Convert text to paths in your vector editor (Illustrator: Type > Create Outlines, Figma: Flatten) or embed the font as a base64 data URI inside the SVG.
• Inline styles: External CSS stylesheets referenced by the SVG will not load during canvas rendering. Move all styles to inline style attributes or an internal style block within the SVG.
• Embed images: If the SVG includes linked raster images (via xlink:href or href pointing to external URLs), these will not render on the canvas due to cross-origin restrictions. Convert linked images to base64 data URIs inside the SVG.
• Set a viewBox: SVGs without a viewBox attribute make it harder to determine the correct output dimensions. Always include a viewBox (e.g., viewBox="0 0 800 600") so the converter can calculate the aspect ratio and scale correctly.
• Check for animations: The canvas captures a single static frame. If the SVG uses CSS animations or SMIL, the exported PNG will show whatever state the SVG is in at the moment of rendering.

How PNG Compression Works

PNG uses lossless DEFLATE compression, the same algorithm used in ZIP archives. Unlike JPEG, which discards visual data to achieve smaller files, PNG preserves every pixel exactly. The compression works in two stages: first, a prediction filter compares each pixel to its neighbours and stores the difference (which tends to be small and compresses well), then DEFLATE encodes the filtered data using a combination of LZ77 pattern matching and Huffman coding.

The result is that PNGs with large areas of solid colour compress very well, while PNGs with complex gradients or photographic content compress poorly. A 1000x1000 solid-colour PNG might be just 2-5 KB, while a 1000x1000 photo exported as PNG could be 2-5 MB. For photographic content, JPEG is almost always a better choice. PNG is ideal for graphics with flat colours, text, sharp edges, and transparency - exactly the kind of content that comes from SVG files.

If the resulting PNG needs resizing afterward, the image resizer can scale it to any dimensions. For batch processing or generating multiple sizes from one source, consider keeping the original SVG and running multiple conversions at different scales.

Sources

• W3C - Scalable Vector Graphics (SVG) 2 Specification
• W3C - PNG Specification: Deflate/Inflate Compression
• W3Techs - Usage Statistics of SVG for Websites
• MDN Web Docs - Canvas Element
• SplitMetrics - iOS App Icon Sizes and Requirements