SVG er et vektor-billedformat (XML-baseret), så det skaleres til enhver størrelse uden uskarpheder. Du kan inkludere det på to hovedmåder, hver med afvejninger.
Inline SVG — markup direkte i HTML
html
Fordele: du kan style det med CSS (fill, stroke), animere dets dele, ændre farve via currentColor (arver tekstfarve) og reagere på begivenheder — fordi det er rigtig DOM. Ingen ekstra HTTP-anmodning.
Ulemper: oppuster HTML, ikke cacheopbevaret separat, gentagne ikoner duplikerer markup.
<img> — refereret som en fil<img src="logo.svg" alt="Company logo" width="120" />
Fordele: cacheopbevaret af browseren, holder HTML ren, simpelt. Ulemper: du kan ikke style eller scripte dens interne dele med dit CSS/JS — det er et uigennemsigtigt billede.
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 -->
Valget mellem inline og <img> SVG kommer ned på, om du skal style/animere grafikken (inline) eller bare vise den effektivt (<img>).
Ikoner, der ændrer farve ved hover eller tema, går inline (ofte som komponenter); statiske mærkeaktiver går via <img>.
Uanset hvad, forbliver vektorer skarpe med hver opløsning — idealt til ikoner og logoer.