SVG is een vector-afbeeldingsindeling (op XML gebaseerd), dus deze schaalt naar elke grootte zonder te vervagen. Je kunt het op twee manieren opnemen, elk met voor- en nadelen.
Inline SVG — markup rechtstreeks in de HTML
html
Voordelen: je kunt het opmaken met CSS (fill, stroke), delen ervan animeren, de kleur wijzigen via currentColor (erft tekstkleur), en reageren op events — omdat het echte DOM is. Geen extra HTTP-verzoek.
Nadelen: vergroot de HTML, niet apart in cache opgeslagen, herhaalde pictogrammen dupliceren markup.
<img> — als bestand waarnaar wordt verwezen<img src="logo.svg" alt="Company logo" width="120" />
Voordelen: in cache opgeslagen door de browser, houdt HTML schoon, eenvoudig. Nadelen: je kunt de inhoud ervan niet opmaken of aansturen met je CSS/JS — het is een ondoorzichtige afbeelding.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
De keuze tussen inline en <img> SVG komt neer op of je de afbeelding moet opmaken/animeren (inline) of gewoon efficiënt weergeven (<img>).
Pictogrammen die van kleur veranderen bij hover of thema gaan inline (vaak als onderdelen); statische merkactiva gaan via <img>.
In beide gevallen blijven vectoren scherp bij elke resolutie — ideaal voor pictogrammen en logo's.