SVG je vektorski format slike (baziran na XML-u), pa se skalira na bilo koju veličinu bez zamućenja. Možete ga uključiti na dva glavna načina, svaki s kompromisima.
Inline SVG — oznaka direktno u HTML-u
html
Prednosti: možete ga stilizirati s CSS-om (fill, stroke), animirati njegove dijelove, promijeniti boju kroz currentColor (nasljeđuje boju teksta), i odgovoriti na događaje — jer je pravi DOM. Nema dodatnog HTTP zahtjeva.
Nedostaci: preplavljuje HTML, nije cache-ira odvojeno, ponovljene ikone duplikiraju oznaku.
<img> — referencirano kao datoteka<img src="logo.svg" alt="Company logo" width="120" />
Prednosti: cache-ira preglednik, čuva HTML čistim, jednostavno. Nedostaci: ne možete stilizirati ili pisati skripte za njegov interni sadržaj s vašim CSS/JS-om — to je neprozirana slika.
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 -->
Odabir između inline i <img> SVG-a dolazi do toga trebate li stilizirati/animirati grafiku (inline) ili je samo prikazati učinkovito (<img>).
Ikone koje mijenjaju boju pri lebdjenju ili temi idu inline (često kao komponente); statična sredstva marke idu putem <img>.
U svakom slučaju, vektori ostaju oštri na svakoj rezoluciji — idealno za ikone i logotipe.