PNG से Android VectorDrawable: आयात जाँच सूची

Android Studio PNG को वेक्टर पाथ में ट्रेस नहीं करता। इसका Vector Asset Studio SVG या PSD फ़ाइलें आयात करके समर्थित ज्यामिति को VectorDrawable XML में बदलता है। इसलिए भरोसेमंद PNG प्रक्रिया के 2 चरण हैं: पिक्सेल को असली SVG में ट्रेस करें, फिर Android Studio में आयात करें।

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

Flutter इंटरफ़ेस के लिए Flutter SVG संसाधन प्रक्रिया मानें। यह SVG को नेटिव Android VectorDrawable XML में बदलने के बजाय flutter_svg के जरिए घोषित और रेंडर करती है।

.NET MAUI प्रोजेक्ट में स्रोत, बिल्ड आउटपुट और प्रदर्शन आकार जाँचने के लिए MAUI इमेज संसाधन सूची लें। नेटिव Android VectorDrawable आयात चरणों से पहले उस प्रोजेक्ट की इमेज प्रक्रिया अपनाएं।

छोटी प्रक्रिया

1. फ़ोटो या बनावट के बजाय साफ़, आइकन जैसी PNG लें।
2. SVG में ट्रेस करें और पक्का करें कि संपादन योग्य पाथ हैं, एम्बेड PNG नहीं।
3. सिल्हूट बदले बिना अनचाही आकृतियों और जरूरत से ज्यादा नोड को सरल करें।
4. Android Studio के Vector Asset Studio से SVG आयात करें।
5. बनी XML में व्यूपोर्ट, पाथ, भरण, स्ट्रोक, ग्रेडिएंट और क्लिपिंग व्यवहार देखें।
6. ऐप के सबसे पुराने समर्थित Android संस्करण पर वास्तविक आकार में drawable जाँचें।

सीधे कन्वर्टर और SVG तरीके में चुनें

दोनों रास्तों का गंतव्य एक है, लेकिन जाँच बिंदु अलग हैं।

बीच में SVG वाला तरीका आम तौर पर आसानी से जाँचा जाता है। Android Studio दोबारा अनुवाद करने से पहले ट्रेस को PNG से मिला सकते हैं, अलग आकृतियाँ देख सकते हैं, छेद सुधार सकते हैं और पाथ अव्यवस्था घटा सकते हैं।

सीधे कन्वर्टर अपने आप में गलत नहीं होते। उदाहरण के लिए SVG2Vector अभी SVG और अन्य इनपुट के साथ PNG से VectorDrawable रूपांतरण बताता है। उसकी XML को तैयार संसाधन के बजाय संभावित फ़ाइल मानें: Android Studio में उसका पूर्वावलोकन देखें, पाथ जाँचें और नीचे बताए गए डिवाइस परीक्षण करें (SVG2Vector)।

चरण 1: PNG को असली SVG पाथ में बदलें

सबसे साफ़ उपलब्ध स्रोत लें। स्पष्ट किनारियों और सीमित पैलेट वाले सपाट आइकन अच्छे विकल्प हैं। फ़ोटो, नरम छाया, चमक और बनावट उपयोगी Android संसाधन बने बिना बहुत छोटी आकृतियाँ बना सकती हैं।

PNG का मूल रिज़ॉल्यूशन लें। धुंधला आइकन बड़ा करने से पिक्सेल बढ़ते हैं, गायब किनारी जानकारी नहीं। अनचाहा पृष्ठभूमि आयत हटाएं और ट्रेस से पहले तय करें कि संसाधन एक रंग, कई रंग या ग्रेडिएंट वाला है।

पिक्सेल ट्रेस करें

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

जाँचें:

• साफ़ बाहरी सिल्हूट;
• बचे छेद और खाली जगह;
• अपेक्षित रंग क्षेत्र संख्या;
• भटके धब्बे या पृष्ठभूमि बॉक्स न हों;
• बिंदुओं की घनी श्रृंखला के बिना चिकने वक्र;
• आर्टवर्क सही घेरने वाला viewBox।

.svg एक्सटेंशन ट्रेसिंग का प्रमाण नहीं। W3C एम्बेड सामग्री विनिर्देश के अनुसार SVG में <image> तत्व से रास्टर हो सकता है। आर्टवर्क चुनने पर वह एक ही आयत के रूप में चुना जाए या बहुत ज़ूम करने पर पिक्सेल दिखें तो Android Studio जाने से पहले एम्बेड रास्टर निदान करें।

जहाँ मदद हो वहीं सरल करें

पाथ की जटिलता मायने रखती है क्योंकि Android को बनी हुई ज्यामिति पार्स और रेंडर करनी होती है। नोड की कोई संख्या हर डिज़ाइन के लिए लक्ष्य नहीं होती। दर्जनों पास-पास बिंदुओं वाले सरल वक्र की जाँच करनी चाहिए; किसी चित्र के अनियमित किनारे को वास्तव में अधिक बिंदुओं की जरूरत हो सकती है।

स्रोत से तुलना करते हुए अलग टुकड़े हटाएं और स्पष्ट बिंदु श्रृंखला सरल करें। सफ़ाई कोने बदले या छोटे छेद बंद करे तो वापस करें। बहुत अधिक नोड वाली SVG की गाइड उपयोगी विवरण और पाथ अव्यवस्था अलग करना बताती है।

2 रूपांतरण, 3 जाँचें

चरण 2: SVG Android Studio में आयात करें

Android की वर्तमान Vector Asset Studio प्रक्रिया स्थानीय SVG या PSD स्वीकार करती है, पूर्वावलोकन दिखाती है और XML vector drawable बनाती है (Android Developers)।

1. Project विंडो में res फ़ोल्डर पर राइट-क्लिक करें।
2. New > Vector Asset चुनें।
3. संसाधन प्रकार Local file (SVG, PSD) लें।
4. SVG चुनें और पूर्वावलोकन में त्रुटि या दिखते बदलाव देखें।
5. संसाधन नाम और इच्छित आकार तय करें।
6. Next से आगे जाएं, गंतव्य पक्का करें और Finish चुनें।

बना संसाधन ऐप के drawable संसाधनों में XML के रूप में रहता है। जाँची हुई SVG को संपादन योग्य मुख्य फ़ाइल के रूप में रखें। बाद में दृश्य बदलाव हो तो SVG संपादित करके drawable दोबारा बनाएं, दो असंबंधित संस्करण हाथ से न संभालें।

SVG से VectorDrawable आयात में क्या बचता है?

VectorDrawable पूर्ण SVG रेंडरर नहीं है। Vector Asset Studio सुविधाओं के एक निर्धारित सीमित समूह का समर्थन करता है, इसलिए ब्राउज़र में सही SVG आयात पर बदल सकती है।

ये सीमाएँ वर्तमान Vector Asset Studio संगतता टेबल से हैं। आयातक केवल पाथ पर केंद्रित स्ट्रोक का समर्थन भी बताता है। स्रोत में अंदर या बाहर स्ट्रोक हो तो आयात से पहले रंग से भरी आकृति में विस्तार करें या किनारी दोबारा बनाएं।

ग्रेडिएंट के लिए संस्करण की अतिरिक्त जाँच जरूरी है। VectorDrawable API में fillColor और strokeColor के लिए ग्रेडिएंट या रंग-स्थिति-सूची मान API स्तर 24 से बताए हैं। evenOdd और nonZero fillType विकल्प भी API स्तर 24 से हैं (VectorDrawable API संदर्भ)। अगर ऐप पुराने संस्करणों का समर्थन करता है, तो उसी संगतता तरीके का परीक्षण करें जिसका आपका बिल्ड इस्तेमाल करता है। यह न मानें कि Android Studio का पूर्वावलोकन ही इस सवाल का अंतिम जवाब है।

स्वीकार करने से पहले बनी XML पढ़ें

VectorDrawable XML हाथ से लिखना जरूरी नहीं, लेकिन संरचना की एक छोटी समीक्षा आयात की कई समस्याएँ पकड़ सकती है।

चौड़ाई, ऊँचाई और व्यूपोर्ट

रूट <vector> तत्व प्रदर्शन आकार को ड्रॉइंग निर्देशांक से अलग करता है:

• android:width और android:height डिफ़ॉल्ट drawable माप हैं, आम तौर पर dp में;
• android:viewportWidth और android:viewportHeight पाथ का निर्देशांक क्षेत्र तय करते हैं।

केवल चौड़ाई और ऊँचाई बदलने से उसी ज्यामिति का आकार बदलता है। व्यूपोर्ट बदलने से पाथ निर्देशांक प्रदर्शन क्षेत्र में अलग बैठते हैं। आइकन कटा, ज्यादा खाली जगह वाला या खिंचा हो तो इन 4 मानों को SVG के viewBox और इच्छित आकार से मिलाएं।

पाथ और रंग

हर <path> में android:pathData होता है जिसके आदेश SVG के d जैसे सामान्य पाथ सिंटैक्स अपनाते हैं। मौजूद हों तो fillColor, strokeColor, strokeWidth, रेखा सिरे, जोड़ और fillType देखें।

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

समूह और क्लिपिंग

समूह में स्थान परिवर्तन, स्केल, घुमाव और पिवट के मान हो सकते हैं। <clip-path> दिखती ज्यामिति सीमित करता है। नतीजा खिसका हो या मास्क क्षेत्र गायब हो तो समूह संरचना देखें और स्रोत SVG रूपांतरण तथा क्लिपिंग से मिलाएं।

drawable को ऐप के असली स्थान पर जाँचें

आयात पूर्वावलोकन साबित करता है कि Android Studio ने फ़ाइल पार्स की। यह रनटाइम में संसाधन सही होने का प्रमाण नहीं है।

स्वीकृति की यह सूची लें:

• सामान्य UI आकार पर drawable PNG की इच्छित सिल्हूट से मेल खाता है।
• छेद, अक्षरों की खाली जगह और चढ़े क्षेत्र सही रहते हैं।
• ठोस भरण और स्ट्रोक में इच्छित रंग हैं।
• सबसे पुराने समर्थित Android संस्करण पर ग्रेडिएंट सही हैं।
• व्यूपोर्ट इच्छित खाली जगह और अनुपात बचाता है।
• ऐप के हल्के, गहरे, निष्क्रिय और टिंट वाले रूपों में आइकन स्पष्ट है।
• XML में अनचाहे टुकड़े या स्पष्ट रूप से जरूरत से ज्यादा पाथ डेटा नहीं है।
• संसाधन असली घटक में जाँचा गया है, केवल आयात पूर्वावलोकन में नहीं।
• मूल PNG और संपादन योग्य SVG मुख्य फ़ाइल संग्रह में हैं।

न्यूनतम समर्थित संस्करण दर्शाने वाले कम से कम 1 एमुलेटर या उपकरण पर असली dp आकार में जाँचें। ऐसी स्थिति या थीम भी जाँचें जो टिंट बदलती है। तकनीकी रूप से सही पाथ भी असफल हो सकता है अगर उसकी खाली जगह, दृश्य वजन या रंग के बारे में उसकी धारणाएँ आसपास के आइकन समूह से अलग हों।

पूरे आइकन समूह का रूपांतरण कर रहे हों, तो पहले किसी प्रतिनिधि नमूने पर यह प्रक्रिया लागू करें। UI किट रूपांतरण प्रक्रिया साझा व्यूपोर्ट, दृश्य आकार, रंग व्यवहार और पूरे समूह की फ़ाइल जाँच बताती है।

PNG कब रखें

VectorDrawable सरल आइकन और चित्र में बेहतर है। Android मार्गदर्शन चेतावनी देता है कि कई ऐप लॉन्च इमेज सहित विस्तृत ग्राफ़िक्स रास्टर में बेहतर हो सकते हैं। वेक्टर drawable का शुरुआती लोड खर्च रास्टर से अधिक हो सकता है और लंबे ड्रॉ समय से बचने के लिए वेक्टर 200 × 200 dp या छोटे रखने की सलाह भी है (Android Developers)।

इन पर निर्भर स्रोत रास्टर रखें या दोबारा डिज़ाइन करें:

• फ़ोटो विवरण;
• नरम बनावट, धुंधलापन या जटिल छाया;
• बहुत सारे छोटे-छोटे रंग क्षेत्र;
• रूप तय करने वाला असमर्थित प्रभाव;
• इतनी घनी ज्यामिति कि XML देखना और संभालना मुश्किल हो।

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

PerfectVector के साथ यह कैसा है

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

पूरी श्रृंखला पर नतीजा परखें:

1. क्या ट्रेस ने स्रोत सिल्हूट और छेद बचाए?
2. क्या SVG आकृतियाँ संपादन योग्य और एम्बेड रास्टर से मुक्त हैं?
3. क्या Android Studio जरूरी भरण, ग्रेडिएंट, क्लिप और रूपांतरण आयात करता है?
4. क्या drawable असली आकार और न्यूनतम API स्तर पर सही रेंडर होता है?

साफ़ SVG से फ़ाइल सौंपने की प्रक्रिया बेहतर होती है, लेकिन उससे Android की असमर्थित सुविधाएँ काम नहीं करने लगतीं। गंतव्य आर्टवर्क का रूप सही ढंग से दोबारा प्रस्तुत न कर सके, तो डिज़ाइन सरल करें या PNG रखें।

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

क्या Android Studio PNG को सीधे VectorDrawable में बदल सकता है? नहीं। वर्तमान Vector Asset Studio स्थानीय SVG या PSD आयात करता है, PNG नहीं। पहले PNG को ट्रेस करके असली SVG बनाएं या सीधे कन्वर्टर की XML Android Studio में जाँचें।

क्या SVG हमेशा असली वेक्टर है? नहीं। SVG इमेज तत्व से रास्टर एम्बेड कर सकती है। आयात से पहले वेक्टर संपादक में खोलें या मार्कअप देखकर पक्का करें कि इच्छित आर्टवर्क पाथ या दूसरी वेक्टर आकृतियों से बना है।

क्या SVG ग्रेडिएंट Android VectorDrawable में काम करते हैं? Vector Asset Studio रैखिक, रेडियल और कोणीय ग्रेडिएंट का समर्थन करता है, लेकिन रनटाइम समर्थन बनी XML और Android संस्करण रणनीति पर निर्भर है। VectorDrawable API ग्रेडिएंट भरण और स्ट्रोक रंग API स्तर 24 से बताता है, इसलिए सबसे पुराने समर्थित संस्करण पर जाँचें।

आयात के बाद छेद, मास्क या टेक्स्ट क्यों बदले? आयातक SVG की सीमित सुविधाओं का समर्थन करता है। भरण नियमों का परीक्षण Android संस्करण को ध्यान में रखकर करना जरूरी है, क्लिपिंग सीमित है और टेक्स्ट असमर्थित है। जरूरी टेक्स्ट को पाथ में बदलें, क्लिपिंग संरचना सरल करें और drawable स्वीकार करने से पहले Android पूर्वावलोकन SVG से मिलाएं।

क्या Android ऐप की हर PNG VectorDrawable XML बननी चाहिए? नहीं। सरल आइकन और चित्र मजबूत विकल्प हैं। फ़ोटो, अधिक बनावट वाली इमेज, जटिल प्रभाव और बहुत विस्तृत आर्टवर्क रास्टर रखें, जब तक जानबूझकर दोबारा बनाने से सरल पाथ ज्यामिति न मिले।

स्रोत

1. Android Developers — कई घनत्व वाले वेक्टर ग्राफ़िक्स जोड़ें — Vector Asset Studio की SVG और PSD आयात प्रक्रिया, समर्थित SVG सुविधाएँ, प्रदर्शन सावधानियाँ और बने drawable संसाधन बताता है।
2. Android Developers — VectorDrawable API संदर्भ — vector, path, group और clip-path XML गुण, व्यूपोर्ट, रंग, भरण नियम तथा API स्तर व्यवहार परिभाषित करता है।
3. W3C — SVG एम्बेड सामग्री — इमेज तत्व से SVG में रास्टर सामग्री होने की पुष्टि करता है।
4. Inkscape मैनुअल — इमेज ट्रेस करना — रास्टर पिक्सेल ट्रेसिंग और मूल बिटमैप के साथ काम का अंतर समझाता है।
5. SVG2Vector — PNG से VectorDrawable रूपांतरण — तुलना में बताया वर्तमान सीधा कन्वर्टर तरीका देता है।

---

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