इनलाइन SVG बनाम img: चित्र का व्यवहार चुनें

तैयार ग्राफ़िक दिखाना हो तो SVG को <img> एलिमेंट में लें। पृष्ठ को CSS या JavaScript से अलग-अलग आकार बदलने हों तो SVG इनलाइन रखें। दोनों तरीके वही वेक्टर चित्र अलग आकारों पर दिखा सकते हैं; इनलाइन रखना उसकी ज्यामिति बेहतर नहीं करता।

यह अंतर तब मायने रखता है जब लोगो ब्राउज़र टैब में सही दिखता है लेकिन वेबसाइट के रंग नियम को अनदेखा करता है। फ़ाइल ठीक हो सकती है। नियम के पास उसके अंदर जाने का रास्ता ही नहीं हो सकता। नीचे वही पहाड़ चित्र दोनों रूपों में है ताकि एसेट प्रक्रिया बदलने से पहले अंतर जाँच सकें।

ज़रूरी व्यवहार चुनें

बाहरी SVG <img> से दिखाने पर वेक्टर फ़ाइल ही रहता है। सीमा पृष्ठ और फ़ाइल के आंतरिक एलिमेंट के बीच है। पृष्ठ CSS छवि एलिमेंट का आकार बदल, घुमा या फीका कर सकती है, लेकिन .logo path जैसा चयनकर्ता उसके src संसाधन के पाथ तक नहीं पहुँच सकता। इनलाइन आकार पृष्ठ के दस्तावेज़ वृक्ष का हिस्सा बनते हैं। MDN की SVG जोड़ने की मार्गदर्शिका दोनों तरीके बताती है।

फ़ाइल में क्या है यह अभी जाँच रहे हों तो SVG फ़ाइल क्या है से शुरू करें। केवल .svg एक्सटेंशन का मतलब हर दृश्य विवरण पाथ होना नहीं है। स्टोरफ़्रंट हस्तांतरण के लिए फ़ाइल सामग्री सत्यापित करने के बाद Shopify कस्टम SVG आइकन मार्गदर्शिका अपनाएँ।

वही चित्र दोनों रूपों में जाँचें

इस प्रदर्शन में हमने हाथ से दो पहाड़ पाथ और एक सूरज वृत्त बनाया। चित्र अलग फ़ाइल से लोड किया और वही आकार HTML में पेस्ट किए। यह चित्र जोड़ने का परीक्षण है, PerfectVector रूपांतरण परिणाम नहीं।

हमारे Chromium ब्राउज़र परीक्षण में दोनों संस्करण शुरू में 360 × 240 CSS पिक्सेल घेरते थे और अंबर रंग का सूरज दिखाते थे। फिर हमने .sun को लक्ष्य बनाने वाला पृष्ठ नियम चालू किया। इनलाइन सूरज मूंगा रंग का हो गया; बाहरी छवि का सूरज अंबर रहा। दोनों बॉक्स 180 × 120 करने से उनका प्रदर्शन आकार बदला, यह अंतर नहीं।

1. अलग SVG फ़ाइल सहेजें

इस पूरे स्रोत से artwork.svg बनाएँ। viewBox चित्र का निर्देशांक क्षेत्र परिभाषित करता है। चौड़ाई और ऊँचाई स्पष्ट शुरुआती आयाम देते हैं।

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. छवि और इनलाइन प्रति जोड़ें

निम्न सामग्री artwork.svg के पास index.html में सहेजकर ब्राउज़र में खोलें। दोनों ग्राफ़िक की ज्यामिति और रंग एट्रिब्यूट समान हैं। इनलाइन संस्करण में सहायक तकनीक के लिए नाम भी है।

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

स्क्रीनशॉट उन्हीं आकारों के आसपास स्टाइल किया तुलना लेआउट इस्तेमाल करता है। ऊपर का छोटा उदाहरण व्यवहार दोहराना आसान रखता है।

3. एक बार में एक चीज़ बदलें

बॉडी से class="theme" हटाकर फिर लोड करें। दोनों सूरज अब अंबर होने चाहिए। क्लास वापस रखें; केवल इनलाइन सूरज मूंगा रंग का होना चाहिए। .artwork को width: 360px से width: 180px करें; कंटेनर में जगह हो तो दोनों ग्राफ़िक 180 × 120 होने चाहिए।

बाहरी छवि के सूरज को स्थायी बदलना हो तो artwork.svg में उसका fill संपादित करें। पृष्ठ स्थिति पर प्रतिक्रिया चाहिए तो इनलाइन मार्कअप या कोई अन्य सोच-समझकर चुना डिलीवरी तरीका लें। हमारी SVG रंग बदलने की मार्गदर्शिका फ़ाइल को संपादित करना बताती है।

.sun नाम इस उदाहरण के लिए जोड़ा गया था। रूपांतरित या निर्यात फ़ाइल में हर अर्थपूर्ण हिस्से के लिए उपयोगी क्लास मौजूद हो, यह ज़रूरी नहीं। जिन आकारों को नियंत्रित करना है उन्हें देखें और नाम दें; यह न मानें कि दृश्य ऑब्जेक्ट एक चुने जा सकने वाला पाथ है।

आकार और सुलभ नाम स्पष्ट रखें

चित्र HTML में लाते समय viewBox रखें। चौड़ाई और ऊँचाई एट्रिब्यूट उचित आधार के रूप में सेट करें, फिर स्क्रीन के आकार के अनुसार ढलने वाली CSS लगाएँ। इस 3:2 चित्र में width: 180px; height: auto अनुपात सुरक्षित रखता है। viewBox में बड़ा खाली मार्जिन दोनों तरीकों में चित्र क्षेत्र का हिस्सा रहता है; जोड़ने का तरीका बदलने से वह नहीं हटता।

लेआउट बॉक्स का अनुपात अलग हो तो preserveAspectRatio फिट मार्गदर्शिका पूरे चित्र को फिट करने, काटने और विकृत करने की तुलना करती है।

अर्थपूर्ण बाहरी छवि के लिए HTML <img> पर alt लिखें। अर्थपूर्ण इनलाइन छवि के लिए उदाहरण role="img" और उसके <title> की ओर संकेत करता aria-labelledby लेता है। इनलाइन SVG HTML छवि का alt एट्रिब्यूट नहीं लेता। ये नाम विकल्प MDN की HTML में SVG मार्गदर्शिका में हैं।

इनलाइन उदाहरण दोहराएँ तो हर शीर्षक ID अद्वितीय करें और उसका मेल खाता aria-labelledby अपडेट करें। यही अनुशासन ग्रेडिएंट, मास्क और क्लिपिंग पाथ की ID पर लागू है। बराबर अर्थ वाले दृश्य टेक्स्ट के पास सजावटी चित्र के लिए <img> पर खाली alt लें या aria-hidden="true" से इनलाइन SVG सहायक तकनीक से छिपाएँ। पूरे लिंक या बटन को संदर्भ में जाँचें ताकि उद्देश्य का नाम बना रहे।

कई पुनः इस्तेमाल होने वाले आइकन के लिए SVG प्रतीक स्प्राइट अलग परिभाषा और उसके इंस्टेंस का तरीका देता है। हर पृष्ठ में बहुत सारी प्रतियाँ पेस्ट करने से पहले तय करें कि यह पुनः इस्तेमाल चाहिए या नहीं।

प्रदर्शन को मापें

इनलाइन मार्कअप चित्र को अलग छवि संसाधन के रूप में मँगाने के बजाय आकार दस्तावेज़ में रखता है। इससे दस्तावेज़ का मार्कअप भी बढ़ता है। बाहरी फ़ाइल उसके URL, प्रतिक्रिया हेडर और कैश स्थिति के अनुसार ब्राउज़र कैश से दोबारा मिल सकती है। MDN HTTP कैशिंग मार्गदर्शिका ये शर्तें बताती है।

इनमें से कोई तथ्य यह सिद्ध नहीं करता कि कौन सा संस्करण पृष्ठ तेज़ बनाएगा। वास्तविक प्रति संख्या और वास्तविक SVG जटिलता के साथ पहली और दोबारा की गई विज़िट पर असली पृष्ठ के प्रदर्शन की तुलना करें। यह प्रदर्शन रंग पहुँच और आकार जाँचता है; यह लोडिंग गति का बेंचमार्क नहीं है।

बाहरी छवि मोड में CSS से आगे भी प्रतिबंध हैं। MDN बताता है कि छवि के रूप में इस्तेमाल SVG में JavaScript बंद रहती है और बाहरी संसाधन सीमित होते हैं। केवल गायब सुविधा चलाने के लिए अपरिचित SVG इनलाइन न करें। अविश्वसनीय मार्कअप पृष्ठ में जोड़ने से पहले देखें और साफ़ करें।

जब शुरुआती चित्र केवल PNG हो

स्रोत में ज़रूरी आकार न हों तो वेक्टराइज़ेशन इस चुनाव से पहले आता है। उपयुक्त रास्टर लोगो या चित्र के लिए PerfectVector से PNG को SVG में बदलें, परिणाम की स्रोत से तुलना करें और स्वीकृत SVG चित्र की मूल फ़ाइल रखें। क्लास जोड़ने या वेब प्रति तैयार करने से पहले बाहरी आकृति, छेद और छोटे रंग क्षेत्र जाँचें।

PerfectVector वेक्टर चित्र देता है। आपको अब भी चुनना है कि कौन से हिस्से CSS पर प्रतिक्रिया दें, अर्थपूर्ण नाम जोड़ने हैं और अंतिम पृष्ठ जाँचना है। छवि बदलने से अर्थपूर्ण क्लास नाम वाला कंपोनेंट अपने आप नहीं बनता। मौजूदा SVG में उपयोगी पाथ हों तो रेंडर प्रति ट्रेस करने के बजाय उन्हीं पर काम करें।

एम्बेड की गई रास्टर छवि वाला SVG भी जाँचें। ऐसी फ़ाइल इनलाइन पेस्ट करने से उसका <image> एलिमेंट खुलता है; उस एलिमेंट के पिक्सेल अलग रंग बदलने योग्य आकार नहीं बनते। फ़ोटो को फ़ोटो जैसा रहना चाहिए तो उचित रास्टर डिलीवरी फ़ॉर्मैट रखें।

अंतिम पृष्ठ जाँचें

• पृष्ठ CSS जाँचने से पहले अलग चित्र सही दिखना सुनिश्चित करें।
• तैयार प्रदर्शन के लिए <img> या एलिमेंट पर सीधे नियंत्रण के लिए इनलाइन SVG चुनें।
• सबसे संकरे समर्थित लेआउट पर रेंडर आकार और अनुपात सत्यापित करें।
• जिस खास आकार का रंग बदलना है उसे जाँचें; व्यापक path नियम पर निर्भर न रहें।
• छवि नाम, डुप्लिकेट ID और बाहरी लिंक या बटन जाँचें।
• निर्णय पर असर हो तो लोडिंग व्यवहार मापें; इस उदाहरण से गति का परिणाम न निकालें।

अक्सर पूछे जाने वाले प्रश्न

img टैग इस्तेमाल करने पर क्या SVG बिटमैप हो जाता है? नहीं। img से लोड SVG अब भी वेक्टर ज्यामिति रेंडर कर सकता है। छवि एलिमेंट होस्ट पृष्ठ को उसके आंतरिक आकार सीधे चुनने से रोकता है; वह आकारों को PNG नहीं बनाता।

currentColor मेरे पृष्ठ के टेक्स्ट रंग का अनुसरण क्यों नहीं करता? बाहरी SVG छवि का अपना स्टाइल संदर्भ है। पृष्ठ का रंग अपने आप उस फ़ाइल का currentColor नहीं बनता। उसका रंग पृष्ठ से लेना चाहिए तो इनलाइन SVG लें और संबंधित भरण या स्ट्रोक currentColor इस्तेमाल करने के लिए लिखें।

क्या मुझे मौजूदा SVG को इनलाइन रखने से पहले उसका रूपांतरण करना चाहिए? इच्छित वेक्टर आकार पहले से हों तो रूपांतरण नहीं चाहिए। मार्कअप देखें, ज़रूरी संदर्भ सुरक्षित रखें, उचित नाम जोड़ें और पृष्ठ में जाँचें। रास्टर से वेक्टर रूपांतरण केवल रास्टर स्रोत से आकार वापस बनाने के लिए प्रासंगिक है।

स्रोत

1. MDN — HTML में वेक्टर ग्राफ़िक्स जोड़ना — बाहरी छवि और इनलाइन जोड़ने का व्यवहार।
2. MDN — HTML में SVG परिचय — इनलाइन मार्कअप, viewBox और सुलभ नाम।
3. MDN — HTTP कैशिंग — कैश पुनः इस्तेमाल प्रतिक्रिया नीति और संसाधन पहचान पर निर्भर है।
4. MDN — छवि के रूप में SVG — छवि संदर्भ में स्क्रिप्ट और संसाधन प्रतिबंध।

चित्र के काम के अनुसार जोड़ने का तरीका चुनें, फिर पृष्ठ के वास्तविक स्टाइल से जाँचें। केवल उपयुक्त PNG स्रोत हो तो पहले उसके वेक्टर आकार वापस बनाएँ, परिणाम देखें और स्वीकृत चित्र उस तरीके के लिए तैयार करें।