SVG Sprites Explained

Full transcript

When building a website, you often need many icons, and loading each one as a separate file wastes time and bandwidth. SVG sprites solve this problem by bundling all your icons into a single file. You create one SVG file called something like icons-sprite.svg, and inside it you define each icon using a symbol element with a unique id, such as home-icon, sun, or moon. To display a specific icon on your page, you simply use a standard HTML image tag and append a hash symbol followed by the icon's id directly to the SVG file path, like icons-sprite.svg#home-icon. Your project folder stays clean and organized: index.html lives at the root, your CSS file sits inside a css folder, and your SVG sprite lives inside an img folder, all neatly separated. The magic behind this technique relies on the CSS colon-target selector. When the browser loads the SVG with a hash, only the symbol whose id matches that hash becomes visible, while all others stay hidden. Inside your sprite CSS file you write two simple rules: first, hide every SVG icon by default using display none, then use the colon-target pseudo-class to show only the one that matches the current hash in the URL. Remember a few best practices: always include a meaningful alt attribute on your image tag for accessibility, keep your sprite file in a shared assets folder, and your site will load faster with just one single network request for all icons.