SVG Symbol स्प्राइट: ID, ViewBox और रंग सुरक्षित रखें

SVG symbol स्प्राइट एक SVG फ़ाइल में नाम वाली आइकन परिभाषाएँ रखता है। हर दिखाई आइकन आवश्यक परिभाषा का संदर्भ देने के लिए <use> एलिमेंट लेता है। पैकेजिंग तभी काम करती है जब अलग फ़ाइलों से आने पर फ़्रैगमेंट ID, निर्देशांक प्रणाली और रंग नियम सुरक्षित रहें।

पूरा फ़ोल्डर मिलाने से पहले दो आइकन से शुरू करें। इस मार्गदर्शिका में पत्ती चौकोर और दायाँ तीर चौड़ा निर्देशांक क्षेत्र लेता है। पत्ती का पाथ दोहराए बिना वह दो रंगों में दिखेगी। तीर पत्ती के कैनवास में मजबूर होने के बजाय अपना अनुपात रखेगा।

स्रोत आइकन को अब भी एक जैसी आकृति, पैडिंग या दृश्य वज़न चाहिए तो पहले SVG UI किट तैयारी कार्यप्रवाह पूरा करें। स्प्राइट चित्र व्यवस्थित करता है; उसकी मरम्मत नहीं।

दो नाम वाली symbol परिभाषाएँ बनाएँ

यह मौलिक उदाहरण sprite.svg नाम से सहेजें:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

पत्ती का नाम pv-leaf और तीर का pv-arrow है। पृष्ठ यही पहचान माँगेगा। MDN symbol को use से दृश्य इंस्टेंस बनाने वाली पुनः उपयोग योग्य ग्राफ़िक्स परिभाषा बताता है। केवल symbol वाली फ़ाइल अकेले खोलने पर खाली लग सकती है क्योंकि परिभाषाएँ सीधे रेंडर नहीं होतीं।

viewBox उसी चित्र के साथ रखें जिसका वर्णन करता है। यहाँ पत्ती 0 0 24 24 और तीर 0 0 32 16 लेता है। ये अंक निर्देशांक सीमाएँ बताते हैं, आवश्यक प्रदर्शन आकार नहीं। ज्यामिति बदले बिना तीर की सीमा 24 बाय 24 करने से सामान्यीकरण नहीं होता। निर्देशांक और व्यूपोर्ट का संबंध जानने के लिए MDN का viewBox संदर्भ देखें।

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

पृष्ठ से स्प्राइट का संदर्भ दें

sprite.svg, अपना HTML पृष्ठ और icons.css एक ही सर्व किए फ़ोल्डर में रखें। समान ओरिजिन वाले HTTP पूर्वावलोकन से शुरू करें ताकि स्थानीय फ़ाइल प्रतिबंध या अलग होस्ट सामान्य संदर्भ त्रुटि को न छिपाए।

icons.css में ये नियम जोड़ें और पृष्ठ से वह स्टाइलशीट लोड करें:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

फिर HTML बॉडी में ये इंस्टेंस जोड़ें:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

# से पहले का हिस्सा फ़ाइल ढूँढ़ता है; बाद का हिस्सा symbol चुनता है। आधुनिक एट्रिब्यूट href है। MDN का use संदर्भ बाहरी संदर्भ बताता है और चेताता है कि ब्राउज़र अलग ओरिजिन की लोडिंग मना कर सकते हैं। यह न मानें कि काम करता स्प्राइट CDN में खिसकाना बिना अतिरिक्त बदलाव चलेगा; वास्तविक वितरण स्थान जाँचें।

ब्राउज़र के डिफ़ॉल्ट रूट एलिमेंट के फ़ॉन्ट आकार पर नियम पत्ती को 24 बाय 24 CSS पिक्सेल बॉक्स और तीर को 48 बाय 24 बॉक्स देते हैं। आकार rem लेते हैं, इसलिए रूट एलिमेंट का फ़ॉन्ट आकार अलग हो तो बदलते हैं। बड़े पूर्वावलोकन के साथ वास्तविक कंपोनेंट में भी आइकन की तुलना करें: सही बॉक्स में भी अत्यधिक पैडिंग वाला चित्र हो सकता है।

ऊपर का बटन आइकन प्रस्तुति और नाम दिखाता है। उत्पाद में उपयोग करते समय अनुप्रयोग का अपना ऐक्शन हैंडलर जोड़ें।

फ़ाइलें मिलाने से पहले रंग नियम चुनें

दोनों उदाहरण पाथ स्पष्ट fill="currentColor" लेते हैं। इससे उपयोग करने वाला इंस्टेंस आसपास का CSS color लेता है: बटन नीला-हरा देता है और तीर गहरा नीला। color संदर्भ बताता है कि currentColor भरण और स्ट्रोक का मान दे सकता है।

पत्ती की दूसरी उपस्थिति के लिए वही pv-leaf संदर्भ लें और इंस्टेंस का color मूँगा रंग करें। केवल दूसरा थीम रंग बनाने के लिए पाथ न दोहराएँ।

बहुरंगी लोगो का हर भरण currentColor न करें। इससे जानबूझकर पैलेट हटता है। स्प्राइट पैकेजिंग से पहले ही रंग बदलता हो तो SVG रंग समस्या मार्गदर्शिका से पहले की समस्या अलग करें।

संदर्भित पाथ तक पहुँचने वाले मनमाने पृष्ठ सेलेक्टर के आसपास स्प्राइट API बनाने से भी बचें। MDN use में क्लोन सामग्री की शैली सीमाएँ बताता है। स्रोत चित्र में इच्छित रंग व्यवहार रखें और उसे उपयोग करने वाला कंपोनेंट जाँचें।

चित्र के अंदर दोहराए ID रोकें

अनूठे symbol नाम आवश्यक हैं, लेकिन निर्यात SVG के अंदर और ID हो सकते हैं: ग्रेडिएंट, मास्क, क्लिप पाथ या अन्य संदर्भित परिभाषाएँ। MDN हर SVG id को उसके नोड वृक्ष में अनूठा माँगता है। पहले अलग दो फ़ाइलें मिलाने पर नियम टूट सकता है।

मान लें पत्ती निर्यात और बैज निर्यात दोनों में paint0 नाम का ग्रेडिएंट है। पत्ती के ग्रेडिएंट ID और मेल खाते संदर्भ में साथ उपसर्ग लगाएँ:

फ़्रैगमेंट अब भी इच्छित परिभाषा को इंगित करे। MDN के fill उदाहरण ग्रेडिएंट ID और url(#...) का संबंध दिखाते हैं। दोनों संदर्भ पत्ती के ग्रेडिएंट पर करने के बजाय बैज को अपना उपसर्ग दें।

हमारे दो-पाथ उदाहरण में अंदर की परिभाषाएँ नहीं हैं, इसलिए पहली जाँच के लिए उपयोगी है। वास्तविक निर्यात में फ़ाइलें मिलाने से पहले सभी ID और स्थानीय संदर्भ की सूची बनाएँ। अनुकूलक या जनरेटर के बाद दिए स्प्राइट पर सूची फिर जाँचें। केवल बाहरी symbol का नाम बदलने से दोहराए अंदरूनी ID नहीं सुलझते।

हर दृश्य इंस्टेंस का नाम संदर्भ में दें

दिखाई शब्द “Garden” के पास पत्ती वही सूचना दोहराती है जो बटन पहले देता है। उसका SVG aria-hidden="true" लेता है और बटन टेक्स्ट नाम देता है। एट्रिब्यूट सजावटी SVG पर रखें, इंटरैक्टिव बटन पर नहीं। MDN का aria-hidden मार्गदर्शन सजावटी सामग्री और फ़ोकस योग्य एलिमेंट छिपाने की सावधानी बताता है।

अकेले तीर की भूमिका अलग है: वह पास के टेक्स्ट के बिना दिशा बताता है। बाहरी SVG role="img" और aria-label="Right direction" लेता है, MDN के एम्बेडेड SVG छवि का नाम देने के मार्गदर्शन के अनुसार।

उपयोग स्थान पर लेबल तय करें। पुनः उपयोग योग्य पत्ती अलग इंटरफ़ेस में “बगीचा”, “पौधे आधारित” या केवल सजावट हो सकती है। ब्राउज़र के सुलभता निरीक्षण टूल और लक्ष्य सहायक तकनीक से अंतिम कंपोनेंट का सुलभता के लिए दिए गए नाम जाँचें; केवल पुनः उपयोग योग्य symbol संदर्भ सिद्ध नहीं करता।

केवल स्रोत नहीं, दिए स्प्राइट को जाँचें

हमने मौलिक उदाहरण समान ओरिजिन वाले ब्राउज़र परीक्षण फ़ाइल में जाँचा। पत्ती नीले-हरे और मूँगा रंग में रेंडर हुई, चौड़े तीर ने आकार रखा और जानबूझकर गायब फ़्रैगमेंट ने खाली आइकन बॉक्स दिया। ब्राउज़र के सुलभता ट्री ने Garden बटन और नाम वाला तीर दिखाया। यह उस परीक्षण की जाँच है, कई ब्राउज़र या स्क्रीन रीडर प्रमाणन नहीं।

पैकेजिंग के बाद वही छोटा जाँच सेट लें:

1. फ़ाइल: पुष्टि करें कि पृष्ठ अंतिम URL से इच्छित स्प्राइट लोड करता है।
2. फ़्रैगमेंट: बड़े-छोटे अक्षरों सहित हर href फ़्रैगमेंट दिए symbol ID से मिलाएँ।
3. सीमाएँ: छोटे कंपोनेंट और बड़े चित्र की तुलना करते हुए क्लिपिंग, पैडिंग तथा अनुपात जाँचें।
4. रंग: एक-रंग आइकन दो थीम रंगों में रेंडर करें और स्थिर रंग वाला चित्र अलग देखें।
5. अंदरूनी संदर्भ: अनुकूलन के बाद उपसर्ग वाले रंग, मास्क और क्लिपिंग संदर्भ अब भी सही जुड़ते हैं या नहीं, जाँचें।
6. अर्थ: हर इंटरैक्टिव कंपोनेंट का नाम और अर्थपूर्ण अकेली छवि का लेबल देखें।

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

केवल PNG आइकन स्रोत हो तो

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

साफ़ मूल SVG मौजूद हो तो वही लें। फिर ट्रेस करना टूटा फ़्रैगमेंट संदर्भ सुधारे बिना दूसरा आकार पुनर्प्राप्ति चरण जोड़ता है। बाकी समस्या पैकेजिंग के बजाय चित्र में हो तो SVG संपादन और तैयारी मार्गदर्शिकाएँ देखें।

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

सीधे खोलने पर SVG स्प्राइट खाली क्यों है? केवल symbol परिभाषाओं वाला स्प्राइट सीधे उन्हें नहीं दिखाता। खाली दस्तावेज़ को खराब चित्र मानने से पहले सही फ़ाइल पाथ और फ़्रैगमेंट ID वाले SVG use इंस्टेंस से जाँचें।

क्या हर symbol का समान viewBox चाहिए? नहीं। पैकेजिंग में हर स्वीकृत निर्देशांक प्रणाली रखें। समान डिज़ाइन सिस्टम ग्रिड वाले आइकन समान सीमा ले सकते हैं, लेकिन केवल viewBox अंक बदलने से चौड़ा symbol चौकोर आइकन नहीं बनता।

पृष्ठ रंग बदलने से आइकन का रंग क्यों नहीं बदलता? स्रोत रंग नियम देखें। स्थिर भरण और currentColor से लिखा पाथ अलग हैं। जानबूझकर बहुरंगी चित्र रखें और स्पष्ट चुनें कि कौन से भरण या स्ट्रोक इंस्टेंस का रंग लें।

क्या स्प्राइट दूसरे डोमेन पर रख सकता हूँ? यह न मानें कि बाहरी use संदर्भ अलग ओरिजिन पर चलेगा। समान ओरिजिन वाले परीक्षण से शुरू करें, फिर वितरण बदलने से पहले वास्तविक होस्ट और ब्राउज़र लक्ष्य जाँचें। सफल स्थानीय उदाहरण अलग ओरिजिन से लोड करने का समर्थन सिद्ध नहीं करता।

स्रोत

1. MDN — symbol — पुनः उपयोग योग्य परिभाषाएँ और अप्रत्यक्ष रेंडरिंग।
2. MDN — use — बाहरी फ़्रैगमेंट, शैली सीमाएँ और ओरिजिन संबंधी प्रतिबंध।
3. MDN — viewBox — निर्देशांक सीमा और व्यूपोर्ट का संबंध।
4. MDN — color — SVG रंग में इनपुट के रूप में currentColor।
5. MDN — id — दस्तावेज़ वृक्ष में पहचान की विशिष्टता।
6. MDN — fill — ग्रेडिएंट URL जैसे रंग सर्वर संदर्भ।
7. MDN — aria-hidden — सजावटी सामग्री और फ़ोकस योग्य एलिमेंट सावधानियाँ।
8. MDN — img भूमिका — अर्थपूर्ण छवि के लिए लेबल वाला बाहरी SVG।

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