तपाईले inline SVG विरुद्ध img कहिले प्रयोग गर्नुपर्छ?

Question

Accepted Answer

SVG एक **vector** image format (XML-आधारित) हो, त्यसैले यो कुनै पनि आकारमा धमिलो नभई स्केल गर्न सक्छ। तपाई यसलाई दुई मुख्य तरिकामा समावेश गर्न सक्नुहुन्छ, प्रत्येकको ट्रेड-अफ छ। ## Inline SVG — HTML मा सीधै markup ```html ``` **फाइदा:** तपाई यसलाई CSS (`fill`, `stroke`) सँग स्टाइल गर्न सक्नुहुन्छ, यसको भागहरु एनिमेट गर्न सक्नुहुन्छ, `currentColor` मार्फत रंग परिवर्तन गर्न सक्नुहुन्छ (पाठ रंग विरासत गर्छ), र घटनाहरुमा प्रतिक्रिया जनाउन सक्नुहुन्छ — किनभने यो वास्तविक DOM हो। कुनै अतिरिक्त HTTP अनुरोध छैन। **बेफाइदा:** HTML लाई फुलायो, अलग गरी क्याश गरिएको छैन, दोहोरिएको icon markup लाई दोहोरीयो। ## SVG `` मार्फत — फाइल को रूप मा सन्दर्भित ```html

``` **फाइदा:** ब्राउजर द्वारा क्याश गरिएको, HTML लाई स्वच्छ राख्छ, सरल। **बेफाइदा:** तपाई **सक्नु हुन्न** यसको आन्तरिक भागहरु तपाइको CSS/JS सँग स्टाइल वा स्क्रिप्ट गर्न — यो अपारदर्शी 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 विरुद्ध `` SVG छनोट गर्नु आउँछ कि तपाईले graphic लाई **स्टाइल/एनिमेट** गर्न आवश्यकता छ (inline) वा सिर्फ यसलाई **प्रदर्शन** गर्न चाहनुहुन्छ (कुशलतापूर्वक) (``)। आइकन जो होभर मा रंग परिवर्तन गर्छ वा theme लाई inline जान्छन् (प्राय: कम्पोनेन्ट को रूप मा); स्थिर ब्राण्ड सम्पत्ति `` मार्फत जान्छन्। कुनै पनि तरिकामा, vector हरु हरेक रेजोलुसन मा कुरकुरा रहन्छन् — icon र लोगोको लागि आदर्श।

Inline SVG — HTML मा सीधै markup

SVG <img> मार्फत — फाइल को रूप मा सन्दर्भित

निर्णय गाइड

पहुँचयोग्यता

यो किन महत्वपूर्ण छ

SVG `<img>` मार्फत — फाइल को रूप मा सन्दर्भित