SVG-Sprite-Systemen: Efficiënt Iconenbeheer
Maak efficiënte SVG-sprite-systemen voor grootschalige applicaties. Leer sprite-generatie, gebruikspatronen en prestatie-optimalisatietechnieken.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVG-sprites combineren tientallen iconen in een enkele HTTP-aanvraag, waardoor de netwerkoverhead drastisch wordt verminderd
-
Het
<symbol>+<use>-patroon laat je iconen eenmalig definiëren en overal op de pagina refereren - Externe sprites zijn het beste voor grote apps (cacheerbaar), terwijl inline sprites geschikt zijn voor kleinere sites (nul latentie)
- Style sprites met CSS custom properties voor consistente afmetingen, kleurthema's en hover-states
-
Voeg altijd
aria-hidden="true"toe aan decoratieve iconen enrole="img"met<title>aan betekenisvolle iconen
Waarom SVG-Sprites?
Individuele SVG-bestanden betekenen aparte HTTP-aanvragen. Sprite-systemen combineren iconen in enkele bestanden, verbeteren de prestaties en vereenvoudigen het beheer.
Voordelen van het Sprite-Systeem
Prestaties
Individuele Iconen:
50 iconen x 1 aanvraag = 50 aanvragen
SVG-Sprite:
50 iconen = 1 aanvraagBeheer
Voordelen:
- Enkele bron van waarheid
- Eenvoudige updates
- Consistente styling
- Versiebeheer-vriendelijk
Sprite-Types
Externe Sprite
Apart gerefereerd bestand:
<!-- sprites.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27..."/>
</symbol>
</svg>
<!-- Gebruik -->
<svg class="icon"><use href="/sprites.svg#icon-home"/></svg>Inline Sprite
Ingebed in HTML:
<body>
<!-- Verborgen sprite-container -->
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24"><path d="..."/></symbol>
</svg>
<!-- Gebruik overal op de pagina -->
<svg class="icon"><use href="#icon-home"/></svg>
</body>CSS-Achtergrond Sprite
Data URI-benadering:
.icon-home { background-image: url("data:image/svg+xml,..."); }Pro Tip: Geef de voorkeur aan inline sprites voor above-the-fold iconen die direct moeten renderen, en externe sprites voor grote iconensets die profiteren van browsercaching tussen paginanavigaties.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealSprites Maken
Handmatige Creatie
<svg xmlns="http://www.w3.org/2000/svg">
<defs><style>.icon-stroke { stroke-width: 2; fill: none; }</style></defs>
<symbol id="icon-1" viewBox="0 0 24 24"></symbol>
<symbol id="icon-2" viewBox="0 0 24 24"></symbol>
</svg>Geautomatiseerde Generatie
Met svg-sprite:
const svgSprite = require('gulp-svg-sprite');
gulp.task('sprite', () => {
return gulp.src('icons/*.svg')
.pipe(svgSprite({ mode: { symbol: { dest: '.', sprite: 'sprites.svg' } } }))
.pipe(gulp.dest('dist'));
});Webpack-Integratie
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
module.exports = {
module: { rules: [{ test: /\.svg$/, use: [{ loader: 'svg-sprite-loader', options: { extract: true } }] }] },
plugins: [new SpriteLoaderPlugin()]
};Gebruikspatronen
Basisgebruik
<svg class="icon icon-home" aria-hidden="true"><use href="#icon-home"/></svg>React Component
function Icon({ name, size = 24, className }) {
return (
<svg className={`icon ${className}`} width={size} height={size} aria-hidden="true">
<use href={`#icon-${name}`}/>
</svg>
);
}
<Icon name="home" size={20} className="nav-icon"/>Vue Component
<template>
<svg :class="['icon', className]" :width="size" :height="size"><use :href="`#icon-${name}`"/></svg>
</template>
<script>
export default { props: { name: String, size: { type: Number, default: 24 }, className: String } }
</script>"Een goed gebouwd SVG-sprite-systeem is de ruggengraat van elk schaalbaar designsysteem. Het is het enige asset dat elke pagina en elk component raakt.
Sprites Stylen
.icon { width: 24px; height: 24px; fill: currentColor; }
.icon-primary { fill: var(--color-primary); }
.icon-lg { width: 32px; height: 32px; }CSS Custom Properties
:root { --icon-size: 24px; --icon-color: currentColor; }
.icon { width: var(--icon-size); height: var(--icon-size); fill: var(--icon-color); }Stroke Iconen
.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeToegankelijkheid
Decoratieve Iconen
<button><svg class="icon" aria-hidden="true"><use href="#icon-settings"/></svg> Instellingen</button>Betekenisvolle Iconen
<a href="/home"><svg class="icon" role="img" aria-label="Home"><title>Home</title><use href="#icon-home"/></svg></a>Prestatie-Optimalisatie
Cachingstrategie
<link rel="preload" href="/sprites.svg" as="image" type="image/svg+xml">Code-Splitting
async function loadSprite() {
const response = await fetch('/sprites.svg');
const svg = await response.text();
document.body.insertAdjacentHTML('afterbegin', svg);
}Sprite-Subsets
Maak kleinere sprites per sectie:
/sprites
/navigation-icons.svg
/social-icons.svg
/editor-icons.svgVoor applicaties met 100+ iconen, splits sprites per paginasectie of functiegebied. Dit voorkomt het laden van editor-iconen op pagina's die alleen navigatie-iconen nodig hebben.
Grote Iconensets Beheren
/icons
/navigation
home.svg
menu.svg
/actions
edit.svg
delete.svg
/social
twitter.svg
facebook.svgA Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealVectoSolve voor Iconensets
Gebruik VectoSolve om iconen te maken:
- Bronafbeeldingen converteren
- Opschonen en optimaliseren
- Combineren in sprite
- Deployen
VectoSolve biedt: schone paden, consistente viewBox, geoptimaliseerde output, klaar voor sprites.
Conclusie
SVG-sprite-systemen verbeteren iconenbeheer en prestaties drastisch. Kies de juiste aanpak — inline voor kleinere sets, extern voor grotere applicaties. Gebruik VectoSolve om schone, consistente iconen te maken die klaar zijn voor sprite-integratie.