Answer 04 of 50
When to Use SVG Instead of PNG and Other Image Formats in Web Design
Use SVG for artwork made of shapes: icons, logos, simple illustrations, and charts. Use a bitmap format for photographs, screenshots, and detailed textures, and for those, serve AVIF or WebP first with JPEG or PNG as the fallback. PNG is no longer the only answer for transparency, and SVG is not automatically smaller: its file size grows with the complexity of the drawing, not its dimensions.
A decision order
Work down the list and stop at the first row that fits:
| If the image is | Use | Keep as fallback |
|---|---|---|
| Built from shapes and flat color (icon, logo, line illustration, chart) | SVG | None |
| A photograph or other continuous-tone image | AVIF or WebP | JPEG |
| A raster graphic that needs transparency | WebP (lossy or lossless) or AVIF | PNG |
| A screenshot or graphic with sharp text that must stay exact | Lossless WebP or PNG | PNG |
| A complex illustration with many gradients and textures | Export both SVG and a bitmap, and keep the smaller one | Whichever you did not pick |
The rest of this page explains the reasoning behind each row.
How SVG behaves
An SVG file is a set of drawing instructions rather than a grid of pixels. The browser renders those instructions at whatever size the layout asks for, so the same file stays sharp on a phone and a large monitor and needs no 1x, 2x, or 3x versions. The flip side is that every path, gradient, and anchor point adds bytes. A simple logo is small as SVG; a detailed illustration traced from a painting can be larger as SVG than as a compressed bitmap. When in doubt, export both and compare.
Files exported from design tools carry extra weight. The SVGO project notes that SVG files, “especially those exported from vector editors, usually contain a lot of redundant information” such as editor metadata, comments, and hidden elements. Savings vary by file, so check sizes before and after optimizing, and review the result visually, since path simplification can change shapes slightly.
Bitmaps: what the newer formats change
Google’s WebP documentation reports that lossless WebP images are 26% smaller than PNGs and lossy WebP images are 25% to 34% smaller than comparable JPEGs at equivalent quality. It also says WebP “supports transparency in both lossless and lossy modes,” and that lossy WebP with transparency typically gives “3× smaller file sizes compared to PNG.” That is the main reason PNG should no longer be the default for a transparent product photo.
MDN’s image format guide describes AVIF as offering better lossy compression still, with lossy AVIF images “around 50% smaller than JPEG images”, and lists browser support starting with Chrome 85, Edge 121, Opera 71, Firefox 93, and Safari 16.1. MDN also notes that AVIF does not support progressive rendering, so the file has to arrive before it displays, and it recommends a fallback through the picture element:
<picture>
<source type="image/avif" srcset="kitchen.avif">
<source type="image/webp" srcset="kitchen.webp">
<img src="kitchen.jpg" width="1200" height="800" alt="White kitchen with a marble island">
</picture>The browser takes the first format it supports. Sizing and density for the bitmap versions are covered in preparing images for retina and high-resolution displays.
Styling and animating SVG
Inline SVG, placed directly in the HTML, becomes part of the page, so CSS can change its colors:
.icon path { fill: currentColor; }This works only for inline SVG. An SVG loaded through img is treated as an image, and the page’s CSS cannot reach the paths inside it, so a single file cannot change color with the theme that way.
For motion, CSS can handle icon state changes such as color, rotation, and opacity. SMIL, the animation syntax built into SVG, is not on its way out: MDN marks the animate element as Baseline “Widely available” and available across browsers since January 2020. Keeping animation in CSS is still simpler when the rest of the site’s motion lives there.
Four ways to put SVG on a page
| Method | Styling from page CSS | Browser caching | Good for |
|---|---|---|---|
| Inline in the HTML | Yes | No, it ships with each page | Icons that change color or animate |
| An img element | No | Yes | Logos and illustrations that never change |
| Sprite with the use element | Partly, through inherited properties | Yes | Icon sets used across many pages |
| CSS background | No | Yes | Decorative patterns |
A sprite is one SVG file holding many icons as separate symbols. MDN’s use element reference says it “takes nodes from within an SVG document, and duplicates them somewhere else” so each icon is shown with a reference to its id:
<svg width="24" height="24" aria-hidden="true"><use href="/icons.svg#search"></use></svg>Accessibility depends on how the SVG is used
Every img element needs alt text, whatever the file format. When an SVG file is loaded through img, the alt attribute supplies its accessible name; Scott O’Hara’s testing notes on SVG and accessibility describe an img with an SVG source announcing as an image “with the alt providing its accessible name.” The title pattern applies to inline SVG:
<svg role="img" aria-labelledby="logo-title" width="160" height="40">
<title id="logo-title">Northside Plumbing</title>
<!-- paths -->
</svg>Give each inline title a unique id, so two logos on one page do not point at the same label, and mark purely decorative inline icons with aria-hidden="true".
Security for uploaded SVG
An SVG file can contain script. Loading it through img blocks that: MDN’s page on SVG as an image lists “JavaScript is disabled” among the image-context restrictions. The same page warns that those restrictions are specific to image contexts: they do not apply when the SVG is opened directly or embedded as a document through iframe, object, or embed elements. If users can upload SVG and the file is served from your domain, anyone who opens its URL directly can run whatever it contains. Sanitize every uploaded SVG, even if your pages only display it through img, and never inline user-supplied SVG without sanitizing it first.
Converting an existing icon set
If a site has hundreds of PNG icons, convert in order of use: the icons in navigation and buttons first, then the rest as pages are touched. Whether an icon should stand alone or carry a text label is a separate decision, covered in when to use icons instead of text. Ask designers for the vector source files rather than PNG exports, since a vector export from Figma, Illustrator, or Sketch is straightforward only if the artwork stayed vector.
Pick the format from what the image is, serve modern bitmap formats with a fallback, keep SVG for shapes, and treat every uploaded SVG as code until it has been sanitized.