Kdaj bi moral uporabiti vstavljen SVG v primerjavi s sliko?

Question

IT Interview Practice · Accepted Answer

SVG je **vektorski** format slike (osnovan na XML), zato se brez zamegljenja prilagodi katerikoli velikosti. Vključite ga lahko na dva glavna načina, vsak s svojimi kompromisi. ## Vstavljen SVG — označevanje neposredno v HTML ```html ``` **Prednosti:** lahko ga stiliziraš s CSS (`fill`, `stroke`), animiraš njegove dele, spremeniš barvo prek `currentColor` (deduje barvo besedila) in se odzoveš na dogodke — ker je pravi DOM. Brez dodatne HTTP zahteve. **Slabosti:** povečuje obseg HTML, se ne predpomnijo posebej, podvojene ikone podvojijo označevanje. ## SVG prek `` — sklican kot datoteka ```html

``` **Prednosti:** predpomnjen s strani brskalnika, ohrani HTML čist, preprosto. **Slabosti:** **ne moreš** stilizirati ali skriptirati njegove notranjosti s svojim CSS/JS — je neprosojni grafični element. ## Vodnik za odločitev ```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 ``` ## Dostopnost ```html ``` ## Zakaj je to pomembno Odločitev med vstavljenim in `` SVG se nanaša na to, ali moraš **stilizirati/animirati** grafiko (vstavljena) ali jo le **prikažeš** učinkovito (``). Ikone, ki spremenijo barvo ob lebdenju ali temo, gredo vstavljena (pogosto kot komponente); statični blagajni prejdejo prek ``. V vsakem primeru ostanejo vektorji ostri pri vsaki ločljivosti — idealno za ikone in logotipe.

Kdaj bi moral uporabiti vstavljen SVG v primerjavi s sliko?

Vstavljen SVG — označevanje neposredno v HTML

SVG prek `<img>` — sklican kot datoteka

Vodnik za odločitev

Dostopnost

Zakaj je to pomembno

Povezana vprašanja

Vstavljen SVG — označevanje neposredno v HTML

SVG prek <img> — sklican kot datoteka

Vodnik za odločitev

Dostopnost

Zakaj je to pomembno

Povezana vprašanja

SVG prek `<img>` — sklican kot datoteka