SVG er et vektorbildeformat (XML-basert), så det skaleres til enhver størrelse uten å bli uskarpt. Du kan inkludere det på to hovedmåter, hver med avveininger.
Inline SVG — markup direkte i HTML
Fordeler: du kan style det med CSS (fill, stroke), animere delene, endre farge via currentColor (arver tekstfarge), og reagere på hendelser — fordi det er ekte DOM. Ingen ekstra HTTP-forespørsel.
Ulemper: oppblåser HTML, ikke bufret separat, gjentatte ikoner dupliserer markup.
<img> — referert som en fil<img src="logo.svg" alt="Company logo" width="120" />
Fordeler: bufret av nettleseren, holder HTML ren, enkelt. Ulemper: du kan ikke style eller script internals med CSS/JS — det er et ugjennomsiktig bilde.
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 mellom inline og <img> SVG kommer ned på om du trenger å style/animere grafikken (inline) eller bare vise den effektivt (<img>).
Ikoner som endrer farge på hover eller tema går inline (ofte som komponenter); statiske merkeressurser går via <img>.
Uansett forblir vektorer skarpe ved hver oppløsning — ideelt for ikoner og logoer.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner