Når bør du bruke inline SVG versus img?

Question

Accepted Answer

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 ```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. ## SVG via `` — referert som en fil ```html

``` **Fordeler:** bufret av nettleseren, holder HTML ren, enkelt. **Ulemper:** du **kan ikke** style eller script internals med CSS/JS — det er et ugjennomsiktig bilde. ## Beslutningsveiledning ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Tilgjengelighet ```html ``` ## Hvorfor det er viktig Valget mellom inline og `` SVG kommer ned på om du trenger å **style/animere** grafikken (inline) eller bare **vise** den effektivt (``). Ikoner som endrer farge på hover eller tema går inline (ofte som komponenter); statiske merkeressurser går via ``. Uansett forblir vektorer skarpe ved hver oppløsning — ideelt for ikoner og logoer.

Inline SVG — markup direkte i HTML

SVG via <img> — referert som en fil

Beslutningsveiledning

Tilgjengelighet

Hvorfor det er viktig

SVG via `<img>` — referert som en fil