SVG एक वेक्टर छवि प्रारूप है (XML-आधारित), इसलिए यह बिना धुंधला हुए किसी भी आकार तक स्केल करता है। आप इसे दो मुख्य तरीकों से शामिल कर सकते हैं, प्रत्येक के साथ tradeoffs हैं।
Inline SVG — HTML में सीधे मार्कअप
लाभ: आप इसे CSS (fill, stroke) के साथ style कर सकते हैं, इसके parts को animate कर सकते हैं, currentColor के माध्यम से रंग बदल सकते हैं (text color inherit करता है), और events का जवाब दे सकते हैं — क्योंकि यह असली DOM है। कोई अतिरिक्त HTTP request नहीं।
नुकसान: HTML को बढ़ाता है, अलग से cache नहीं होता, दोहराए गए icons markup को duplicate करते हैं।
<img> — file के रूप में referenced<img src="logo.svg" alt="Company logo" width="120" />
लाभ: browser द्वारा cache किया जाता है, HTML को साफ रखता है, सरल। नुकसान: आप अपने CSS/JS से इसके internals को style या script नहीं कर सकते — यह एक opaque image है।
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 -->
Inline vs <img> SVG के बीच चुनाव इस बात पर निर्भर करता है कि क्या आपको graphic को style/animate करना है (inline) या बस इसे efficiently display करना है (<img>)।
Icons जो hover पर या theme के साथ रंग बदलते हैं वे inline जाते हैं (अक्सर components के रूप में); static brand assets <img> के through जाते हैं।
किसी भी तरीके से, vectors हर resolution पर crisp रहते हैं — icons और logos के लिए आदर्श।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें