सुसंगत UI किट के लिए PNG आइकन को SVG में बदलें

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

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

संक्षिप्त कार्यप्रवाह

1. PNG सेट की सूची बनाएँ और डुप्लिकेट या गायब स्रोत खोजें।
2. प्रतिनिधि आइकन चुनें और साझा ग्रिड, पैडिंग, भराव या स्ट्रोक मॉडल तथा रंग नियम तय करें।
3. नमूना आइकन को वास्तविक पाथ में बदलें।
4. रूपरेखा, नोड, खाली जगह और रंग क्षेत्र जाँचें।
5. एक वेक्टर एडिटर में सेट मानकीकृत करें, फिर बाकी आइकन बदलें और समीक्षा करें।
6. एक्सपोर्ट किए गए SVG को वास्तविक UI और एसेट प्रक्रिया में जाँचें।

तय करें कि कौन से PNG आइकन SVG बनने चाहिए

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

यदि बचा स्रोत PNG के बजाय आइकन कंटेनर है, तो पहले मिलते हुए ICO से SVG या ICNS से SVG कार्यप्रवाह से उसे पुनः प्राप्त करें। फिर परिणाम को नीचे दिए समान UI किट नियमों के अनुसार मानकीकृत करें।

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

ट्रेस करने से पहले UI किट के नियम तय करें

अलग-अलग साफ़ आइकन का फ़ोल्डर भी साथ में असंगत दिख सकता है। सेट के नियम पहले लिखें, भले मूल PNG अभी उनका पालन न करते हों।

एक निर्देशांक क्षेत्र चुनें

एक घटक आकार साझा करने वाले आइकन के लिए एक viewBox इस्तेमाल करें। संख्याएँ 24 बाय 24 या 16 बाय 16 होना ज़रूरी नहीं; उन्हें आपके सिस्टम से मिलना चाहिए। SVG, viewBox आयत को दिखाई व्यूपोर्ट में मैप करता है, इसलिए एक जैसी बाहरी माप तभी मदद करती है जब भीतर चित्र की स्थिति सुसंगत हो। SVG 2 निर्देशांक प्रणाली विनिर्देश यह मैपिंग परिभाषित करता है।

दर्ज करें:

• साझा viewBox;
• इच्छित दृश्य केंद्र और आधार रेखा;
• न्यूनतम आंतरिक पैडिंग;
• कौन से हिस्से जानबूझकर सामान्य दृश्य सीमाओं से बाहर जा सकते हैं।

भराव या स्ट्रोक मॉडल चुनें

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

तय करें कि रंग कैसे नियंत्रित होगा

एकरंगी सिस्टम के लिए दोहराने योग्य रंग नियम अपनाएँ जिसे गंतव्य अपने आइकन टोकन से मैप कर सके। बहुरंगी आइकन में अनुमत रंग समूह और बदल सकने वाले क्षेत्र तय करें। एंटी-अलियासिंग से बचे लगभग समान छोटे रंग तभी रखें जब उनका कोई दिखाई उद्देश्य हो।

पहले प्रतिनिधि नमूना बदलें

4 से 6 ऐसे आइकन चुनें जो कठिन मामले दिखाएँ। वृत्त या चाप, तिरछी रेखा, छोटा अंदरूनी खाली भाग या छेद और परिवार का सबसे घना आइकन शामिल करें। सेट में कई रंग हों तो वैसा एक आइकन भी शामिल करें।

1. PNG तैयार करें

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

हर मूल की बिना बदलाव कॉपी रखें। याद पर निर्भर रहने के बजाय SVG की स्रोत से तुलना कर सकें तो सफ़ाई परखना आसान होता है।

2. नमूना आइकन ट्रेस करें

स्वचालित वेक्टराइज़र या अपने डिज़ाइन सॉफ़्टवेयर का ट्रेसिंग टूल इस्तेमाल करें। Illustrator का वर्तमान Image Trace कार्यप्रवाह रंग, पाथ, कोने और शोर के नियंत्रण देता है। Figma की वर्तमान Vectorize सुविधा ट्रेसिंग के बाद रंग मोड देती है और बताती है कि जटिल या कम रिज़ॉल्यूशन वाली इमेज शायद अच्छी तरह वेक्टराइज़ न हों (Adobe Image Trace; Figma Vectorize)।

ब्राउज़र वाले रास्ते के लिए नमूना PerfectVector के PNG-से-SVG कन्वर्टर पर अपलोड करें। पूर्वावलोकन की मूल से तुलना करें, आकृतियाँ और रंग क्षेत्र जाँचें, फिर अपने वेक्टर एडिटर में मानकीकृत करने वाला SVG डाउनलोड करें। बाकी फ़ोल्डर पर आगे बढ़ने से पहले प्रतिनिधि समूह चलाएँ।

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

3. केवल पूर्वावलोकन नहीं, पाथ जाँचें

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

ये देखें:

• सरल वक्र के चारों ओर नोड की घनी शृंखला;
• अनचाहे कण या पृष्ठभूमि आयत;
• एक ही किनारे की ओवरलैप करती कॉपियाँ;
• एंटी-अलियासिंग के छोटे रंग टुकड़े;
• ट्रेसिंग में बंद हुए छेद या अक्षरों के अंदरूनी खाली भाग;
• चुनने योग्य पाथ के बजाय एक रास्टर आयत।

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

आइकन को एक परिवार की तरह मानकीकृत करें

नमूना ट्रेस संरचनात्मक रूप से सही हो जाएँ तो उन्हें साझा ग्रिड पर रखें और साथ समीक्षा करें। यहीं सेट एक सिस्टम बनता है।

पूरे सेट की समीक्षा

वास्तविक इंटरफ़ेस आकार और बड़े संपादन ज़ूम पर सेट जाँचें:

दृश्य सुधार की अनुमति है। वृत्त को वर्ग वाले बॉक्स से थोड़ा बाहर जाना पड़ सकता है ताकि दोनों समान आकार के दिखें। नियम दर्ज ग्रिड के आधार पर सुसंगत अनुभूति है, हर आकृति को एक जैसी ज्यामितीय सीमा में ठूँसना नहीं। प्रिंट योग्य दृश्य समय-सारणी कार्ड कार्यप्रवाह यह अंतर तस्वीर के बॉक्स, अलग लेबल और मापे गए PDF पृष्ठ पर लागू करता है।

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

PerfectVector के साथ यह कैसे दिखता है

PerfectVector स्रोत तैयारी और सेट मानकीकरण के बीच ट्रेसिंग चरण में उपयोगी है। प्रतिनिधि PNG नमूना संपादन योग्य वेक्टर आकृतियों में फिर बनाने के लिए इस्तेमाल करें, फिर इस किट के महत्वपूर्ण मानदंडों पर परिणाम परखें:

1. क्या हर आइकन अपनी रूपरेखा और खाली जगह बचाता है?
2. क्या आप इच्छित क्षेत्र चुनकर उनका रंग बदल सकते हैं?
3. क्या वक्र में संभालने योग्य नोड हैं?
4. क्या परिणाम मैनुअल या ऐप के नेटिव ट्रेस से अधिक आसानी से मानकीकृत होता है?

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

स्रोत खोए बिना सफ़ाई करें

फ़ाइलों की 2 परतें रखें:

• स्रोत संग्रह: बिना बदलाव PNG, कोई मूल डिज़ाइन फ़ाइल और स्रोत के बारे में नोट।
• संपादन योग्य मास्टर: साझा ग्रिड पर मानकीकृत वेक्टर आइकन।
• डिलीवरी एक्सपोर्ट: उत्पाद द्वारा इस्तेमाल किए अनुकूलित SVG।

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

डिलीवरी में पुनः उपयोग योग्य वेब आइकन हों तो चित्र स्वीकृत होने के बाद SVG symbol स्प्राइट कार्यप्रवाह अपनाएँ। सेट ऐप में आने से पहले यह symbol ID, नेस्टेड संदर्भ, निर्देशांक सीमाएँ, रंग नियम और इंस्टेंस नाम जाँचता है। इंटरफ़ेस कैनवास पर आइकन बनाता हो तो Path2D से SVG पाथ कैनवास में मैप करें और निर्देशांक रूपांतरण, रंग, खुले भाग तथा आधार रिज़ॉल्यूशन की SVG मास्टर से पुष्टि करें।

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

हस्तांतरण से पहले कुछ आइकन हर महत्वपूर्ण वातावरण में जाँचें: डिज़ाइन लाइब्रेरी, ऐप घटक और हर बिल्ड या अनुकूलन चरण। सिस्टम में हों तो निष्क्रिय और उलटे रंग वाली अवस्थाएँ जाँचें। संरचनात्मक रूप से साफ़ फ़ाइल भी किट में विफल हो सकती है यदि उसके रंग या आकार की मान्यताएँ घटक से न मिलें। Android गंतव्य हो तो एसेट ऐप में आने से पहले व्यूपोर्ट आकार, भराव, पाथ जटिलता और इम्पोर्टर समर्थन सत्यापित करने के लिए PNG-से-VectorDrawable इम्पोर्ट जाँच सूची अपनाएँ। Godot परियोजनाओं में टेक्सचर इम्पोर्ट प्रकार चुनने और रास्टर आकार, ओवरसैम्पलिंग तथा समर्थित चित्र जाँचने के लिए Godot SVG इम्पोर्ट जाँच सूची अपनाएँ। Unity परियोजनाओं में एडिटर के अनुकूल इम्पोर्टर चुनने और UI Toolkit या स्प्राइट गंतव्य जाँचने के लिए Unity SVG इम्पोर्ट जाँच सूची अपनाएँ।

SwiftUI परियोजनाओं में नाम वाले इमेज संसाधन, मूल या टेम्पलेट रंग व्यवहार और अंतिम प्रदर्शन आकार की पुष्टि करने के लिए SVG एसेट कैटलॉग और रेंडरिंग कार्यप्रवाह देखें।

UI किट डिलीवरी जाँच सूची

• हर ट्रेस किया आइकन उपलब्ध सबसे साफ़ स्रोत से आया है।
• आइकन दर्ज viewBox, पैडिंग और संरेखण नियम साझा करते हैं।
• वास्तविक UI आकार पर दृश्य आकार और दिखाई वज़न सुसंगत हैं।
• भराव और स्ट्रोक वाले आइकन सिस्टम के बताए मॉडल का पालन करते हैं।
• रंग क्षेत्र स्वीकृत रंग समूह या टोकन नियम से अनुमान के अनुसार मैप होते हैं।
• वक्र सटीकता के लिए पर्याप्त नोड इस्तेमाल करते हैं और पाथ में स्पष्ट भीड़ नहीं है।
• किसी SVG में अनजाने एम्बेड रास्टर, पृष्ठभूमि बॉक्स या दोहरा किनारा नहीं है।
• फ़ाइल और घटक नाम अद्वितीय और स्थिर हैं।
• उत्पाद के सामान्य अनुकूलन चरण के बाद एक्सपोर्ट सेट जाँचा गया है।
• स्रोत संग्रह, संपादन योग्य मास्टर और डिलीवरी फ़ाइलें अलग रखी गई हैं।

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

क्या मैं सफ़ाई से पहले सभी PNG आइकन एक साथ बदल सकता हूँ? आप ऐसा कर सकते हैं, लेकिन पहले प्रतिनिधि नमूने को बदलना अधिक सुरक्षित है। सेट की कठिनतम आकृतियों को शामिल करने वाले कुछ आइकन बदलें, ग्रिड और पाथ नियम तय करें, फिर बाकी संसाधित करें। वरना एक गलत ट्रेस निर्णय पूरे फ़ोल्डर में बार-बार सफ़ाई करा सकता है।

क्या हर SVG आइकन को समान viewBox इस्तेमाल करना चाहिए? एक UI घटक साझा करने वाले आइकन को आम तौर पर समान viewBox से लाभ होता है, लेकिन भीतर चित्र को दृश्य सुधार चाहिए हो सकता है। निर्देशांक क्षेत्र सुसंगत रखें, जबकि वृत्त, नुकीली आकृति या असामान्य रूप से घने आइकन को दर्ज सीमा विस्तार या पैडिंग बदलाव की अनुमति दें।

UI आइकन में कितने नोड होने चाहिए? कोई सार्वभौमिक संख्या नहीं है। इच्छित रूपरेखा, कोने और खाली जगह बचाने वाले सबसे कम नोड इस्तेमाल करें। समान जटिलता वाले आइकन की तुलना करें और घनी बिंदु शृंखला वाले सरल वक्र जाँचें।

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

स्रोत

1. W3C — SVG निर्देशांक प्रणाली, रूपांतरण और इकाइयाँ — SVG व्यूपोर्ट, निर्देशांक प्रणाली, viewBox और चित्र का दिखाई क्षेत्र में मैप होना परिभाषित करता है।
2. W3C — SVG पाथ — संपादन योग्य SVG पाथ ज्यामिति बनाने वाली रेखा और वक्र कमांड परिभाषित करता है।
3. W3C — SVG एम्बेड सामग्री — पुष्टि करता है कि SVG में वेक्टर पाथ के बजाय रास्टर इमेज सामग्री हो सकती है।
4. Adobe Illustrator — Image Trace से इमेज वेक्टराइज़ करें — वर्तमान रास्टर ट्रेसिंग कार्यप्रवाह और संपादन योग्य पाथ परिणाम बताता है।
5. Figma Learn — स्थिर इमेज को वेक्टर लेयर में बदलें — Figma का वर्तमान Vectorize कार्यप्रवाह, रंग मोड और स्रोत इमेज की सीमाएँ बताता है।

---

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