इनलाइन SVG वर्स img - कधी कुणाला वापरायचे?

Question

Accepted Answer

SVG एक **vector** इमेज फॉर्मॅट आहे (XML-आधारित), त्यामुळे ते कोणत्याही आकारात स्केल होऊ शकते धुंदीकडे न जाता. तुम्ही ते दोन मुख्य मार्गांनी समाविष्ट करू शकता, प्रत्येकाचे व्यापार-बंद आहेत. ## इनलाइन SVG — HTML मध्ये सरासरी मार्कअप ```html ``` **फायदे:** तुम्ही ते CSS (`fill`, `stroke`) सह स्टाइल करू शकता, त्याचे भाग animate करू शकता, `currentColor` द्वारे रंग बदलू शकता (मजकूराचा रंग प्राप्त करते), आणि इव्हेंट्सला प्रतिक्रिया दर्शवू शकता — कारण ते खरे DOM आहे. कोणता अतिरिक्त HTTP विनंती नाही. **नुकसान:** HTML ला बुडते, स्वतंत्रपणे कॅश केलेले नाही, पुनरावृत्त आयकन मार्कअप डुप्लिकेट करते. ## SVG `` द्वारे — फाइल म्हणून संदर्भित ```html

``` **फायदे:** ब्राउজरद्वारे कॅश केले, HTML स्वच्छ ठेवते, सोपे. **नुकसान:** तुम्ही **नाही** शकता त्याच्या आंतरिक गोष्टी तुमच्या CSS/JS सह स्टाइल किंवा स्क्रिप्ट करा — ते एक अपारदर्शक इमेज आहे. ## निर्णय मार्गदर्शक ```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 ``` ## हे का महत्वाचे आहे इनलाइन वर्स `` SVG निवडणे हे खाली येते की तुम्हाला ग्राफिकला **स्टाइल/animate** करायचे आहे (इनलाइन) किंवा फक्त त्याचे **प्रदर्शन** कुशलतेने करायचे (``). आयकन जे होव्हर वर रंग बदलतात किंवा थीम इनलाइन जातात (अनेकदा घटक म्हणून); स्थिर ब्रँड मालमत्ता `` द्वारे जाते. कोणत्याही पद्धतीने, vector प्रत्येक रिजोल्यूशनवर स्वच्छ राहते — आयकन आणि लोगोसाठी आदर्श.

इनलाइन SVG — HTML मध्ये सरासरी मार्कअप

SVG <img> द्वारे — फाइल म्हणून संदर्भित

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

प्रवेशयोग्यता

हे का महत्वाचे आहे

SVG `<img>` द्वारे — फाइल म्हणून संदर्भित