Files are tiny. Or they’re huge. It depends on what’s inside.
A simple logo as SVG might be 2KB. The same logo as PNG might be 15KB. But a complex illustration might reverse that ratio entirely, with SVG ballooning while PNG stays manageable.
Understanding when each format excels prevents file size disasters and quality compromises. The choice isn’t always obvious, but patterns emerge.
How SVG Works
Scalable Vector Graphics describes the format. The file contains instructions, not pixels.
Draw a line from point A to point B. Fill this shape with this color. Curve along this path. The browser follows instructions to render the image at whatever size is requested.
This mathematical description means infinite scalability. Zoom to 1000% and lines stay crisp. Display on a 4K monitor and edges stay sharp. No pixels means no pixelation.
The same characteristic means file size depends on complexity, not dimensions. A 10px icon and a 1000px icon use identical SVG files. Complexity adds size. Dimensions don’t.
Compare to bitmap formats. PNG and JPEG store individual pixel colors. A 100×100 image has 10,000 pixels of data. A 1000×1000 image has 1,000,000 pixels. Size scales with dimensions.
When SVG Wins
Icons are SVG’s home territory. Simple shapes, limited colors, small display sizes where crisp edges matter most. Icon fonts are dying; SVG icons have largely replaced them.
Logos should almost always be SVG. They appear at multiple sizes across a site. They need to be crisp everywhere. SVG delivers once and displays perfectly at any size.
Simple illustrations benefit from SVG. Flat design aesthetics, geometric patterns, line art. The characteristics that make these look good also make them small as vectors.
UI elements like decorative lines, shapes, and patterns work well as SVG. They’re simple, they need to scale, and they often need color manipulation that SVG enables.
Animated graphics can be SVG. CSS or JavaScript can animate SVG properties directly. Color changes, transformations, path morphing. Interactive illustrations that respond to user actions.
Charts and data visualization often use SVG. D3.js and similar libraries generate SVG. The format handles crisp lines and text at any zoom level.
When PNG Wins
Photographs can’t be SVG. There’s no vector description for natural imagery. Photos are and will remain bitmap territory.
Complex illustrations with many colors, gradients, and details may produce smaller PNGs than SVGs. At some complexity threshold, describing all the paths exceeds describing all the pixels.
Screenshots are inherently bitmap. They capture pixels, not vectors.
Textures and patterns with organic variation don’t vectorize well. The “imperfection” is the point. Vectors are too clean.
Transparency with bitmap imagery requires PNG. JPEG doesn’t support transparency. PNG does. When you need transparent backgrounds with photographic content, PNG is the answer.
When JPEG Wins
Photos without transparency are JPEG territory. The format was designed for photographic compression. It does that job well with smaller files than PNG for equivalent quality.
Complex imagery with subtle color gradations compresses better in JPEG. The lossy compression is tuned for photographic characteristics.
File size constraints favor JPEG for photos. When bandwidth matters and transparency isn’t needed, JPEG delivers acceptable quality at smaller sizes.
When WebP and AVIF Win
WebP and AVIF provide better compression than older formats across most content types.
WebP handles both photographs (like JPEG) and graphics with transparency (like PNG). It typically achieves 25-30% smaller files than equivalent JPEG or PNG.
AVIF pushes compression further with even smaller files. Browser support is growing but not yet universal.
These formats are increasingly the right choice when browser support allows. Serve them with fallbacks to older formats for maximum compatibility.
CSS and JavaScript Manipulation
SVG elements become DOM elements. They can be styled with CSS and manipulated with JavaScript.
Change an icon’s color with CSS:
.icon path {
fill: currentColor;
}The icon inherits text color. Theme changes automatically apply to icons. No need for multiple colored icon versions.
Animate SVG properties:
.icon path {
transition: fill 0.2s;
}
.icon:hover path {
fill: #ff0000;
}Hover effects, state changes, and interactive responses work through standard CSS.
JavaScript can modify SVG attributes directly. Change colors, positions, paths. Build interactive diagrams. Create data-driven visualizations.
PNG offers none of this. The image is a static blob. Changing appearance requires loading different images.
Accessibility Advantages
Semantic content can live inside.
Title elements provide accessible names:
<svg role="img" aria-labelledby="title">
<title id="title">Company Logo</title>
<!-- paths -->
</svg>Screen readers announce “Company Logo.” The SVG is meaningful, not just decorative.
Description elements provide longer explanations for complex diagrams. Text within SVG is actual text, searchable and readable.
PNG images require alt text on the img element. SVG can contain its accessibility information internally, making it portable across uses.
Implementation Methods
Inline SVG embeds directly in HTML. Full CSS/JS access. No additional HTTP request. But the SVG code bloats the HTML and prevents browser caching.
External SVG files (img src) allow caching but limit CSS manipulation. The SVG is treated as an image, not DOM elements.
Sprites combine multiple icons in one file. CSS positioning displays individual icons. One HTTP request serves many icons. But sprites are complex to maintain.
Data URI embedding puts SVG content in CSS or HTML as base64 or encoded text. Eliminates HTTP requests but increases file size and complexity.
Object and iframe embedding provide isolation but create complexity around interaction between the embedded SVG and the parent page.
The right method depends on needs. Interactive SVGs that need styling belong inline. Static SVGs that need caching belong in external files.
Optimization Matters
Files from design tools often contain unnecessary metadata.
Editor information, invisible layers, unnecessary precision on coordinates, comments, whitespace. None of this affects rendering. All of it increases file size.
SVGO and similar tools strip unnecessary content. Typical reductions run 20-40%. Running optimization before deployment is standard practice.
Path simplification reduces complexity. Anchor points that don’t meaningfully affect shape can be removed. Some visual difference may occur, so review optimized output.
Even optimized SVGs can be large for complex illustrations. At some point, an optimized PNG may be smaller. Compare formats for complex content rather than assuming SVG always wins.
Security and SVG Files
Scripts can hide inside. An SVG file from an untrusted source could include malicious JavaScript.
Sanitization removes dangerous content. If accepting SVG uploads, pass them through sanitization to strip scripts and other potentially harmful elements.
External SVG loaded via img tags can’t execute scripts. The browser’s image context prevents it. This makes img embedding safer for untrusted content.
Inline SVG in HTML executes in page context. Only inline SVG from trusted sources. User-provided SVG should never be directly inlined without sanitization.
Content Security Policy can restrict SVG behavior. Proper CSP headers limit what SVG scripts can do even if they slip through.
FAQ
We have hundreds of PNG icons. Is it worth converting to SVG?
Probably, if you need multiple sizes or colors. The conversion effort is upfront, but the benefits compound: smaller files, resolution independence, color flexibility. Prioritize by usage frequency. Convert high-use icons first. Low-use icons can convert opportunistically.
Our designer prefers PNG exports. How do we get good SVGs?
Work with source files, not exports. Illustrator, Figma, and Sketch all export SVG. If designs are created as vectors, SVG export is straightforward. If designs are rasterized early in the process, vector export isn’t possible. Adjust the workflow to preserve vector sources.
SVG performance is a concern. Our page has many SVGs and feels slow.
Large, complex SVGs or many inline SVGs can impact performance. Optimize SVG files. Use external files with caching where interaction isn’t needed. Consider whether all SVGs are necessary. Lazy load SVGs below the fold. Profile actual performance to identify specific bottlenecks.
We want animated icons. Should we use SVG animation, CSS animation, or JavaScript?
CSS animation is usually sufficient for simple state changes: color, transform, opacity. SMIL (native SVG animation) has browser support issues and is being deprecated. JavaScript (via libraries like GSAP) handles complex, sequenced animations. Start with CSS; escalate to JavaScript only if CSS can’t achieve the effect.
Sources
MDN Web Docs. SVG Tutorial. developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
CSS-Tricks. Using SVG. css-tricks.com/using-svg
Sara Soueidan. SVG Articles. sarasoueidan.com/tags/svg
SVGO. SVG Optimizer. github.com/svg/svgo
Web.dev. SVG and Performance. web.dev/svg