SVG houdt randen scherp bij elke pixeldichtheid en kan kleuren aan het thema aanpassen. Die flexibiliteit heeft één voorwaarde: het bestand moet zelfstandig, eenvoudig en op een heel klein oppervlak leesbaar blijven.
Maak een vierkant met een viewBox
Gebruik een vierkante viewBox, zoals 0 0 64 64, en laat ruimte rondom het symbool. De viewBox bepaalt het coördinatenstelsel zonder een vaste fysieke weergavegrootte op te leggen.
Beperk het ontwerp tot de kenmerkende vormen. Fijne details, kleine openingen en volledige woorden verdwijnen vaak op 16 pixels, ook al blijft het vectorbestand technisch scherp.
| Onderdeel | Reden | Test |
|---|---|---|
| Vierkante viewBox | Voorspelbare uitsnede | Voorbeeld op 16×16 |
| Eenvoudige paden | Leesbaarheid | Lichte en donkere tabbladen |
| Geen afhankelijkheden | Zelfstandig laden | Netwerk offline |
| ICO-alternatief | Oudere programma's | URL in de hoofdmap |
Maak het bestand zelfstandig
Sluit de benodigde stijlen in de SVG in. Zet tekst om naar paden wanneer het symbool van een lettertype afhankelijk is, want een extern weblettertype is in deze context geen betrouwbare afhankelijkheid.
Verwijder scripts, externe links en overbodige metadata van de editor. Eenvoudige vormen en stijlen maken ook veiligheidscontroles gemakkelijker en verkleinen het bestand.
Open het bestand ten slotte afzonderlijk in een browser en test het offline. Verandert of verdwijnt het ontwerp, dan is het nog afhankelijk van een externe bron die moet worden ingesloten of vervangen.
Declareer SVG met een alternatief
Voeg link rel icon toe met type image/svg+xml en een URL vanaf de hoofdmap. Houd ook favicon.ico in de hoofdmap beschikbaar voor programma's die geen SVG kiezen of ICO rechtstreeks opvragen.
SVG vervangt het Apple Touch-pictogram of de manifestpictogrammen niet. Exporteer voor die interfaces ondoorzichtige of maskeerbare PNG-bestanden.
Pas kleuren aan het thema aan
Een prefers-color-scheme-regel in een style-element kan fill of stroke in de donkere modus wijzigen. Kies eerst een goed zichtbare standaardkleur en voeg daarna de variant toe als progressieve verbetering.
Test het bestand in echte tabbladen en op verschillende zoomniveaus. Controleer ook het alternatief wanneer SVG niet wordt gekozen: een ICO die op een donkere achtergrond verdwijnt, blijft voor die programma's een probleem.
Primaire bronnen
Veelgestelde vragen
Heeft een SVG width en height nodig?
Een vierkante viewBox is essentieel voor het schalen. Expliciete width en height mogen worden toegevoegd, maar de browser bepaalt de pictogramgrootte voor de betreffende context.
Kan een extern lettertype worden geladen?
Reken daar niet op. Zet letters om naar paden voor een zelfstandig en voorspelbaar bestand.
Is SVG voldoende voor iOS?
Nee. Lever voor het startscherm een apart, ondoorzichtig Apple Touch-pictogram in PNG-formaat.