SVG je vektorski format slike (osnovan na XML), zato se brez zamegljenja prilagodi katerikoli velikosti. Vključite ga lahko na dva glavna načina, vsak s svojimi kompromisi.
Vstavljen SVG — označevanje neposredno v HTML
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2L2 7l10 5 10-5z" />
</svg>
Prednosti: lahko ga stiliziraš s CSS (fill, stroke), animiraš njegove dele, spremeniš barvo prek currentColor (deduje barvo besedila) in se odzoveš na dogodke — ker je pravi DOM. Brez dodatne HTTP zahteve.
Slabosti: povečuje obseg HTML, se ne predpomnijo posebej, podvojene ikone podvojijo označevanje.
SVG prek <img> — sklican kot datoteka
<img src="logo.svg" alt="Company logo" width="120" />
Prednosti: predpomnjen s strani brskalnika, ohrani HTML čist, preprosto. Slabosti: ne moreš stilizirati ali skriptirati njegove notranjosti s svojim CSS/JS — je neprosojni grafični element.
Vodnik za odločitev
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
Dostopnost
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Zakaj je to pomembno
Odločitev med vstavljenim in <img> SVG se nanaša na to, ali moraš stilizirati/animirati grafiko (vstavljena) ali jo le prikažeš učinkovito (<img>).
Ikone, ki spremenijo barvo ob lebdenju ali temo, gredo vstavljena (pogosto kot komponente); statični blagajni prejdejo prek <img>.
V vsakem primeru ostanejo vektorji ostri pri vsaki ločljivosti — idealno za ikone in logotipe.