SVG Symbol

Een alternatief voor font-gebaseerde iconen — SVG symbol sprites gebruiken om schaalbare, meerkleurige iconen direct in HTML in te sluiten.

Wat Zijn SVG Symbol Sprites?

SVG symbol sprites bundelen meerdere SVG-iconen in één bestand. Elk icoon is gedefinieerd binnen een <symbol>-element met een uniek id. Om een icoon te gebruiken, verwijst u ernaar met <use href="#icon-id">. De sprite wordt eenmalig geladen — hetzij inline of als extern bestand — en individuele iconen worden overal op de pagina weergegeven.

Dit is een fundamenteel andere aanpak dan icoonfonts. In plaats van Unicode-codepunten te koppelen aan fontglyphs, gebruikt u native SVG-elementen. Elk icoon behoudt zijn volledige SVG-mogelijkheden: meerdere kleuren, verlopen, filters en gedetailleerde toegankelijkheidsattributen. De afweging is iets complexere opmaak en stylingconventies vergeleken met de puur CSS-aanpak van fonticons.

Hoe Het Werkt

Een spritebestand is een gewoon SVG-document met één of meer <symbol>-elementen. Elk symbool definieert een op zichzelf staand icoon met zijn eigen viewBox:

icons.svg (het spritebestand)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

De buitenste <svg> is verborgen met style="display:none" zodat het geen ruimte inneemt op de pagina. De symbolen erin zijn onzichtbaar totdat ze worden gerefereerd. Om een icoon te renderen, gebruikt u het element <use>:

Symbolen gebruiken in HTML

<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Stijl de iconen met CSS, gebruik fill en stroke in plaats van de font-gebaseerde eigenschap color:

CSS voor SVG-iconen

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

Het gebruik van fill: currentColor laat het icoon de tekstkleur van het bovenliggende element overnemen, vergelijkbaar met hoe fonticons werken met de eigenschap color.

Symbol vs Fonticons

Voordelen van Symbols

Meerkleurenondersteuning — elk pad kan zijn eigen fill en stroke hebben
Elk icoon is een echt SVG-element met betere toegankelijkheid
Geen Unicode-mapping nodig — verwijs naar iconen via leesbare namen
Scherpere rendering — geen fonthintig-problemen of subpixelartefacten
Afzonderlijke icoononderdelen kunnen onafhankelijk worden geanimeerd
Werkt met elke SVG-functie: verlopen, filters, clip-paths, maskers

Nadelen van Symbols

Meer verbose opmaak (<svg><use> vs <i class="icon">)
Niet eenvoudig te stijlen met CSS color — fill/stroke nodig
Externe sprites hebben CORS-implicaties voor cross-origin laden
Grotere totale bestandsgrootte dan gecomprimeerde fontformaten
Meer HTML-gewicht per icoongebruik
Geen ondersteuning voor pseudo-elementen ::before/::after

Laadstrategieën

Er zijn drie hoofdmanieren om een SVG symbol sprite in een pagina te laden, elk met verschillende afwegingen:

Inline sprite

Plak de volledige sprite SVG direct in de HTML <body>. Dit is de eenvoudigste aanpak — geen CORS-problemen, geen extra HTTP-verzoek. De symbolen zijn onmiddellijk beschikbaar voor elk <use>-verwijzing op de pagina. Werkt het beste voor single-page applicaties of wanneer u een kleine iconenset heeft (minder dan ~50 iconen).

Externe sprite

Laad de sprite als extern bestand via <use href="icons.svg#home">. Dit houdt uw HTML schoon en laat de browser de sprite apart van de pagina cachen. Het heeft echter CORS-implicaties: de sprite moet van dezelfde oorsprong worden geleverd, of de server moet de juiste Access-Control-Allow-Origin-headers instellen. Internet Explorer ondersteunt geen externe <use>-verwijzingen — gebruik de polyfill svg4everybody als u IE-ondersteuning nodig heeft.

JS-injectie

Laad het spritebestand via fetch() en injecteer het in de DOM bij runtime. Dit combineert de cacheerbaarheid van externe sprites met de betrouwbaarheid van inline sprites — de geïnjecteerde SVG wordt onderdeel van het document, zodat <use>-verwijzingen werken zonder CORS-beperkingen. Bobcorn genereert deze aanpak: een JS-bestand dat alle symbolen ophaalt en registreert wanneer het geladen wordt.

JS-injectiebenadering (Bobcorn-uitvoer)

<!-- Laad de gegenereerde JS sprite -->
<script src="icons-symbol.js"></script>

<!-- Gebruik dan normaal: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Het JS-bestand maakt een verborgen <svg>-element met alle <symbol>-definities en voegt het toe aan de documentbody. Eenmaal geladen worden iconen identiek gerefereerd als bij de inline-aanpak.

Wanneer SVG Symbols Gebruiken

SVG symbol sprites zijn de juiste keuze wanneer uw project mogelijkheden nodig heeft die fonticons niet kunnen bieden:

Meerkleurige iconen — wanneer iconen meer dan één kleur, verlopen of complexe vullingen gebruiken die een enkel fontglyph niet kan weergeven
Toegankelijkheid is de hoogste prioriteit — elk icoon kan een <title>-element en aria-label-attribuut bevatten, waardoor schermlezers betekenisvolle beschrijvingen krijgen
Geanimeerde icoononderdelen — u moet afzonderlijke paden of groepen binnen een icoon animeren (bijv. een draaiend tandwiel in een instellingenicons)
SVG-intensieve projecten — uw applicatie gebruikt al uitgebreid inline SVG, waardoor symbolen natuurlijk passen in de bestaande architectuur
Maximale renderingscherpte — fonthinting kan uitlijningsproblemen veroorzaken bij kleine formaten; SVG symbols renderen pixelperfect op elke dimensie

Wanneer Fonticons Blijven Gebruiken

Fonticons blijven de betere keuze in verschillende veelvoorkomende scenario's:

Grote iconensets (200+) — een gecomprimeerd WOFF2-fontbestand is aanzienlijk kleiner dan een SVG-sprite met hetzelfde aantal iconen
Alle monochrome iconen — als elk icoon één kleur heeft, bieden fonticons de eenvoudigste integratie zonder afwegingen
Alleen CSS-integratie — fonticons vereisen slechts een stylesheetkoppeling en CSS-klassen, zonder JavaScript of extra opmaak
Legacy-systemen — projecten die al fonticons gebruiken, hebben er niet genoeg voordeel bij om over te stappen om de migratie te rechtvaardigen
Ondersteuning voor pseudo-elementen — u heeft iconen nodig in pseudo-elementen ::before of ::after, die alleen werken met fontglyphs

In Bobcorn

Bobcorn kan uw iconen exporteren als een JS symbol sprite-bestand naast de fontbestanden. Schakel de optie JS in het exportdialoogvenster in. Het gegenereerde bestand maakt een inline SVG-sprite en registreert alle symbolen bij het laden. U kunt beide benaderingen in hetzelfde project gebruiken — fonts voor eenvoudige UI-iconen, symbolen voor complexe gekleurde illustraties.

Tip

U hoeft niet één van de twee te kiezen. Veel ontwerpsystemen gebruiken fonticons voor de meeste monochrome UI-iconen (knoppen, navigatie, formulierelementen) en SVG-symbolen voor enkele meerkleurige illustraties of geanimeerde iconen. Het exportdialoogvenster van Bobcorn laat u beide genereren in één enkele export.