SVG är ett vektorbildformat (XML-baserat), så det skalas till vilken storlek som helst utan att bli suddig. Du kan inkludera det på två huvudsakliga sätt, var och en med sina avvägningar.
Inline SVG — markup direkt i HTML:en
html
Fördelar: du kan styla det med CSS (fill, stroke), animera dess delar, ändra färg via currentColor (ärver textfärg) och svara på händelser — eftersom det är verklig DOM. Ingen extra HTTP-begäran.
Nackdelar: förstör HTML:en, cacheas inte separat, upprepade ikoner duplicerar markup.
<img> — refererad som en fil<img src="logo.svg" alt="Company logo" width="120" />
Fördelar: cachad av webbläsaren, håller HTML ren, enkelt. Nackdelar: du kan inte styla eller skriva script för dess interndelar med din CSS/JS — det är en opak bild.
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 -->
Valet mellan inline och <img> SVG handlar om huruvida du behöver styla/animera grafiken (inline) eller bara visa den effektivt (<img>).
Ikoner som ändrar färg vid hover eller tema går inline (ofta som komponenter); statiska varumärkestillgångar går via <img>.
Oavsett vilket förblir vektorer skarpa i varje upplösning — idealiskt för ikoner och logotyper.