SVG to PNG Conversion Complete Guide

SVG (Scalable Vector Graphics) and PNG (Portable Network Graphics) serve different purposes. SVG is resolution-independent and ideal for logos and icons, while PNG is a raster format with fixed pixels — perfect for screenshots, photos with transparency, and compatibility.

Converting SVG to PNG requires choosing the right canvas size and pixel density. The same SVG can produce a crisp 32×32 favicon or a 4000px banner — the conversion settings determine the final quality.

SVG vs PNG: key differences

SVG is XML-based and stores shapes as mathematical paths — it scales infinitely without quality loss. PNG is a raster format: each pixel has a fixed color. SVGs are editable and tiny for simple graphics; PNGs are universally supported and required by many platforms that do not render SVG. The choice depends on the destination: web browsers support both, but email clients, social media, and office documents often require PNG.

When to convert SVG to PNG

Convert SVG to PNG when: (1) the target platform does not support SVG — email clients, Word, PowerPoint, older CMS; (2) you need a fixed-size asset for social media profile images or Open Graph images; (3) you are generating favicons at 16×16, 32×32, or 180×180 for Apple Touch Icons; (4) the SVG uses filters or effects that browsers render inconsistently; (5) you need to combine the SVG with a raster background.

Choosing the right resolution

Resolution is the key decision. For web use at standard density, 1× (72 DPI) is sufficient. For retina/HiDPI screens, export at 2× (144 DPI) or 3×. For print, use 300 DPI minimum. A practical rule: multiply the display size in pixels by your density multiplier. A 200×200px display icon → export 400×400px for 2× screens. Always export at the largest needed size and scale down — never scale up a raster.

Transparency and alpha channel

PNG supports full alpha transparency (0–255 per pixel), making it ideal for logos on variable backgrounds. When converting SVG to PNG, ensure the SVG has no background fill (`background: none` or absent `<rect>` element). The conversion tool should preserve the alpha channel. If the output has a white background, the converter is filling transparent pixels — check the export settings for a transparent canvas option.

Export settings and quality

PNG is lossless — there is no quality slider like JPEG. Compression level (0–9) affects file size but not visual quality. Higher compression = smaller file, slower encoding. For web delivery, compression level 6–8 is a good balance. For archiving or editing sources, use level 0–3. The bit depth matters too: PNG-24 (24-bit color + 8-bit alpha) handles gradients and complex colors; PNG-8 (256 colors) is smaller but limited.

Common use cases

Favicons: export at 16×16, 32×32, 48×48 (ICO) and 180×180 (Apple Touch). Social media: Open Graph images at 1200×630, Twitter cards at 800×418. App icons: export multiple sizes (48, 72, 96, 144, 192px for Android; 29, 58, 87, 120, 180px for iOS). Email signatures: 200–300px wide at 2× for retina. Presentations: match slide dimensions (1920×1080 for 16:9).

FAQ