About SVG → PNG

Convert SVG to PNG with scaling. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Export an SVG icon or illustration to PNG for use in environments that do not support SVG (email, PowerPoint, some legacy apps).
• Generate OG images and Twitter Card images from SVG templates at precise pixel dimensions.
• Convert diagram SVG exports (Figma, draw.io) to PNG for embedding in documents.
• Create retina-density PNG sprites from SVG source files.

Tips

• Set explicit width and height attributes on the SVG root element before conversion — SVGs without dimensions produce PNG output at default browser viewport size, which varies by renderer.
• For retina/HiDPI output, export at 2x or 3x pixel density and scale down in the target application — this preserves sharpness on high-DPI displays.
• Embed fonts as Base64 or use web-safe fonts before converting — SVGs referencing external font files produce PNGs with font fallbacks, not the intended typeface.

Fun Facts

• SVG (Scalable Vector Graphics) was developed by the W3C and first published as a recommendation in 2001. It took until 2011 (SVG 1.1) for all major browsers to reliably support it.
• SVG files can contain JavaScript, CSS, and even HTML — making them a potential attack vector when served without appropriate Content-Security-Policy headers if SVG files accept user input.
• The SVG file for the original Wikipedia logo is just 28KB and scales from favicon size to billboard resolution without quality loss — a canonical demonstration of why vector formats outperform raster for logos.

FAQ

What resolution should I use when converting SVG to PNG?

For web (72–96 DPI): use 1x or 2x the display dimensions. For print (300 DPI): calculate the PNG pixel dimensions as print size in inches × 300. For favicons: export all required sizes (16, 32, 48, 64, 128, 256px).

Why does my SVG look different after conversion to PNG?

Common causes: missing or fallback fonts, clipping of elements outside the viewBox, rendering differences in gradient/filter effects, and missing SVG namespace declarations. Inspect the SVG in a browser first to confirm it renders as intended.