Az SVG egy vektorgrafikus képformátum (XML alapú), így bármilyen méretűre skálázható a képminőség elvesztése nélkül. Kétféle módon foglalhatja bele, mindegyiknek vannak előnyei és hátrányai.
Inline SVG — jelölés közvetlenül a HTML-ben
html
Az SVG egy vektorgrafikus képformátum (XML alapú), így bármilyen méretűre skálázható a képminőség elvesztése nélkül. Kétféle módon foglalhatja bele, mindegyiknek vannak előnyei és hátrányai.
Előnyök: CSS-szel (fill, stroke) stílusozhatja, animálhatja az elemeit, currentColor-on keresztül megváltoztathatja a színét (örökli a szöveg színét), és eseményekre reagálhat — mivel igazi DOM. Nincs további HTTP kérés.
Hátrányok: felduzzasztja a HTML-t, külön nem cachézott, ismételt ikonok megduplázzák a jelölést.
<img> segítségével — fájlként hivatkozva<img src="logo.svg" alt="Company logo" width="120" />
Előnyök: a böngésző cachézi, tisztán tartja a HTML-t, egyszerű. Hátrányok: a CSS/JS-sel nem stílusozhatja vagy nem scriptelheti annak belső részét — ez egy átlátszatlan kép.
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 -->
Az inline és <img> SVG közötti választás attól függ, hogy a grafikát stílusoznia/animálnia kell-e (inline) vagy csak hatékonyan meg kell jelenítenie (<img>).
Azok az ikonok, amelyek lebegéskor vagy téma szerint megváltoznak a szín, inline formátumban mennek (gyakran komponensekként); a statikus márkavagyon az <img>-en keresztül.
Mindkét esetben a vektorok minden felbontáson élesek maradnak — ideális ikonokhoz és logókhoz.