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
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.
<img> — taken azaman fili<img src="logo.svg" alt="Company logo" width="120" />
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.
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 -->
Zaɓin inline vs <img> SVG ya danganta da ko kana buƙatar kunnata/animeta zane-zanen (inline) ko kawai nuna shi tsanani (<img>).
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 <img>.
Ko ta hanya daya, vectors ci gida a kowane ƙuduri — daidai ne don ikonan da logos.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa