आपको inline SVG बनाम img कब उपयोग करना चाहिए?

Question

Accepted Answer

SVG एक **वेक्टर** छवि प्रारूप है (XML-आधारित), इसलिए यह बिना धुंधला हुए किसी भी आकार तक स्केल करता है। आप इसे दो मुख्य तरीकों से शामिल कर सकते हैं, प्रत्येक के साथ tradeoffs हैं। ## Inline SVG — HTML में सीधे मार्कअप ```html ``` **लाभ:** आप इसे CSS (`fill`, `stroke`) के साथ style कर सकते हैं, इसके parts को animate कर सकते हैं, `currentColor` के माध्यम से रंग बदल सकते हैं (text color inherit करता है), और events का जवाब दे सकते हैं — क्योंकि यह असली DOM है। कोई अतिरिक्त HTTP request नहीं। **नुकसान:** HTML को बढ़ाता है, अलग से cache नहीं होता, दोहराए गए icons markup को duplicate करते हैं। ## SVG via `` — file के रूप में referenced ```html

``` **लाभ:** browser द्वारा cache किया जाता है, HTML को साफ रखता है, सरल। **नुकसान:** आप अपने CSS/JS से इसके internals को style या script **नहीं** कर सकते — यह एक opaque image है। ## निर्णय मार्गदर्शन ```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 ``` ## सुलभता ```html ``` ## यह क्यों महत्वपूर्ण है Inline vs `` SVG के बीच चुनाव इस बात पर निर्भर करता है कि क्या आपको graphic को **style/animate** करना है (inline) या बस इसे efficiently **display** करना है (``)। Icons जो hover पर या theme के साथ रंग बदलते हैं वे inline जाते हैं (अक्सर components के रूप में); static brand assets `` के through जाते हैं। किसी भी तरीके से, vectors हर resolution पर crisp रहते हैं — icons और logos के लिए आदर्श।

Inline SVG — HTML में सीधे मार्कअप

SVG via <img> — file के रूप में referenced

निर्णय मार्गदर्शन

सुलभता

यह क्यों महत्वपूर्ण है

SVG via `<img>` — file के रूप में referenced