SVGiconen

SVGiconen zijn vectorgebaseerde pictogrammen die zijn gedefinieerd in het Scalable Vector Graphics (SVG) formaat. doordat ze schaalbaar zijn zonder kwaliteitsverlies, blijven ze scherp op vrijwel elke resolutie en schermgrootte. SVGiconen kunnen worden gebruikt als kleine grafische elementen in web- interfaces, apps en documenten.

Ze kunnen op verschillende manieren in een pagina worden opgenomen. Een SVG-icon kan inline worden opgenomen als een SVG-element in de HTML, of als extern bestand via een img-tag of via CSS als achtergrondafbeelding. Voor veel iconen is het gebruik van een symbolen- of sprite-systeem efficiënt: een samengevoegde SVG bevat meerdere iconen met IDs en een <use> element om specifieke icons op te roepen. Inline SVG biedt de meeste stylingvrijheid, terwijl sprites cachevriendelijk zijn voor meerdere pagina’s.

Styling en toegankelijkheid zijn belangrijke aandachtspunten. SVGiconen kunnen worden gekleurd en gestileerd met CSS, bijvoorbeeld met fill, stroke en currentColor om de kleur te laten volgen uit de omliggende tekst. Voor toegankelijkheid moeten iconen een beschrijving hebben met aria-label of title/desc, en decoratieve iconen kunnen aria-hidden="true" krijgen.

Prestaties en optimalisatie spelen ook een rol. SVG’s zijn vaak kleiner dan vergelijkbare rasterafbeeldingen voor eenvoudige grafische elementen. Optimalisatie met tools zoals SVGO en het hergebruiken van sprite-varianten kunnen laadtijden verbeteren. Bij veel werken wordt gekozen voor een consistente set iconen uit een library, zoals Feather, Heroicons of Material Icons, die SVG-versies leveren en licentievoorwaarden benadrukken.

Samenvattend bieden SVGiconen een flexibele, schaalbare en toegankelijke oplossing voor pictogrammen in moderne digitale interfaces.