Yaushe ya kamata ka yi amfani da inline SVG vs img?

Question

Accepted Answer

SVG shine **vector** tsarin hoto (tushe na XML), don haka yana daidai zuwa kowane girma ba tare da kware ba. Kuna iya haɗa shi ta hanyoyi gida biyu, kowannensu yana da ciniki. ## Inline SVG — ɗigo kai tsaye a cikin HTML ```html ``` **Gaji:** kuna iya kunnata shi da CSS (`fill`, `stroke`), animeta sassa, canza launin ta `currentColor` (yaraniya launin rubutu), da amsa abubuwan — saboda shine ainihin DOM. Babu saɗakun HTTP abin kari. **Ciniki:** yana bugi HTML, ba a ajiya daban-daban ba, sake da ikonan kwafi alaminta. ## SVG ta `` — taken azaman fili ```html

``` **Gaji:** a jeren ta burauzar, jiya HTML tsabta, sauƙi. **Ciniki:** ba za ka iya kunnata ko rubutu cikin gidansu tare da CSS/JS ɗinku ba — hoto ce maraba. ## Jagora gida tsinkayi ```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 ``` ## Samantarwa ```html ``` ## Me yasa ya zama mahimmanci Zaɓin inline vs `` SVG ya danganta da ko kana buƙatar **kunnata/animeta** zane-zanen (inline) ko kawai **nuna** shi tsanani (``). Ikonan da suka canja launin a damje ko jiya ga jiya sun zo inline (sau da yawa a matsayin sassa); kasua kayayi static ta je ta ``. Ko ta hanya daya, vectors ci gida a kowane ƙuduri — daidai ne don ikonan da logos.

Inline SVG — ɗigo kai tsaye a cikin HTML

SVG ta <img> — taken azaman fili

Jagora gida tsinkayi

Samantarwa

Me yasa ya zama mahimmanci

SVG ta `<img>` — taken azaman fili