I built an SVG sprite generator that lets you combine multiple images in one SVG file and display each one through a regular <img> tag:
<img src="img/icons-sprite.svg#home" width="24" height="24" alt="Home">
The fragment identifier (#home) selects the image. Inside the SVG, CSS :target rules control which layer is visible.
This is an alternative to <symbol>/<use> sprites and traditional CSS sprites that rely on background-position.
What the generator does
- Accepts SVG, PNG, JPG, WebP, AVIF and GIF.
- Offers lossless optimization.
- Generates the sprite, accompanying CSS and an HTML example.
- Supports alternative text and Retina/HiDPI settings.
- Lets you reopen an existing sprite to update its images.
Animated GIFs and AVIFs are exported separately for direct embedding.
Where it makes sense
The approach is useful for small icons or illustrations that you want to manage together and embed as ordinary images.
There are trade-offs: displaying one image loads the entire sprite. Embedded raster images also introduce Base64 overhead before HTTP compression. Large photos are therefore often better kept as separate files.
And because the SVG is loaded through <img>, the page's CSS cannot directly recolour its internal shapes.
👉 Try the generator
There's a "Try an example" button if you want to explore it without uploading your own files.
I'd appreciate feedback: where would this approach fit your workflow, and what would make the tool easier to use?
Top comments (0)