SVG एक vector इमेज फॉर्मॅट आहे (XML-आधारित), त्यामुळे ते कोणत्याही आकारात स्केल होऊ शकते धुंदीकडे न जाता. तुम्ही ते दोन मुख्य मार्गांनी समाविष्ट करू शकता, प्रत्येकाचे व्यापार-बंद आहेत.
इनलाइन SVG — HTML मध्ये सरासरी मार्कअप
फायदे: तुम्ही ते CSS (fill, stroke) सह स्टाइल करू शकता, त्याचे भाग animate करू शकता, currentColor द्वारे रंग बदलू शकता (मजकूराचा रंग प्राप्त करते), आणि इव्हेंट्सला प्रतिक्रिया दर्शवू शकता — कारण ते खरे DOM आहे. कोणता अतिरिक्त HTTP विनंती नाही.
नुकसान: HTML ला बुडते, स्वतंत्रपणे कॅश केलेले नाही, पुनरावृत्त आयकन मार्कअप डुप्लिकेट करते.
<img> द्वारे — फाइल म्हणून संदर्भित<img src="logo.svg" alt="Company logo" width="120" />
फायदे: ब्राउজरद्वारे कॅश केले, HTML स्वच्छ ठेवते, सोपे. नुकसान: तुम्ही नाही शकता त्याच्या आंतरिक गोष्टी तुमच्या CSS/JS सह स्टाइल किंवा स्क्रिप्ट करा — ते एक अपारदर्शक इमेज आहे.
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 -->
इनलाइन वर्स <img> SVG निवडणे हे खाली येते की तुम्हाला ग्राफिकला स्टाइल/animate करायचे आहे (इनलाइन) किंवा फक्त त्याचे प्रदर्शन कुशलतेने करायचे (<img>).
आयकन जे होव्हर वर रंग बदलतात किंवा थीम इनलाइन जातात (अनेकदा घटक म्हणून); स्थिर ब्रँड मालमत्ता <img> द्वारे जाते.
कोणत्याही पद्धतीने, vector प्रत्येक रिजोल्यूशनवर स्वच्छ राहते — आयकन आणि लोगोसाठी आदर्श.