SVG Art Direction with the picture Element
Serve a genuinely different SVG illustration per breakpoint — not just a resized one — using the picture element's art-direction pattern.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Art Direction Use Case
Art direction means serving a meaningfully different image — not just a scaled version — at different viewport sizes: a simplified icon-style illustration on mobile versus a detailed full scene on desktop, or a portrait-oriented crop versus a landscape one. The `<picture>` element's `<source media="...">` handles this natively.
- Art direction swaps different artwork, not just different sizes
- picture + source with media queries is the correct native pattern
- Distinct from srcset, which handles density/size, not content changes
Implementation Pattern
Structure as `<picture><source media="(max-width: 768px)" srcset="simple.svg"><img src="detailed.svg" alt="..."></picture>` — the browser evaluates media conditions top to bottom and uses the first match, falling back to the `<img>` tag if no source matches, which also serves as the required fallback for older browsers.
- Source elements evaluate top-to-bottom, first match wins
- The trailing <img> tag is both the fallback and required element
- Works identically whether sources are SVG, raster, or mixed formats
Frequently Asked Questions
Can I mix SVG and raster sources in the same picture element?
Yes — the picture element doesn't care about format consistency between sources; you could serve a simplified SVG on mobile and a photographic JPEG on desktop from the same element if that fit the design need.
Does the alt text go on the source or img tag?
On the <img> tag only — picture and source elements don't carry alt text themselves; the fallback img element's alt attribute serves as the accessible description for whichever source was actually selected.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG