Shopify कस्टम SVG आइकन: साफ़ ब्रांड निशान तैयार करें

कस्टम SVG आइकन Shopify थीम में दो व्यावहारिक तरीकों से आ सकता है: फ़ाइल को थीम एसेट के रूप में अपलोड करके इमेज टैग से दिखाएँ, या उसका मार्कअप Liquid स्निपेट में रखकर आइकन की जगह वह स्निपेट रेंडर करें। पहला तरीका स्थिर रंग के निशान के लिए सरल है। दूसरा पाथ और रंग पर सीधा नियंत्रण देता है। थीम एडिटर में कौन-से नियंत्रण दिखेंगे, यह थीम पर निर्भर है, इसलिए कोड बदलने से पहले मौजूदा आइकन ब्लॉक जाँचें।

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

चुनें कि आइकन कहाँ होना चाहिए

Shopify थीम में फ़ाइलों के लिए assets और पुनः इस्तेमाल योग्य Liquid मार्कअप के लिए snippets डायरेक्टरी होती है। Shopify अपनी थीम संरचना में दोनों बताता है और थीम कोड मार्गदर्शिका में कोड संपादन से पहले थीम एडिटर विकल्प जाँचना सुझाता है। कस्टम SVG फ़ील्ड वाली थीम में नीचे के किसी कोड तरीके की ज़रूरत नहीं हो सकती। एक थीम में फ़ील्ड होना हर थीम में होने का संकेत नहीं।

वितरण के दो तरीके

अंतर इसलिए अहम है कि पेज की CSS सामान्य <img> से लोड SVG के अंदर नहीं पहुँच सकती। इनलाइन पाथ currentColor इस्तेमाल कर सकते हैं, जिसका मान CSS color प्रॉपर्टी से आता है। MDN की SVG इमेज संदर्भ मार्गदर्शिका और उसकी currentColor व्याख्या देखें। सामान्य ब्राउज़र उदाहरणों के लिए इनलाइन SVG और इमेज टैग की तुलना पढ़ें।

थीम बदलने से पहले SVG तैयार करें

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

1. साफ़ मूल प्राप्त करें। मूल वेक्टर डिज़ाइन हो तो उससे SVG एक्सपोर्ट करें। केवल सपाट PNG हो तो PerfectVector उस एक चरण में मदद कर सकता है: क्लिपआर्ट से SVG प्रक्रिया में संभावित SVG बनाएँ, फिर डाउनलोड फ़ाइल वेक्टर एडिटर में खोलें। बाहरी आकृति और अलग आकृतियाँ PNG से मिलाएँ। ट्रेस शुरुआत है, हूबहू ज्यामिति का वादा नहीं।
2. संरचना जाँचें। पुष्टि करें कि दिखाई देने वाला निशान पाथ या मूल वेक्टर आकृतियों का है, एक एम्बेडेड रास्टर <image> आयत का नहीं। अनजाने पृष्ठभूमि बॉक्स, बिखरे टुकड़े, दोहरे कंटूर और छोटे रंग क्षेत्र हटाएँ। PNG आइकन तैयारी मार्गदर्शिका पूरे सेट में समान ग्रिड और दृष्टिगत आकार समझाती है।
3. कैनवास और रंग सेट करें। एक्सपोर्ट में उचित पैडिंग वाला viewBox दें। निशान दो रंगों का रहना हो तो स्थिर ब्रांड रंग रखें। एक रंग का आइकन थीम रंग लेना हो तो इच्छित पाथ में currentColor रखें। SVG रंग बदलना समझाता है कि तय लिखा फ़िल बाद के रंग बदलाव को क्यों रोक सकता है।
4. फ़ाइल को कोड की तरह जाँचें। केवल आइकन के ज़रूरी तत्व और एट्रिब्यूट रखें। थीम में इनलाइन रखने से पहले अनपेक्षित स्क्रिप्ट, बाहरी संदर्भ, एडिटर का अतिरिक्त डेटा और अविश्वसनीय मार्कअप हटाएँ। साफ़ SVG को आइकन आकार और बड़े निरीक्षण आकार पर खोलें; दोनों अलग गलतियाँ पकड़ते हैं।

छोटे एकरंगी तारे के लिए मूल इतना सरल हो सकता है। नीचे का पाथ मूल उदाहरण है, Shopify का दिया आइकन या PerfectVector रूपांतरण परिणाम नहीं। उसमें स्पष्ट निर्देशांक प्रणाली है और एम्बेडेड इमेज नहीं:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

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

तरीका A: थीम एसेट दिखाएँ

Shopify का asset_url फ़िल्टर थीम की assets डायरेक्टरी की फ़ाइल का CDN URL देता है। जाँचा SVG वहाँ जोड़ें, फिर उपयुक्त Liquid टेम्पलेट, सेक्शन या स्निपेट में उसका सटीक फ़ाइल नाम संदर्भित करें। नीचे का सरल उदाहरण मानता है कि brand-mark.svg दृश्य टेक्स्ट के पास स्थिर रंग का सजावटी निशान है:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

इमेज ऐसी जानकारी दे जो पास का टेक्स्ट न देता हो तो वर्णनात्मक alt दें। केवल सजावटी इमेज के लिए alt="" उपयुक्त है। Shopify की थीम सुलभता मार्गदर्शिका हर इमेज पर alt एट्रिब्यूट और सजावटी आइकन पर खाली मान माँगती है। स्पष्ट चौड़ाई और ऊँचाई लोड होते समय जगह भी आरक्षित करती हैं, जैसा Shopify की एसेट वितरण मार्गदर्शिका समझाती है।

यह तरीका पेज की नज़र में SVG को एक इमेज रखता है। थीम रंग बदले तो SVG फ़िल अपडेट करें या इनलाइन तरीका चुनें; यह न मानें कि पैरेंट का CSS नियम फ़ाइल का रंग बदल देगा। एक स्टोर की फ़ाइल URL दूसरी थीम में पेस्ट न करें; asset_url को थीम एसेट का स्थान तय करने दें।

तरीका B: इनलाइन आइकन स्निपेट रेंडर करें

बार-बार इस्तेमाल होने वाले एक रंग के आइकन के लिए जाँचा SVG मार्कअप snippets/brand-mark-icon.liquid जैसे स्निपेट में रखें। Shopify के स्निपेट दस्तावेज़ पुनः इस्तेमाल योग्य मार्कअप डालने के लिए {% render %} लेते हैं। न्यूनतम स्निपेट आसपास की टेक्स्ट शैली का रंग ले सकता है:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

फिर संबंधित थीम फ़ाइल में उसे रेंडर करें:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

यहाँ aria-hidden="true" केवल पास के दृश्य टेक्स्ट को सजाने वाले आइकन के लिए है। आइकन अकेले बटन या लिंक का लेबल हो तो सजावटी SVG पर निर्भर होने के बजाय नियंत्रण को सुलभ नाम दें। कीबोर्ड और स्क्रीन रीडर से परखें। अलग-अलग एकबारगी इनलाइन मान बिखेरने के बजाय उसका CSS रंग और आयाम थीम की सामान्य शैली प्रणाली में रखें।

स्निपेट पुनः इस्तेमाल योग्य है, लेकिन थीम कोड ही है। Shopify कोड बदलाव से पहले थीम की प्रति बनाने की सलाह देता है। प्रति में बदलाव करें, ठीक वही पेज या सेक्शन पूर्वावलोकन में देखें और मूल स्निपेट सेव रखें, ताकि थीम अपडेट के बाद तुलना कर सकें। थीम विशेष की आइकन लाइब्रेरी के अपने आर्ग्युमेंट और संरचना हो सकते हैं; अंतर्निहित आइकन बदलने से पहले वे फ़ाइलें देखें। वर्तमान आइकन लाइब्रेरी पर Shopify Community चर्चा दिखाती है कि पूरी लाइब्रेरी रेंडर करना उससे एक आइकन चुनने जैसा क्यों नहीं होता।

अंतिम आकार पर वितरण जाँचें

फ़ाइल तकनीकी रूप से मान्य हो सकती है, फिर भी स्टोरफ़्रंट में गलत दिख सकती है। थीम हल्की और गहरी पृष्ठभूमियाँ इस्तेमाल करे तो दोनों पर पेज देखें। वास्तविक CSS आकार, संकरे व्यूपोर्ट और पास के आइकन के साथ निशान जाँचें। पुष्टि करें कि छेद खुला है, रंग का कंट्रास्ट पर्याप्त है और viewBox या कंटेनर आइकन काट नहीं रहा।

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

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

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

क्या हर Shopify थीम की Customize स्क्रीन से SVG आइकन अपलोड कर सकते हैं? नहीं। कुछ थीम आइकन या कस्टम SVG फ़ील्ड देती हैं; दूसरी में एसेट या कोड संपादन चाहिए। फ़ील्ड मानने से पहले उस खास थीम के सेक्शन और दस्तावेज़ जाँचें।

अपलोड किया SVG थीम रंग क्यों नहीं अपनाता? इमेज टैग से इस्तेमाल SVG इमेज संसाधन है, इसलिए पेज CSS अंदर के पाथ को शैली नहीं देती। स्थिर रंग एसेट के लिए SVG फ़िल संपादित करें, या थीम संचालित रंग चाहिए तो currentColor वाला जाँचा इनलाइन मार्कअप लें।

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

स्रोत

1. Shopify Developers — थीम संरचना — थीम एसेट, स्निपेट और मार्कअप की जगह।
2. Shopify Developers — asset_url — Liquid उदाहरण में इस्तेमाल थीम एसेट URL व्यवहार।
3. Shopify Developers — स्निपेट — पुनः इस्तेमाल योग्य Liquid मार्कअप और render टैग।
4. Shopify Help Center — थीम कोड संपादित करना — पहले एडिटर विकल्प अपनाना, थीम की प्रति और कोड बदलाव सावधानियाँ।
5. Shopify Developers — सुलभता की श्रेष्ठ प्रथाएँ — Alt टेक्स्ट और सजावटी आइकन संभालना।
6. Shopify Developers — Shopify CDN से एसेट सर्व करें — एसेट फ़िल्टर और स्पष्ट इमेज आयाम।
7. MDN — इमेज के रूप में SVG — ब्राउज़र इमेज संदर्भ प्रतिबंध।
8. MDN — SVG color एट्रिब्यूट — currentColor से SVG फ़िल और स्ट्रोक को रंग मिलने का तरीका।