Math versus a fixed grid
An SVG describes an image as shapes and paths — mathematical instructions (draw a circle here, a line there) that get recalculated fresh at whatever size the image is displayed. A PNG is a fixed grid of pixels captured at one specific resolution; displaying it larger than its native size means stretching those same fixed pixels, with no new detail to reveal — this is why a scaled-up PNG blurs or pixelates while a scaled-up SVG stays perfectly crisp at any size.
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
This entire circle renders identically sharp whether displayed at 16px or 1600px — the math doesn't change, only the rendered output size.
Where this actually matters
- Icons and logos: displayed at wildly different sizes across a site (a favicon, a header logo, a print asset) — a single SVG source covers every size without needing separate exported assets per resolution.
- Responsive design: an SVG automatically looks correct on any screen density (including high-DPI/"Retina" displays) with zero extra work, where a raster image needs multiple resolution variants (
@1x,@2x,@3x) to avoid looking soft on high-density screens. - Illustrations built from shapes: anything genuinely composed of flat colors, curves, and paths (icons, simple illustrations, diagrams) translates naturally to vector form.
Where SVG structurally can't help
Photographs have no underlying "shapes" to describe mathematically — every pixel's color is essentially independent, continuous-tone information, which is exactly what raster formats (PNG, JPEG, WebP) are built to represent efficiently. "Vectorizing" a photo either produces a rough stylized approximation (tracing edges and color regions, losing photographic detail) or just embeds the raster image data inside an SVG wrapper, gaining none of SVG's actual scalability benefit.
Common mistakes
- Using PNG for icons that appear at many different sizes across a site, requiring multiple exported resolutions instead of one scalable SVG source.
- Trying to use SVG for photographic content. It has no efficient way to represent continuous-tone pixel detail — this is a fundamental format mismatch, not a settings issue.
- Forgetting SVG files can also carry meaningful weight if they contain deeply complex paths or embedded raster data — "vector" doesn't automatically mean "tiny file," especially for intricate illustrations (see SVG vs PNG: Vector resolutions vs bitmap byte counts for when file size actually favors PNG instead).
FAQ
Does an SVG image lose quality when scaled up?
No — it's rendered from mathematical shape descriptions at whatever size is needed, so there's no pixelation or blurring regardless of scale, unlike a raster image stretched beyond its native resolution.
Can I convert a photograph to SVG and get a scalable version?
Not meaningfully — photos have no underlying shapes to vectorize; the result is either a rough stylized approximation or an embedded raster image with no real scalability gained.
Why do icons and logos commonly use SVG instead of PNG?
Because they're typically composed of simple shapes and need to display correctly at many different sizes — one SVG source covers every size without needing separate exported resolution variants.
Convert between SVG and raster formats with the Image Converter — entirely client-side.