SVG and PNG represent fundamentally different approaches to storing images. PNG stores a grid of pixels — each pixel has a color value, and the image looks best at one specific size. Zoom in, and you see individual pixels. Scale up for a billboard, and the image becomes blurry.
SVG (Scalable Vector Graphics) stores mathematical descriptions of shapes, paths, curves, and text. A circle is described as its center point, radius, fill color, and stroke. A logo is described as a collection of paths with precise coordinates. These descriptions render at whatever resolution the display requires — a 16×16 favicon and a 4-meter billboard print can both be rendered from the same SVG file with perfect sharpness.
This fundamental difference in representation determines when each format excels. SVG is ideal for design elements that must work across sizes and screens. PNG is ideal for photographic content, complex imagery, and contexts where SVG's text-based format creates complexity.
Vector vs Raster: The Core Difference
SVG: Mathematical Descriptions
SVG is an XML-based format standardized by the W3C. An SVG file is a text file containing instructions like: 'draw a path starting at (100, 50), curve to (200, 100), fill with #3B82F6.' When a browser renders this SVG, it calculates the pixel values needed to display those shapes at the current resolution. A 200×200 SVG icon and a 4000×4000 version of the same SVG are rendered from the same file — the math simply scales up.
SVG supports paths (arbitrary curves via Bézier curves), shapes (rect, circle, ellipse, line, polygon), text, images, gradients, patterns, filters (blur, shadow, color transform), animation (CSS animations, SMIL, JavaScript), and groups with transforms. The complete SVG specification (SVG 2.0) is maintained by the W3C.
Because SVG is XML text, it can be manipulated with JavaScript (change fill colors, animate paths, respond to hover events), compressed with gzip, and embedded directly in HTML without an extra HTTP request. An SVG icon used 20 times on a page can be defined once in a <defs> block and referenced 20 times with <use>.
PNG: Fixed-Resolution Pixel Grid
PNG stores a rectangular grid of pixels, each with a color value (8-bit per channel RGB, 16-bit per channel RGB, or indexed color). The file describes the image at one specific resolution. An icon saved as PNG at 32×32 pixels has exactly 1,024 pixels. If you display it at 64×64, the browser upscales it — which on high-DPI (Retina) displays looks blurry.
PNG excels at photographic content, complex imagery, and any image where gradients, textures, and millions of colors are present — content that's impractical or impossible to describe as vector paths. A portrait photograph with millions of unique pixel values can't be meaningfully represented as SVG. Screenshots of UI, rendered scenes, textures, and photographic manipulations all need pixel storage.
Technical Comparison: SVG vs PNG
| Feature | SVG | PNG |
|---|---|---|
| Format type | Vector (mathematical) | Raster (pixel grid) |
| Scalability | Infinite — looks sharp at any size | Fixed resolution — blurs when scaled up |
| Transparency | Yes (full alpha per path) | Yes (8-bit alpha channel) |
| Animation | Yes (CSS/SMIL/JavaScript) | APNG only (limited support) |
| JavaScript manipulation | Yes (DOM access) | No (pixel manipulation only via Canvas) |
| CSS styling | Yes (CSS properties apply to SVG elements) | No |
| Inline in HTML | Yes (<svg> element or <img src=".svg">) | Only as <img> tag |
| File type | Text (XML) | Binary |
| Compression | GZIP on transfer (text compresses well) | DEFLATE (built-in) |
| Photographs | Impractical (SVG can reference raster images but it's not vector) | Excellent (lossless quality) |
| Browser support | All modern browsers | Universal (including old browsers) |
| Email rendering | Poor (most email clients don't render SVG) | Universal |
File Size Comparison
File size comparison between SVG and PNG depends entirely on the image type. Simple logos and icons are dramatically smaller as SVG. Complex illustrations approach the same size. Photographs are always much smaller as raster (PNG or JPG) than as SVG (SVG can't compress photographic pixel data efficiently).
| Content Type | SVG size | PNG equivalent size |
|---|---|---|
| Simple logo (2-3 shapes) | 0.5–2 KB | 5–20 KB (32×32, 72×72) |
| UI icon set (20 icons) | 10–30 KB total (with <use>) | 40–200 KB (multiple PNG files) |
| Complex illustration (100+ paths) | 50–200 KB | 100–500 KB (at 1000×1000) |
| Website header graphic | 5–20 KB (SVG compresses well) | 20–100 KB (PNG for equivalent size) |
| Photo (any type) | Not viable as vector | 1–25 MB (PNG); 200 KB–2 MB (JPG) |
SVG's text-based format compresses extremely well with gzip (HTTP compression). An SVG that's 20 KB might transfer as 5 KB gzipped. PNG already includes DEFLATE compression and benefits less from HTTP compression.
Use Case Decision Matrix
| Use Case | Best Format | Why |
|---|---|---|
| Company logo | SVG | Must look sharp at 16px favicon and 500px nav bar simultaneously |
| UI icons | SVG | Scale to any size, can be styled with CSS, single file multiple sizes |
| Photo / photograph | PNG (lossless) or JPG/WebP (lossy) | SVG can't represent photographic pixel data |
| Screenshot | PNG | Exact pixel capture; SVG can't represent raster screenshots |
| Email image | PNG | Most email clients don't render SVG inline |
| Animated illustration | SVG | CSS/JS animation; smaller than GIF; Lottie animates SVG-like |
| Interactive diagram (hover effects) | SVG | SVG elements respond to mouse events and CSS :hover |
| Data visualization / chart | SVG | D3.js and Vega generate SVG; crisp at any resolution |
| Background pattern / texture | SVG | Can tile infinitely with CSS; geometric patterns are tiny as SVG |
| Product photo | PNG or WebP | Photographic content requires raster |
| Printed materials | SVG (for vector elements) | Printers can render SVG at any DPI without quality loss |
High-DPI / Retina Displays: Where SVG Has a Clear Advantage
High-DPI displays (Apple Retina, modern Android) render at 2× or 3× the logical pixel resolution. A 32×32 pixel icon on a Retina display needs a 64×64 or 96×96 pixel image to appear sharp. Without high-DPI images, PNG icons look blurry on Retina screens.
The traditional solution: provide 1×, 2×, and 3× versions of each PNG image (icon.png, icon@2x.png, icon@3x.png) and serve the appropriate version based on device pixel ratio. This triples your image asset count and file sizes.
SVG eliminates this problem entirely. A single SVG file renders at whatever pixel density the screen requires — 1×, 2×, 3×, or any future resolution — from the same file. This is the most compelling practical reason to use SVG for any icon, logo, or illustration that doesn't require photographic content.
SVG Security Considerations
SVG is XML that can contain JavaScript. User-uploaded SVG files are a security risk — a malicious SVG can execute JavaScript in the browser context if displayed inline. This is a real concern for platforms that accept user-uploaded images (see: Stored XSS via SVG).
Safe approaches: (1) serve user-uploaded SVGs from a separate domain or subdomain (so any executed JavaScript can't access the main site's cookies), (2) sanitize SVG with a library like DOMPurify before displaying, (3) display user SVGs via <img> tag rather than inline <svg> (prevents script execution). PNG is safer for user-uploaded content because it can't contain executable code.
Convert SVG to PNG (or PNG to SVG) with ChangeThisFile
ChangeThisFile supports SVG ↔ PNG conversion via /svg-to-png. Converting SVG to PNG rasterizes the vector at a specific size. PNG to SVG requires vectorization (tracing pixel edges to create paths) — this works well for simple graphics but produces complex, large SVG from photographs.
curl -X POST https://changethisfile.com/v1/convert \
-H "Authorization: Bearer YOUR_API_KEY" \
-F "file=@logo.svg" \
-F "target=png" \
-o logo.png690 routes supported. Free for 1,000 conversions/month.