SVG je vektorový formát obrázků (založený na XML), takže se škáluje na jakoukoliv velikost bez rozmazání. Můžete jej zahrnout dvěma hlavními způsoby, každý s příslušnými kompromisy.
Inline SVG — markup přímo v HTML
html
Výhody: můžete jej stylizovat CSS (fill, stroke), animovat jeho součásti, změnit barvu přes currentColor (dědí barvu textu) a reagovat na události — protože je to skutečný DOM. Žádný další HTTP požadavek.
Nevýhody: zvětšuje HTML, není zvlášť cachován, opakované ikony duplikují markup.
<img> — odkazováno jako soubor<img src="logo.svg" alt="Company logo" width="120" />
Výhody: cachováno prohlížečem, udržuje HTML čisté, jednoduché. Nevýhody: nemůžete stylizovat nebo skriptovat jeho vnitřní části svým CSS/JS — je to neprůhledný obrázek.
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 -->
Volba mezi inline a <img> SVG se scvrkává na to, zda potřebujete stylizovat/animovat grafiku (inline) nebo ji jen efektivně zobrazit (<img>).
Ikony, které mění barvu při najetí nebo změně motivu, jdou inline (často jako komponenty); statické brandové prvky jdou přes <img>.
V každém případě zůstávají vektory ostré v každém rozlišení — ideální pro ikony a loga.