img SVG Sprite GeneratorPractical guide
SVG sprites vs. CSS sprites: a practical comparison
Both methods put several images in one file. The difference is how you choose an image: this SVG generator uses image names, while a traditional CSS sprite shows a small section of one large image.
The key differences
Think of this generator’s SVG sprite as a stack of images: each image has its own layer and name. A CSS sprite is more like a sheet of pictures placed side by side. You show only the section you need.
This page compares the SVG format produced by this generator with a traditional CSS background sprite. Other types of SVG sprites also exist.
| Question | This generator’s SVG sprite | Traditional CSS sprite |
|---|---|---|
| How do I choose an image? | By name, such as icons.svg#star for the star. | By setting the position, width and height of the visible section. |
| How do I add it to a page? | Use a separate <img> tag for each image. | Use it as the CSS background of an HTML element. |
| How do I describe the image? | Write a suitable description in the alt attribute. Use alt="" for decoration. | Add text in the HTML, such as a label beside the icon or inside its button. A CSS background has no alt attribute. |
| What if I change the images? | Keep the file and image names the same to keep your image links. Check the size settings if the dimensions change. | If an image moves within the sheet, update its position in your CSS. |
| Can I change image colours with CSS? | Your page’s CSS cannot directly change colours inside the SVG through an <img> tag. | Your page’s CSS cannot directly change individual colours inside the background image either. |
| Which image formats can I use? | SVG graphics and embedded images, such as PNG or JPEG. | One combined image file, such as PNG, WebP or SVG. |
Example A: Choose an image by name
All three image tags use the same file: icons.svg. The name after the # chooses the image: heart shows the heart, star the star and home the house.
The SVG file needs to be prepared for this. Adding #star to any SVG file will not turn it into a sprite. The generator creates the layers and rules for you.
<img src="img/icons.svg#heart" width="64" height="64" alt="Heart">
<img src="img/icons.svg#star" width="64" height="64" alt="Star">
<img src="img/icons.svg#home" width="64" height="64" alt="Home">Example B: Show one section of an image sheet
The heart, star and house sit side by side in one image. Each icon is 64 × 64 pixels, making the full image 192 × 64 pixels. The HTML element acts as a 64 × 64 pixel window. Move the background image 64 pixels to the left, and the star appears in that window.
<span class="icon-label">
<span class="css-icon star" aria-hidden="true"></span>
Favourite
</span>
<style>
.icon-label { display: inline-flex; align-items: center; gap: 12px; }
.css-icon {
display: inline-block;
width: 64px;
height: 64px;
background: url("img/css-sheet.svg") no-repeat 0 0;
}
.css-icon.star { background-position: -64px 0; }
.css-icon.home { background-position: -128px 0; }
</style>The value background-position: -64px 0 moves the background image to the left. The text “Favourite” explains what the star means. aria-hidden="true" tells screen readers to skip the extra decorative element.
This image sheet is also an SVG file. “CSS sprite” describes how the image is used as a background, not a particular file format. If you move the CSS rules into a separate stylesheet, the image path is relative to that stylesheet.
Which method should you choose?
- SVG sprite with img tags: You want to put several images in one file and use each like a normal image. This is what the generator is designed for.
- CSS background sprite: You already use background icons with fixed sizes and want to keep that setup. This generator does not create this traditional type of sprite.
- SVG directly in your HTML: You want to change an icon’s colour on hover, for example. Putting the SVG directly in your HTML is better suited to this than using an img tag.
- Separate image files: Large photos or animations are only needed on certain pages. It can make sense to load them separately.
Will this make my website faster?
Not automatically. A shared file can reduce the number of image files the browser needs to request. But even if you only need one icon, the browser still downloads the whole sprite. Embedded photos can also make the file larger.
Group images that you often use together. Large photos that appear on just one page are often better kept separate. When a sprite changes, the browser may need to download the whole file again.
To check the difference, compare the same images as separate files and as a sprite. The Network panel in your browser’s developer tools shows how much data is transferred and how long loading takes. Also try loading the page again, when the browser can reuse files it has already stored.
Images and animations: Putting a PNG or JPEG inside an SVG does not turn it into a vector graphic or make it sharper when enlarged. The generator exports animated GIF and AVIF images as separate files. AVIF still needs a browser that supports the format. SVG animations must work as images without extra JavaScript or external files.
Continue
Embed an SVG sprite with img →
Technical references: MDN: SVG as an image · MDN: CSS image sprites