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