SVG vs PNG — which should you export?

Quick picker

• Logos / icons / diagrams → SVG
• Photographs / UI screenshots / bitmap assets → PNG
• You need CSS-driven colour or shape changes → SVG
• The file will land in email, legacy tooling, or OG previews → PNG

Side-by-side

Property	SVG	PNG
Approach	Vector (XML)	Lossless raster
Scaling	Infinite	Fixed resolution
Transparency	Yes	Yes
File size	Tiny for simple shapes; can explode for complex art	Moderate
Animation	SMIL / CSS / JS	APNG only
Security	Can embed <script> — sanitize when user-uploaded	Effectively inert

When to pick SVG

• App icons across multiple densities — one file replaces a directory of PNGs.
• Responsive diagrams that must remain crisp on resize.
• UI controls where CSS variables drive the palette.

When to pick PNG

• Environments that don't render SVG reliably (old mail clients, embedded systems, OG fallbacks).
• Continuous-tone raster art (photos).
• Print output that demands fixed high-DPI pixels.

Operational tips

• <img src="...svg"> is opaque to external CSS. Inline the SVG, or use CSS mask-image to recolor.
• Heavy PNGs? Use pngquant for quantisation or switch to WebP where supported.