Rive SVG आयात: एनीमेशन के लिए संपादन योग्य कलाकृति तैयार करें

आप फ़ाइल को एडिटर में खींचकर या Assets पैनल का उपयोग करके Rive में SVG आयात कर सकते हैं। Rive कलाकृति को अपने नेटिव वेक्टर ऑब्जेक्ट में बदलता है, जिन्हें आप संपादित कर सकते हैं। आयात के बाद 2 जांचें जरूरी हैं: क्या कलाकृति सही दिखती है, और क्या आप उन हिस्सों को चुन सकते हैं जिन्हें एनीमेट करना चाहते हैं? Rive का SVG दस्तावेज रूपांतरण और सीमाएं बताता है।

यदि मूल वेक्टर फ़ाइल उपलब्ध है, तो उससे शुरुआत करें। यदि स्रोत PNG या JPG है, तो उसे चित्र के रूप में बनाए रखने, जरूरी आकृतियां बनाने या पहले ट्रेस करके SVG बनाने में से एक विकल्प चुनें। ट्रेसिंग संपादन योग्य बाहरी रेखाएं प्राप्त करने में उपयोगी है; फिर भी उन रेखाओं को एनीमेशन के लिए व्यवस्थित करना जरूरी होगा।

Rive के अंदर SVG का क्या होता है?

आयात के बाद आप Rive ऑब्जेक्ट पर काम करते हैं। निर्यात की गई .riv फ़ाइल में स्रोत SVG शामिल नहीं होता, और Rive के रनटाइम अभी रनटाइम पर SVG एसेट का रूपांतरण नहीं करते। Rive फ़ाइल निर्यात करने से पहले एडिटर में SVG की तैयारी और आयात पूरा करें। Rive का निर्यात व्यवहार यह सीमा बताता है।

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

यदि स्रोत SVG के हिस्से ही अलग नहीं हो रहे हों, तो उसे बदलने से पहले समूह, संयुक्त पाथ या अंतर्निहित चित्र की पहचान के लिए SVG ऑब्जेक्ट और समूह निदान लें।

निर्यात से पहले हिस्से तैयार करें

कलाकृति को मिलाने या समतल करने से पहले इच्छित गतियां लिख लें। डेस्क लैंप का उदाहरण लें: शेड ऊपर-नीचे झुके, बांह झुके और आधार स्थिर रहे। इन गतियों के लिए ऐसे अलग हिस्से चाहिए जिन्हें आप चुन सकें और व्यवस्थित कर सकें।

यही तरीका किसी पात्र की पलकों, हिलते हुए हाथ या लोगो के किसी तत्व के लिए भी काम करता है: पहले गति का नाम दें, फिर जांचें कि उसे बनाने के लिए जरूरी हिस्सा स्रोत में मौजूद है या नहीं।

चलने वाले हिस्से तय करें

स्रोत दस्तावेज में महत्वपूर्ण हिस्सों को पहचानने योग्य नाम दें और मास्टर प्रति सुरक्षित रखें। संबंधित विवरणों को साथ रखें जब उन्हें साथ चलना चाहिए। केवल ऑब्जेक्ट की सूची छोटी करने के लिए पूरी चित्रकारी को एक पाथ में न मिलाएं।

आयात के बाद इन हिस्सों को व्यवस्थित करने और उन्हें अलग रूपांतरण नियंत्रण देने के लिए Rive समूहों का उपयोग करें। Rive में आप समूह बनाकर Hierarchy में उसके अंदर ऑब्जेक्ट रख सकते हैं। आप macOS पर Command+G या Windows पर Ctrl+G से चुने हुए ऑब्जेक्ट का समूह भी बना सकते हैं। Rive समूह दस्तावेज नियंत्रण बताता है।

SVG, Figma या Illustrator से आयात करें

सहेजी SVG फ़ाइल

1. अलग SVG निर्यात सहेजें ताकि संपादन योग्य मास्टर उपलब्ध रहे।
2. फ़ाइल Rive में खींचें या Assets में + क्लिक करके आयात फ़ाइल चुनें।
3. कलाकृति को इच्छित जगह पर रखें और Hierarchy में उसकी संरचना खोलें।
4. एक छोटा हिस्सा चुनें, उसका भराव बदलें और फिर बदलाव वापस लें। जांचें कि केवल इच्छित क्षेत्र ही बदला था या नहीं।

दोनों आयात मार्ग Rive Assets परिचय में हैं। सफल आयात संपादन जांच की शुरुआत है।

Figma

Figma में इच्छित कला के लिए Copy as SVG करें, फिर Rive एडिटर में पेस्ट करें। बड़ी रचना के बाकी हिस्से कॉपी करने से पहले आयातित आकृतियों और उनके रूप की जांच करें। यह दस्तावेजित Figma आयात मार्ग है।

Illustrator

SVG की स्टाइलिंग को Presentation Attributes पर सेट करें। Rive के दस्तावेज Illustrator के अलग निर्यात तरीकों के लिए थोड़े अलग लेबल बताते हैं:

• Save As: SVG Options में CSS Properties को Presentation Attributes करें।
• Export As: SVG Options में Styling को Presentation Attributes करें।
• सीधा कॉपी-पेस्ट: Export As SVG शैली जांचें, क्योंकि Illustrator इस मार्ग में वही सेटिंग इस्तेमाल करता है।

दी जाने वाली SVG में Preserve Illustrator Editing Capabilities भी बंद करें। Illustrator मास्टर अलग रखें। Rive चेतावनी देता है कि यह विकल्प अतिरिक्त Illustrator डेटा जोड़ता है, फ़ाइल का आकार बढ़ाता है और इसमें ऐसा डेटा शामिल हो सकता है जिसे उसका आयातक नहीं पहचानता। Rive Illustrator गाइड सेटिंग का स्रोत है।

आयात लक्षण से पहली जांच चुनें

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

यदि Illustrator का SVG काला दिखता है, तो पहले Presentation Attributes की निर्यात सेटिंग जांचें, फिर प्रभावित आकृति के भराव और स्ट्रोक को देखें। केवल कलाकृति का काला दिखना कारण की पहचान नहीं करता। इसे Rive के inherit के लिए दस्तावेजित सफेद डिफ़ॉल्ट रंग से भ्रमित न करें।

गायब चित्र सामग्री के लिए अंतर्निहित रास्टर SVG गाइड बताती है कि कैसे जांचें कि फ़ाइल में वास्तविक पाथ हैं या SVG कंटेनर के अंदर कोई चित्र है। एसेट प्रकार सूची के अनुसार Rive JPEG, PNG और WebP अलग चित्र एसेट आयात करता है। बनावट वाली पृष्ठभूमि को अलग रास्टर के रूप में रखना सही विकल्प हो सकता है।

आयात कभी पूरा न हो तो

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

इस प्रक्रिया में PerfectVector कब उपयोगी है

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

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

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

एनीमेशन से पहले एक गति जांचें

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

घुमाव की धुरी भी जांचें। Rive में चाइल्ड ऑब्जेक्ट पैरेंट के रूपांतरण प्राप्त करते हैं, और मूल बिंदु तय करता है कि घुमाव या आकार बदलना कहां से होगा। Freeze से आप चाइल्ड ऑब्जेक्ट को खिसकाए बिना पैरेंट की स्थिति बदल सकते हैं; इसे Y से चालू या बंद करें और मूल बिंदु समायोजित करने के बाद बंद कर दें। Rive Freeze और Origin गाइड अपनाएं।

एनीमेशन अपनाने से पहले पुष्टि करें:

• हर जरूरी हिस्से को स्वतंत्र रूप से चुना जा सकता है;
• भराव, बाहरी रेखा, छेद और ग्रेडिएंट इच्छित रूप से मिलें;
• जिन्हें आपने बनाए रखने का निर्णय लिया था, वे अलग से आयातित रास्टर अपने स्थान पर मौजूद हैं;
• गति से कोई अनचाहा अंतराल या गायब छिपी हुई कलाकृति सामने नहीं आती;
• हर चलता हिस्सा इच्छित जोड़ पर घूमे;
• मूल स्रोत और साफ आयात प्रति उपलब्ध रहें।

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

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

SVG के अंदर चित्र क्यों गायब हुआ? Rive SVG आयात के दौरान अंतर्निहित चित्रों को अनदेखा करता है। मूल रास्टर खोजकर उसे चित्र एसेट के रूप में आयात करें, या जब संपादन योग्य बाहरी रेखाएं चाहिए हों, तो उपयुक्त कलाकृति को पाथ में ट्रेस करें।

Rive SVG ग्रेडिएंट समर्थित करता है? रैखिक और रेडियल ग्रेडिएंट समर्थित हैं। ग्रेडिएंट रूपांतरण अनदेखे किए जाते हैं, इसलिए आयात के बाद ग्रेडिएंट की स्थिति समायोजित करनी पड़ सकती है।

PNG ट्रेस करने से Rive एनीमेशन बनेगा? ट्रेसिंग उपयुक्त रास्टर कलाकृति से SVG ज्यामिति बना सकती है। फिर भी आपको चलने वाले हिस्सों की जांच करके उन्हें अलग करना, उनकी Hierarchy और मूल बिंदु तय करना तथा Rive में एनीमेशन बनाना होगा।

स्रोत

1. Rive — SVG और वेक्टर एसेट — नेटिव ऑब्जेक्ट में रूपांतरण, Illustrator और Figma से आयात, रनटाइम निर्यात व्यवहार और असमर्थित SVG सुविधाओं को समझाता है।
2. Rive — एसेट — फ़ाइल आयात के नियंत्रण और अलग रास्टर चित्र एसेट का विवरण देता है।
3. Rive — आकृति और पाथ परिचय — आकृति की स्टाइलिंग और उसकी लेयर के अंदर मौजूद पाथ की ज्यामिति समझाता है।
4. Rive — समूह — हिस्सों को व्यवस्थित करने और Hierarchy में समूह बनाने के नियंत्रण समझाता है।
5. Rive — Freeze और Origin — पैरेंट-चाइल्ड रूपांतरण और चाइल्ड कलाकृति को खिसकाए बिना मूल बिंदु की स्थिति बदलना समझाता है।

---

यदि आपकी कलाकृति PNG या JPG से शुरू होती है और आपको संपादन योग्य बाहरी रेखाएं चाहिए, तो PerfectVector से SVG तैयार करें। ट्रेस किए गए हिस्सों की जांच करें, फ़ाइल Rive में आयात करें और बाकी एनीमेशन बनाने से पहले एक स्वतंत्र गति का परीक्षण करें।