PerfectVector
लेखक: Claire Yoon9 मिनट का पठन

एनीमेटेड GIF से SVG: फ़्रेम चुनें या फिर बनाएँ

एनीमेटेड GIF एक स्थिर वेक्टर फ़्रेम या दोबारा बनाया SVG एनीमेशन बन सकता है, लेकिन ये अलग काम हैं। जानें कि हर कन्वर्टर वास्तव में क्या बचाता है।

इस पेज पर

हाँ, एनीमेटेड GIF को SVG में बदल सकते हैं, लेकिन “बदलना” शब्द 3 अलग काम छिपाता है। वेक्टराइज़र एक चुने फ़्रेम को संपादन योग्य पाथ में ट्रेस कर सकता है। फ़्रेम आधारित औज़ार कई फ़्रेम ट्रेस करके क्रम में चला सकता है। या डिज़ाइनर चित्र को वेक्टर वस्तुओं में दोबारा बनाकर वास्तविक SVG गति बना सकता है। सभी परिणाम .svg हो सकते हैं, लेकिन एक-दूसरे की जगह नहीं चलते।

GIF के किसी एक क्षण से लोगो, आइकन या चित्र चाहिए तो वह फ़्रेम चुनकर वेक्टराइज़ करें। गति ही सामग्री हो तो एनीमेशन रखें या सोचकर फिर बनाएँ। सामान्य ट्रेस अपने आप हर फ़्रेम नहीं बचाता।

त्वरित उत्तर
  • एक संपादन योग्य स्थिर चित्र: प्रतिनिधि GIF फ़्रेम चुनें, फिर उसे SVG पाथ में ट्रेस करें।
  • वही फ़्रेम क्रम: स्पष्ट रूप से फ़्रेम-दर-फ़्रेम SVG एनीमेशन का समर्थन करने वाला औज़ार लें; एक सुव्यवस्थित पुनः उपयोग योग्य वस्तु समूह की जगह दोहराए चित्र की अपेक्षा करें।
  • वास्तविक वेक्टर गति: मुख्य वस्तुएँ एक बार फिर बनाएँ या ट्रेस करें, फिर उनकी स्थिति, घुमाव, माप, रंग या पाथ एनीमेट करें।
  • PerfectVector की प्रक्रिया स्पष्ट है: एनीमेटेड GIF फ़्रेम चुनने के लिए रुकता है और केवल उस फ़्रेम को जिसकी आप पुष्टि करते हैं, वेक्टराइज़ करता है।

“एनीमेटेड GIF से SVG” के 3 अर्थ

GIF रास्टर छवि डेटा रखता है और समय तथा दोहराव के साथ फ़्रेम क्रम के लिए नियंत्रण विस्तार उपयोग कर सकता है, जैसा Library of Congress के GIF89a प्रारूप विवरण में है। SVG आकृतियाँ, पाथ और वैकल्पिक एनीमेशन निर्देश रखता है। एक से दूसरे में जाने के लिए तय करना होता है कि क्या बचाना है।

आप क्या चाहते हैंकन्वर्टर को क्या करना हैक्या मिलता हैउपयुक्त काम
एक साफ संपादन योग्य क्षणएक फ़्रेम चुनकर ट्रेस करनापाथ वाला स्थिर SVGलोगो, आइकन, छोटे एनीमेशन की एक मुद्रा
मूल फ़्रेम-दर-फ़्रेम रूपकई फ़्रेम निकालकर क्रम देनादोहराए फ़्रेम चित्र वाला एनीमेटेड SVGविशेष औज़ार समर्थन करे तो साधारण पिक्सेल चित्र या छोटे लूप
साफ संपादन योग्य वेक्टर गतिपुनः उपयोग योग्य वस्तुएँ और गति बनानाCSS, SMIL या स्क्रिप्ट से चलने वाले हिस्सों का SVGवेब चित्र, लोडर, आरेख, इंटरफ़ेस गति
सटीक फ़ोटोग्राफ़िक प्रदर्शनमूल रास्टर एनीमेशन बचानाGIF या दूसरा रास्टर/वीडियो प्रारूपफ़ोटो, बनावट, ग्रेडिएंट और जटिल प्रभाव

पहला रास्ता वेक्टराइज़ेशन है। दूसरा SVG में ट्रेस की हुई पलटने वाली चित्र-पुस्तिका रखने जैसा है। तीसरा एनीमेशन डिज़ाइन है। खोज परिणाम अक्सर तीनों को एक “अपलोड करके बदलें” वादा बनाते हैं, इसलिए एक्सटेंशन पर भरोसा करने से पहले वास्तविक निर्यात जाँचें।

संपादन कहाँ होता है, यह भी अलग है: एक क्षण अलग करता है, दूसरा फ़्रेम चित्र दोहराता है, तीसरा गति बनाने से पहले पुनः उपयोग योग्य वस्तुएँ बनाता है।

एनीमेटेड PNG को भी यही निर्णय चाहिए। स्रोत APNG हो और केवल एक संपादन योग्य स्थिर चित्र चाहिए, तो ट्रेसिंग से पहले फ़्रेम चुनने के लिए APNG से SVG कन्वर्टर लें। गति महत्वपूर्ण हो तो एनीमेशन रखें या फिर बनाएँ।

एक स्थिर SVG में ट्रेस किए गए चुने हुए GIF फ़्रेम, क्रम में रखे कई ट्रेस फ़्रेम और बनाई गति वाले पुनः उपयोग योग्य वेक्टर वस्तुओं की तुलना करता वैचारिक चित्र
वैचारिक चित्र: चुने फ़्रेम की ट्रेसिंग, फ़्रेम क्रम और बनाई वेक्टर गति 3 अलग उत्पादन रास्ते हैं।

PerfectVector एनीमेटेड GIF के साथ क्या करता है

PerfectVector फ़्रेम के चुनाव को स्पष्ट निर्णय के रूप में प्रस्तुत करता है। अपलोड GIF में एक से अधिक फ़्रेम हों तो ऐप वेक्टराइज़ेशन से पहले रुकता है। स्थिर पूर्वावलोकन के पास स्रोत एनीमेशन चलाता है और इच्छित फ़्रेम चुनने की समयरेखा देता है। चयन की पुष्टि तक रूपांतरण के लिए कुछ अपलोड नहीं होता।

चुना फ़्रेम स्थिर छवि के रूप में तैयार होकर संपादन योग्य SVG पाथ में ट्रेस होता है। परिणाम दूसरे GIF फ़्रेम नहीं रखता और एनीमेशन की तरह नहीं चलता। किसी खास क्षण से साफ सामग्री चाहिए तो यह सीमा उपयोगी है: आप जानते हैं कौन सी मुद्रा, अभिव्यक्ति या रचना वेक्टर बनती है।

स्थिर GIF फ़्रेम चयन छोड़ देता है क्योंकि गति का निर्णय नहीं है। दोनों स्थितियों में SVG गुणवत्ता चुनी छवि पर निर्भर है। सपाट आकृतियाँ और साफ किनारे गति के धुँधलेपन, फ़ोटोग्राफ़िक बनावट या छोटे विवरण से बेहतर ट्रेस होते हैं।

एक GIF फ़्रेम संपादन योग्य SVG कैसे बनाएँ

  1. GIF चलाकर उपयोगी क्षण चुनें। साफ बाहरी आकृति, अलग वस्तुएँ और कम से कम गति धुँधलापन खोजें। शुरुआती फ़्रेम अपने आप श्रेष्ठ नहीं है।
  2. असंबंधित एनीमेशन स्थान काटें। बड़े कैनवास में छोटे विषय के लिए उपयोगी पिक्सेल कम मिलते हैं। अंतिम रचना के लिए पर्याप्त हाशिया रखें, लेकिन खाली या शोर वाले किनारे हटाएँ।
  3. चित्र अनुमति दे तो रंग सीमित करें। फ़्रेमों के छोटे पैलेट बदलाव अतिरिक्त आकृतियाँ बना सकते हैं। लोगो, आइकन या सपाट चित्र का पैलेट अनावश्यक व्यस्त हो तो ट्रेसिंग से पहले चुना स्थिर चित्र सरल करें।
  4. GIF से SVG कन्वर्टर उपयोग करें। एनीमेशन अपलोड करें, समयरेखा में जाएँ, फ़्रेम की पुष्टि करें और PerfectVector को वह स्थिर चित्र ट्रेस करने दें।
  5. थंबनेल की जगह पाथ जाँचें। ज़ूम करें, आकृति चुनें और देखें कि वक्र चिकने व वस्तुएँ सचमुच संपादन योग्य हैं। बहुत छोटे टुकड़े हों तो साफ फ़्रेम लें या स्रोत सरल करें।
  6. गंतव्य में SVG जाँचें। वेक्टर संपादक में रंग बदलें, प्रिंट के लिए माप बदलें या उपयोग करने वाले निर्माण ऐप में आयात करें। सही एक्सटेंशन शुरुआत है; आकृतियों को भी सही काम करना चाहिए।

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

एनीमेशन कब रखें या फिर बनाएँ

फ़्रेम ही उद्देश्य हों तो रास्टर एनीमेशन रखें

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

वस्तुएँ उद्देश्य हों तो गति फिर बनाएँ

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

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

फ़्रेम-दर-फ़्रेम SVG सोचकर उपयोग करें

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

रूपांतरण की आम गलतियाँ

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

उपयोग से पहले परिणाम जाँचें

चुने फ़्रेम के SVG के लिए:

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

एनीमेटेड SVG के लिए दूसरी समीक्षा जोड़ें: उसी ब्राउज़र, संपादक या प्रकाशन प्रणाली में चलाकर जाँचें जो उसे दिखाएगा। स्थिर SVG खोलने वाला संपादक फिर सहेजते समय संभव है कि हर एनीमेशन सुविधा सुरक्षित न रख पाए।

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

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

कौन सा GIF फ़्रेम वेक्टराइज़ करूँ? सबसे साफ बाहरी आकृति, कम गति धुँधलापन, उपयोगी रचना और कम ओवरलैप वाली वस्तुओं का फ़्रेम चुनें। पहला फ़्रेम मान लेने की जगह पूरा लूप देखें।

क्या SVG एनीमेट हो सकता है? हाँ। SVG तत्व CSS, SMIL या JavaScript जैसे तरीकों से एनीमेट हो सकते हैं। गति वेक्टर दस्तावेज़ में बनानी होगी; रास्टर फ़्रेम ट्रेस करना आकृतियाँ बनाता है, एनीमेशन नहीं गढ़ता।

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

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

स्रोत

  1. Library of Congress — GIF89a — GIF रास्टर छवियाँ, नियंत्रण विस्तार, समय और दोहराव बताता है।
  2. W3C — Scalable Vector Graphics (SVG) 2 — SVG वेक्टर दस्तावेज़ मॉडल परिभाषित करता है।
  3. MDN — SMIL से SVG एनीमेशन — SVG गुण, रूपांतरण और गति का बनाया एनीमेशन समझाता है।
  4. PerfectVector — GIF से SVG कन्वर्टर — वर्तमान चुने फ़्रेम की वेक्टराइज़ेशन प्रक्रिया बताता है।

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

Blog से और

अपनी इमेज फ़ाइल को
एडिट करने योग्य SVG में बदलें