SVG vs PNG – Vector vs Raster Explained
SVG is a vector format — infinitely scalable, resolution-independent, and often tiny. PNG is a raster format — pixel-based, fixed resolution, and universal. For logos and icons, SVG is almost always the better choice for the web.
Format comparison
| SVG | PNG | |
|---|---|---|
| Type | Vector (mathematical paths) | Raster (pixel grid) |
| Scalability | Perfect at any size | Fixed — blurs when enlarged |
| Transparency | Yes | Yes (alpha channel) |
| File size (simple logos) | Very small (1–10KB) | Larger (50–500KB) |
| File size (complex images) | Large (paths multiply) | Efficient |
| Browser support | All modern browsers | Universal |
| Editable in code | Yes — XML, CSS-animatable | No |
| Photos | Not suitable | Good |
Use SVG for
- Logos, wordmarks, and brand icons — sharp at every display size from favicon to billboard
- UI icons in web and mobile apps
- Illustrations and diagrams with crisp lines
- Animated graphics using CSS or SMIL
- Any graphic that needs to look perfect on retina/HiDPI screens
Use PNG for
- When the target platform doesn't support SVG (some email clients, older apps)
- Screenshots, UI mockups, and composite images with photographic elements
- Rasterized exports for platforms that require bitmap images
- When you need pixel-exact control over the final render
Converting between formats
SVG to PNG is a one-way lossy conversion — you fix the resolution. Convert at 2× or 3× your display size for sharp retina output. PNG to SVG (auto-tracing) works for simple logos but never perfectly reconstructs complex art.
Frequently Asked Questions
Should I use SVG or PNG for my website logo?
SVG — it's smaller, sharper on every screen, and CSS-styleable. Use PNG only as a fallback for old email clients.
Can SVG contain photos?
Technically yes (embedded raster data), but it defeats the purpose. Use JPG or WebP for photographic content.
Why does my SVG look huge in file size?
Complex illustrations with thousands of paths balloon SVG file sizes. Use SVGO to optimise, or export as PNG for complex artwork.