Vector Drawable: यह क्या है, XML प्रारूप और कैसे काम करता है

Vector Drawable क्या है?

Vector Drawable एक Android संसाधन है जो SVG (Scalable Vector Graphics) विनिर्देश पर आधारित XML प्रारूप में वेक्टर छवि का प्रतिनिधित्व करता है। Google ने इस प्रारूप को Android 5.0 (API 21) में आइकन, चित्रण और अन्य ग्राफ़िकल UI तत्वों के लिए रास्टर छवियों के विकल्प के रूप में पेश किया।

PNG के विपरीत, जहाँ छवि एक निश्चित आकार की पिक्सेल सारणी के रूप में संग्रहीत होती है, Vector Drawable आकृतियों का गणितीय रूप से वर्णन करता है — बिंदु निर्देशांक, बेज़ियर वक्र, भरण और स्ट्रोक के माध्यम से। इसका मतलब है कि एक एकल वेक्टर छवि विभिन्न स्क्रीन घनत्वों (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) के लिए छह PNG फ़ाइलों को बदल सकती है, जिससे ग्राफ़िक्स संसाधन रखरखाव नाटकीय रूप से सरल हो जाता है।

प्रारूप न केवल स्थिर छवियों बल्कि AnimatedVectorDrawable के माध्यम से एनिमेशन के साथ-साथ थीम विशेषताओं के माध्यम से डार्क थीम अनुकूलन और कस्टम रंगों का भी समर्थन करता है। Android 7.0 (API 24) से, Vector Drawable ग्रेडिएंट भरण और जटिल क्लिप संचालन (clipPath) का भी समर्थन करता है, जो डिज़ाइन संभावनाओं का विस्तार करता है।

Vector Drawable के मुख्य घटक

प्रत्येक Vector Drawable में चौड़ाई, ऊँचाई और व्यूपोर्ट मापदंडों के साथ एक मूल vector तत्व होता है — एक आभासी निर्देशांक प्रणाली जिसमें आकृतियाँ खींची जाती हैं। अंदर समूह (group) और पथ (path) होते हैं, जहाँ path कमांड के अनुक्रम के माध्यम से ज्यामिति को परिभाषित करता है: M (moveTo), L (lineTo), C (cubicTo), Z (close) और अन्य। प्रत्येक path का अपना fillColor और strokeColor हो सकता है, जो थीम संसाधनों को संदर्भित कर सकता है।

अतिरिक्त तत्वों में क्लिपिंग के लिए clip-path, ग्रेडिएंट संक्रमण के लिए gradient और android:theme विशेषता के माध्यम से डार्क थीम अनुकूलन शामिल हैं। Vector Drawable में सभी रंगों को थीम विशेषताओं (जैसे ?attr/colorPrimary) के संदर्भ के रूप में निर्दिष्ट किया जा सकता है, जो संसाधनों की नकल किए बिना थीम बदलने पर आइकन की उपस्थिति बदल देता है।

Vector Drawable प्रारूप: XML संरचना

Vector Drawable XML फ़ाइल res/drawable/ निर्देशिका में रखी जाती है और इसका एक मूल तत्व होता है। अंदर पदानुक्रम संगठन के लिए नेस्टेड तत्व और आकृति वर्णन के लिए तत्व हो सकते हैं। प्रत्येक path में एक pathData विशेषता होती है — SVG पथ प्रारूप में ड्राइंग कमांड की एक स्ट्रिंग।

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

उदाहरण में 24×24 व्यूपोर्ट में 10 इकाइयों त्रिज्या वाले एक वृत्त का वर्णन किया गया है। पैरामीटर fillColor एक रंग संसाधन को संदर्भित करता है, जबकि strokeWidth और strokeColor स्ट्रोक को परिभाषित करते हैं। चौड़ाई और ऊँचाई dp में निर्दिष्ट की जाती है — यह अतिरिक्त परिवर्तनों के बिना विभिन्न पिक्सेल घनत्व वाली स्क्रीन पर सही स्केलिंग सुनिश्चित करता है।

समूहीकरण और रूपांतरण

group तत्व कई पथों को समूहित करने और उन पर सामान्य रूपांतरण लागू करने की अनुमति देता है: घूर्णन (rotation), स्थानांतरण (translateX, translateY) और स्केलिंग (scaleX, scaleY)। समूह नेस्टेड हो सकते हैं, जो प्रदर्शन हानि के बिना सैकड़ों तत्वों के साथ जटिल पदानुक्रम बनाने में सक्षम बनाता है।

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

pivotX/pivotY विशेषता के साथ समूहीकरण एनिमेशन के लिए उपयोग किया जाता है: आप अन्य तत्वों से स्वतंत्र रूप से छवि के एक भाग को घुमा या स्केल कर सकते हैं, जो एनिमेटेड स्थिति आइकन (जैसे लोडिंग → सफलता) बनाने के लिए विशेष रूप से उपयोगी है।

Vector Drawable बनाम रास्टर ग्राफ़िक्स

वेक्टर और रास्टर ग्राफ़िक्स के बीच चुनाव उपयोग के मामले पर निर्भर करता है। Vector Drawable आइकन, चित्रण और कम विवरण वाले UI तत्वों के लिए आदर्श है, जबकि हजारों रंगों वाली तस्वीरें और जटिल छवियाँ रास्टर प्रारूपों में रहती हैं।

Android Performance Patterns (Google I/O 2016) के अनुसार, PNG आइकन को Vector Drawable से बदलने से बड़ी संख्या में ग्राफ़िकल संसाधनों वाले ऐप्लिकेशन के लिए APK आकार 40–60% कम हो जाता है। हालाँकि, सैकड़ों पथों वाले जटिल वेक्टर प्रस्तुत करते समय CPU लोड बढ़ जाता है, इसलिए एनिमेशन और बार-बार पुनः चित्रण के लिए पूर्व-कैश्ड रास्टर का उपयोग करने की अनुशंसा की जाती है।

Vector Drawable कब चुनें

Vector Drawable इंटरफ़ेस आइकन (टूलबार, नेविगेशन, स्थितियाँ), लोगो, सरल चित्रण और एनिमेटेड तत्वों के लिए इष्टतम है। प्रारूप विशेष रूप से कई स्क्रीन का समर्थन करते समय लाभप्रद है: छह घनत्वों के लिए PNG उत्पन्न करने के बजाय, एक एकल XML फ़ाइल पर्याप्त है। यह डिज़ाइन रखरखाव को सरल बनाता है और आकार बेमेल त्रुटियों को समाप्त करता है। तस्वीरों और फोटोयथार्थवादी ग्रेडिएंट छवियों के लिए, WebP संपीड़न वाले रास्टर प्रारूप अभी भी उपयोग किए जाते हैं।

Vector Drawable एनिमेशन

Android दो तंत्रों के माध्यम से Vector Drawable एनिमेशन का समर्थन करता है: AnimatedVectorDrawable (API 21 से उपलब्ध) और AnimatedStateListDrawable। पहला पथ विशेषताओं — घूर्णन, स्थानांतरण, रंग परिवर्तन और आकार रूपांतरण को एनिमेट करने की अनुमति देता है। दूसरा सुचारू संक्रमण के साथ विभिन्न अवस्थाओं (दबाव, हाइलाइट) के बीच स्विच करता है।

AnimatedVectorDrawable तीन XML फ़ाइलों का उपयोग करता है: स्वयं Vector Drawable, एनिमेशन का वर्णन करने वाला ObjectAnimator और एक बाइंडिंग AnimatedVectorDrawable जो लक्ष्य (समूह या पथ नाम) को एनिमेटर से जोड़ता है। एनिमेशन fillColor, strokeColor, rotation, translateX/Y, scaleX/Y और यहाँ तक कि pathData — एक आकृति को दूसरे में सुचारू रूप से रूपांतरित करना (morphing) — बदल सकता है।

मॉर्फिंग एनिमेशन उदाहरण

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

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close 300 मिलीसेकंड में pathData गुण को मूल प्लस आकृति से क्लोज़ आकृति में बदलता है। सिस्टम स्वचालित रूप से SVG पथ कमांड के दो सेटों के बीच निर्देशांकों को इंटरपोलेट करता है। इस प्रकार का एनिमेशन Material Design में बटन और आइकन अवस्था के सुचारू संक्रमण के लिए व्यापक रूप से उपयोग किया जाता है।

Vector Drawable कोड उदाहरण

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

android:tint पैरामीटर मान ?attr/colorControlNormal के साथ स्वचालित रूप से सिस्टम नियंत्रण रंग लागू करता है — लाइट थीम पर गहरा ग्रे, डार्क थीम पर सफेद। एरो नाम का समूह AnimatedVectorDrawable के माध्यम से इस आइकन को एनिमेट करने की अनुमति देता है।

कोड से Vector Drawable लोड करना

Android में प्रोग्रामेटिक रूप से Vector Drawable लोड करने के लिए AppCompatResources.getDrawable() वर्ग या ContextCompat.getDrawable() विधि का उपयोग किया जाता है। आधुनिक Jetpack Compose प्रोजेक्ट में, रास्टर और वेक्टर Drawable painterResource के माध्यम से लोड किए जाते हैं, जो स्वचालित रूप से संसाधन प्रारूप निर्धारित करता है।

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

AppCompatResources.getDrawable() का उपयोग करते समय, AppCompat लाइब्रेरी API स्तर के आधार पर स्वचालित रूप से सही drawable संस्करण चुनती है: Android 5.0 (API 21) से पहले के उपकरणों पर रास्टर फ़ॉलबैक का उपयोग किया जा सकता है; नए उपकरणों पर Vector Drawable का उपयोग किया जाता है। Jetpack Compose में, painterResource इस संगतता को स्वचालित रूप से संभालता है।