PNG vs SVG: Raster and Vector Compared
PNG and SVG are fundamentally different technologies that happen to serve overlapping use cases. PNG stores images as a grid of pixels. SVG stores images as mathematical descriptions of shapes. This difference affects everything: file size, scaling behavior, editability, and the types of images each format handles well.
Choosing between them comes down to one question: is your image geometric (shapes, text, icons) or photographic (natural scenes, textures, gradients)? Here is the full breakdown.
PNG vs SVG: Head-to-Head Comparison
| Feature | PNG | SVG |
|---|---|---|
| Image type | Raster (pixel grid) | Vector (math shapes) |
| Scaling | Blurry when enlarged | Perfect at any size |
| File size (icon) | 5-50KB | 1-5KB typically |
| File size (photo) | 500KB-5MB | Impractical (huge files) |
| Transparency | Full alpha | Inherently transparent |
| CSS styling | Not possible | Full CSS control (inline) |
| Animation | APNG (limited) | CSS/JS/SMIL animation |
| Browser support | Universal (100%) | Universal (100%) |
| Accessibility | Alt text only | Title, desc, ARIA roles |
| Color depth | Up to 48-bit | Any CSS color value |
Scaling: SVG's Defining Advantage
When you scale a PNG image beyond its native resolution, pixels become visible and the image looks blurry or blocky. A 32x32 PNG icon displayed at 128x128 looks noticeably degraded. This is inherent to raster formats: they have a fixed number of pixels.
SVG scales to any size without quality loss. A 32x32 SVG icon looks identical at 32x32, 128x128, or 4096x4096 because the browser recalculates the shapes at the target resolution. This makes SVG ideal for responsive design where the same asset displays at different sizes across devices.
File Size: It Depends on Content
For simple graphics (icons, logos, diagrams), SVG is typically much smaller. A simple icon might be 500 bytes as SVG and 10KB as PNG. A logo with clean lines might be 3KB as SVG and 30KB as PNG.
For complex images, the comparison reverses. A photograph would require millions of vector paths to approximate, producing an enormous SVG file. A detailed illustration with thousands of shapes might be 500KB as SVG but only 100KB as PNG. As image complexity increases, raster formats become more efficient.
CSS Control: SVG's Interactive Advantage
Inline SVGs can be styled with CSS. You can change colors on hover, adapt to dark mode, apply animations, and use CSS custom properties for theming. A single SVG icon set can display in different colors across your site without duplicating files.
PNG is static. A red PNG icon is always red. To change its color, you need a separate PNG file. CSS filters can tint PNGs, but the results are limited compared to SVG's full CSS integration.
When PNG Is the Right Choice
PNG wins for photographs and complex images with continuous tones. Screenshots, product photos, and any image captured by a camera should be PNG (or JPG/WebP for web delivery). PNG also wins when you need a simple, universally compatible file that does not require CSS styling or interactivity.
For sharing images via email, messaging, or platforms that do not render SVG inline, PNG is more reliable. SVGs loaded via img tags lose their CSS styling and interactivity capabilities.
The Modern Web Recommendation
For modern web projects, the typical pattern is SVG for icons, logos, and simple graphics that benefit from scaling and CSS control, and PNG (or WebP) for photographs and complex images. Many design systems use SVG icon libraries exclusively and reserve raster formats for content images.
Performance-conscious teams inline critical SVG icons directly in HTML to eliminate file requests, while larger decorative SVGs are loaded as external files with appropriate caching headers.
Frequently Asked Questions
Is SVG always smaller than PNG for icons?
For simple icons with few shapes and clean lines, SVG is almost always smaller. A typical icon might be 500 bytes-3KB as SVG versus 5-50KB as PNG. For highly detailed icons with many paths, PNG may be smaller.
Can I convert PNG to SVG?
You can trace a PNG to create an SVG approximation, but the result is never perfect. Tracing works well for simple graphics with clean edges but poorly for photographs or complex illustrations. True PNG-to-SVG conversion requires manual redesign of the graphic as vector paths.
Why do some websites use PNG instead of SVG for logos?
Common reasons include: the logo contains complex effects that SVG handles poorly (gradients, textures, photographic elements), the team lacks SVG expertise, the website uses a CMS that does not support SVG uploads, or the logo needs to work in email clients that do not render SVG.