AI (Adobe Illustrator) को SVG में कैसे बदलें
AI और SVG फ़ाइलें क्या हैं, और इन्हें एक-दूसरे में बदलने की ज़रूरत क्यों पड़ती है?
एक AI फ़ाइल Adobe Illustrator का अपना फ़ॉर्मैट है, जो वेक्टर आर्टवर्क को एक मालिकाना संरचना में संग्रहीत करता है जिसे केवल Illustrator और कुछ अन्य ऐप ही पूरी तरह से समझ सकते हैं। यह शक्तिशाली है, जो Illustrator-विशिष्ट सुविधाओं जैसे लाइव इफ़ेक्ट्स, संपादन योग्य टेक्स्ट और जटिल ब्लेंड मोड का समर्थन करता है। लेकिन यह सारी शक्ति एक ब्लैक बॉक्स के अंदर बंद है। AI फ़ाइलें एक बंद इकोसिस्टम हैं। इसे किसी ब्राउज़र, वेब ऐप, या डेवलपर की बिल्ड पाइपलाइन में उपयोग करने का प्रयास करें, और आप पाएंगे कि यह बिल्कुल कुछ नहीं करता है। दूसरी ओर, SVG (स्केलेबल वेक्टर ग्राफ़िक्स) एक खुला मानक है। W3C द्वारा बनाए रखा गया, यह XML-आधारित फ़ॉर्मैट हर आधुनिक ब्राउज़र द्वारा मूल रूप से प्रस्तुत किया जाता है। यह एक छोटे 16×16 favicon से लेकर एक विशाल 4K बिलबोर्ड तक बिना किसी शार्पनेस के नुकसान के स्केल हो जाता है। चूँकि इसकी सामग्री सिर्फ़ सादा टेक्स्ट है, डेवलपर्स सीधे कोड में पाथ, रंग और एनिमेशन में हेरफेर भी कर सकते हैं। एक 8 KB SVG के रूप में निर्यात किया गया लोगो किसी भी आकार में एकदम सही दिखेगा; वही लोगो उच्च-रिज़ॉल्यूशन PNG के रूप में आसानी से 200 KB या उससे अधिक का हो सकता है। AI से SVG में यह रूपांतरण वास्तविक दुनिया के वर्कफ़्लो में एक दैनिक कार्य है। एक डिज़ाइनर एक वेब डेवलपर को लोगो सौंपता है। एक UI टीम को आइकन एसेट्स की आवश्यकता होती है। एक प्रिंट एजेंसी वेबसाइट पर ब्रांडिंग लगाना चाहती है। समस्या यह है कि अनुवाद हमेशा सही नहीं होता है। Illustrator-विशिष्ट जादू—रास्टर फ़िल्टर, कुछ ग्रेडिएंट मेश, लिंक किए गए फ़ॉन्ट—का SVG में कोई सीधा समकक्ष नहीं है। इन तत्वों को या तो निर्यात करने से पहले सरल बनाया जाना चाहिए या स्वचालित टूल द्वारा उनका अनुमान लगाया जाएगा, कभी-कभी बुरी तरह से। इसे शुरुआत से समझना आपको बहुत सारी दोबारा मेहनत करने से बचाएगा।
सबसे साफ़-सुथरा तरीका: Adobe Illustrator से सीधे SVG एक्सपोर्ट करना
यदि आपके पास Adobe Illustrator है, तो सीधे निर्यात करना एक साफ़, नियंत्रणीय परिणाम प्राप्त करने का सबसे अच्छा तरीका है। प्रक्रिया अपने आप में सरल है, लेकिन सेटिंग्स पैनल वह जगह है जहाँ चीज़ें गलत हो सकती हैं। **File > Export > Export As** पर जाएँ, फ़ॉर्मैट ड्रॉपडाउन से SVG चुनें, और Export पर क्लिक करें। Illustrator आपके सामने SVG विकल्प संवाद प्रस्तुत करेगा। इन सेटिंग्स पर पूरा ध्यान दें, क्योंकि वे मायने रखती हैं। - **Styling**: 'Presentation Attributes' बेहतर विकल्प है यदि SVG को बाद में CSS के साथ स्टाइल या एनिमेट किया जाएगा। यदि यह एक स्थिर छवि है, तो कोई भी विकल्प ठीक काम करता है। - **Font**: इसे 'Convert to Outlines' पर सेट करें। मैं फिर से दोहराता हूँ: जब तक आप पूरी तरह से निश्चित न हों कि अंतिम उपयोगकर्ता के वातावरण में आपके द्वारा उपयोग किया गया सटीक फ़ॉन्ट है, बस इसे आउटलाइन में बदल दें। यह अक्षर रूपों को वेक्टर पाथ के रूप में एम्बेड करता है और फ़ॉन्ट पर निर्भरता की समस्याओं से पूरी तरह बच जाता है। - **Images**: यदि आपके आर्टवर्क में फ़ोटो या टेक्सचर जैसी रास्टर छवियाँ शामिल हैं, तो 'Embed' चुनें। लिंकिंग छोटी फ़ाइलें बनाती है लेकिन एक बाहरी फ़ाइल पथ पर एक नाज़ुक निर्भरता पैदा करती है जिसे तोड़ना आसान है। - **Object IDs**: यदि डेवलपर्स को JavaScript या CSS के साथ विशिष्ट तत्वों को लक्षित करने की आवश्यकता है तो 'Layer Names' का उपयोग करें। स्थिर एसेट्स के लिए जहाँ हर बाइट मायने रखती है, 'Minimal' ठीक है। - **Decimal Places**: स्क्रीन ग्राफ़िक्स के लिए 2 का मान लगभग हमेशा सही होता है। 1 पर गिराने से कुछ बाइट्स कम हो जाते हैं लेकिन जटिल कर्व्स को स्पष्ट रूप से विकृत कर सकते हैं। 2 पर टिके रहें। - **Minify**: प्रोडक्शन एसेट्स के लिए इसे हमेशा चुनें। यह व्हाइटस्पेस और टिप्पणियों को हटाता है, जिससे फ़ाइल का आकार 10-20% तक कम हो जाता है। निर्यात संवाद तक पहुँचने से पहले भी, एक महत्वपूर्ण तैयारी कदम है। आपको उन सभी लाइव इफ़ेक्ट्स को फ़्लैटन या एक्सपैंड करना होगा जो SVG में अच्छी तरह से अनुवादित नहीं होते हैं (**Object > Expand Appearance** का उपयोग करके)। उदाहरण के लिए, एक Illustrator ड्रॉप शैडो इफ़ेक्ट या तो गायब हो जाएगा या आपके SVG के अंदर एक भद्दी रास्टर छवि में परिवर्तित हो जाएगा। जिस किसी ने भी तथाकथित वेक्टर फ़ाइल खोली हो और उसके अंदर एक धुंधली JPEG पाई हो, वह इस दर्द को अच्छी तरह जानता है। एक स्केलेबल ग्राफ़िक के लिए दोनों में से कोई भी परिणाम आप नहीं चाहेंगे।
CocoConvert के साथ AI को SVG में ऑनलाइन बदलना
सच तो यह है कि हर किसी के पास सक्रिय Adobe Creative Cloud सदस्यता नहीं होती है। भले ही आपके पास हो, कभी-कभी आपको बस एक ऐसी मशीन पर तेज़ रूपांतरण की आवश्यकता होती है जिसमें Illustrator स्थापित न हो। उन क्षणों के लिए, एक ऑनलाइन कनवर्टर सबसे व्यावहारिक समाधान है, और CocoConvert यह काम कर देता है। [CocoConvert के AI से SVG कन्वर्टर](/convert/ai-to-svg) पर प्रक्रिया बेहद आसान है: अपनी AI फ़ाइल अपलोड करें, इसके प्रोसेस होने के लिए एक पल प्रतीक्षा करें, और परिणामी SVG डाउनलोड करें। मानक रूपांतरणों के लिए कोई सॉफ़्टवेयर नहीं, कोई साइन-अप नहीं। बेशक, कुछ बुनियादी नियम हैं। CocoConvert 100 MB तक की फ़ाइलों को संभालता है, जो अधिकांश AI दस्तावेज़ों के लिए पर्याप्त से अधिक है। केवल उच्च-रिज़ॉल्यूशन छवियों से भरी सबसे जटिल प्रिंट फ़ाइलें ही उस सीमा को पार करेंगी, और उन्हें वैसे भी Illustrator में संभालना सबसे अच्छा है। सबसे अच्छा क्या काम करता है? फ़्लैट वेक्टर आर्टवर्क। लोगो, आइकन, और बुनियादी पाथ और सरल ग्रेडिएंट से बने चित्र खूबसूरती से परिवर्तित होते हैं। यदि आपकी AI फ़ाइल ज़्यादातर ठोस भराव और स्ट्रोक के साथ साफ़ वेक्टर आकृतियों की है, तो आप एक अत्यधिक सटीक SVG की उम्मीद कर सकते हैं। जहाँ आपको परेशानी होगी, वह Illustrator की अपनी खासियतों के साथ है। ग्रेडिएंट मेश, जटिल ब्लेंड मोड, और 'Roughen' जैसे लाइव इफ़ेक्ट्स का कोई सीधा SVG समकक्ष नहीं है। CocoConvert उनका अनुमान लगाता है, लेकिन उन कलाओं के लिए जो इन सुविधाओं पर बहुत अधिक निर्भर करती हैं, आउटपुट को मैन्युअल सफ़ाई की आवश्यकता हो सकती है। यही बात फ़ॉन्ट पर भी लागू होती है। यदि आपकी AI फ़ाइल लाइव टेक्स्ट का उपयोग करती है जिसे आउटलाइन नहीं किया गया है, तो कनवर्टर एक फ़ॉलबैक फ़ॉन्ट का उपयोग करेगा। सटीक टाइपोग्राफी के लिए, अपलोड करने से पहले हमेशा Illustrator में अपने टेक्स्ट को आउटलाइन करें।
मुफ़्त विकल्पों का उपयोग: Inkscape और अन्य टूल्स
Inkscape एक शानदार मुफ़्त, ओपन-सोर्स वेक्टर एडिटर है जो AI को SVG में काफी अच्छी तरह से बदल सकता है। यह किसी भी ऐसे व्यक्ति के लिए एक ज़रूरी टूल है जो नियमित रूप से वैक्टर के साथ काम करता है लेकिन Adobe इकोसिस्टम के बाहर रहता है। Inkscape में, आप बस **File > Open** के माध्यम से AI फ़ाइल खोलते हैं, फिर तुरंत इसे **File > Save As** के माध्यम से सहेजते हैं, फ़ॉर्मैट के रूप में SVG चुनते हैं। आपको 'Plain SVG' और 'Inkscape SVG' के विकल्प दिखाई देंगे; ब्राउज़रों और अन्य टूल के साथ सर्वोत्तम संगतता के लिए, हमेशा 'Plain SVG' चुनें। लेकिन एक बहुत बड़ी शर्त है: PDF संगतता। Inkscape सहित अधिकांश तीसरे पक्ष के उपकरण वास्तव में मूल AI डेटा नहीं पढ़ते हैं। वे एक PDF स्ट्रीम पढ़ते हैं जिसे Illustrator फ़ाइल में एम्बेड करता है। यदि AI फ़ाइल को 'Create PDF Compatible File' विकल्प चुने बिना सहेजा गया था, तो Inkscape इसे नहीं खोल सकता। आपको बस एक खाली कैनवास या एक त्रुटि मिलेगी। यदि कोई क्लाइंट आपको एक AI फ़ाइल भेजता है जो नहीं खुलती है, तो लगभग निश्चित रूप से यही कारण है। आपको उनसे उस विकल्प को सक्षम करके इसे फिर से सहेजने के लिए कहना होगा। अन्य उपकरण भी मौजूद हैं। Affinity Designer, जो लगभग ₹6,000 की एक बार की खरीद है, में उत्कृष्ट AI आयात है और यह बहुत साफ़ SVG बनाता है। मेरे हिसाब से, यदि आप Adobe की सदस्यता पर नहीं हैं तो यह सबसे अच्छा दीर्घकालिक निवेश है। कमांड-लाइन के शौकीनों के लिए, `cairosvg` और `svg-convert` जैसे उपकरण हैं, लेकिन उन्हें अक्सर AI को पहले किसी अन्य फ़ॉर्मैट में बदलने की आवश्यकता होती है, जो एक सरल वर्कफ़्लो के उद्देश्य को विफल करता है। एक त्वरित, एक बार के रूपांतरण के लिए, CocoConvert का ऑनलाइन टूल अभी भी Inkscape को स्थापित करने और सीखने से तेज़ है। हालाँकि, यदि आप खुद को साप्ताहिक रूप से ऐसा करने की आवश्यकता पाते हैं, तो Inkscape में समय या Affinity Designer में पैसा निवेश करना फ़ायदेमंद होगा।
आम समस्याएँ और उन्हें ठीक करने के तरीके
रूपांतरण हो गया है, लेकिन SVG... गलत दिखता है। ऐसा होता है। यहाँ कुछ आम वजहें और उन्हें ठीक करने के तरीके दिए गए हैं। **गुम या प्रतिस्थापित फ़ॉन्ट**: आप SVG खोलते हैं और आपकी सुंदर, ध्यान से चुनी गई टाइपफ़ेस को एक सामान्य सिस्टम फ़ॉन्ट से बदल दिया गया है। इसका समाधान फ़ॉन्ट को अप्रासंगिक बनाना है। बदलने से पहले, Illustrator में अपने सभी टेक्स्ट का चयन करें और इसे आउटलाइन करें (**Type > Create Outlines**, या Shift+Ctrl+O / Shift+Cmd+O)। यह अक्षरों को सादे वेक्टर पाथ में बदल देता है, जिससे फ़ॉन्ट पर निर्भरता समाप्त हो जाती है। **SVG के अंदर रास्टर आर्टिफैक्ट्स**: फ़ाइल एक वेक्टर होनी चाहिए, लेकिन आप धुंधले पिक्सेल देखते हैं, या फ़ाइल का आकार आश्चर्यजनक रूप से कई मेगाबाइट है। यह एक क्लासिक संकेत है कि Illustrator इफ़ेक्ट्स निर्यात पर रास्टराइज़ हो गए थे। इसका समाधान यह है कि आप इसे स्वयं करें, लेकिन बेहतर तरीके से। Illustrator में, निर्यात करने से पहले **Object > Expand Appearance** पर जाएँ। यह अधिकांश लाइव इफ़ेक्ट्स को उनके वेक्टर-पाथ समकक्षों में परिवर्तित करता है। **रंग अलग दिखते हैं**: आपके ब्रांड का जीवंत नीला अब फीका और मंद दिखता है। यह संभवतः एक कलर स्पेस समस्या है। Illustrator अक्सर प्रिंट कार्य के लिए CMYK पर डिफ़ॉल्ट होता है, लेकिन SVG एक वेब फ़ॉर्मैट है और RGB की दुनिया में काम करता है। इसका समाधान यह है कि निर्यात करने से पहले Illustrator में दस्तावेज़ के कलर मोड को **File > Document Color Mode > RGB Color** के माध्यम से बदलें। **SVG फ़ाइल बहुत बड़ी है**: एक साधारण लोगो जो 15 KB का होना चाहिए, किसी तरह 2 MB का है। यह आमतौर पर एम्बेडेड रास्टर छवियों, अत्यधिक दशमलव परिशुद्धता, या जटिल ग्रेडिएंट मेश की ओर इशारा करता है जिन्हें सरल नहीं किया गया है। इसका समाधान मिनिफ़िकेशन सक्षम करके फिर से निर्यात करना, दशमलव स्थानों को 2 तक गिराना, और शुरू करने से पहले जटिल वस्तुओं को सरल या विस्तृत करना है। **ऑनलाइन कन्वर्टर्स से खाली आउटपुट**: आप अपनी AI फ़ाइल अपलोड करते हैं और आपको एक खाली SVG वापस मिलता है। याद है वह PDF संगतता सेटिंग जिसके बारे में हमने बात की थी? यह वह जगह है जहाँ यह आपको परेशान करता है। AI फ़ाइल को संभवतः 'Create PDF Compatible File' बॉक्स को चुने बिना सहेजा गया था, और कनवर्टर के पास पढ़ने के लिए कुछ भी नहीं है। एकमात्र समाधान मूल AI फ़ाइल को उस विकल्प को सक्षम करके फिर से सहेजना है।
कनवर्ज़न के बाद अपने SVG को ऑप्टिमाइज़ करना
उस SVG को अभी शिप न करें। एक ताज़ा निर्यात की गई फ़ाइल, यहाँ तक कि Illustrator से भी, अक्सर अनावश्यक कोड से भरी होती है जो बिना किसी दृश्य लाभ के वज़न बढ़ाती है। वेब उपयोग के लिए, अपने SVG को एक ऑप्टिमाइज़र के माध्यम से चलाना एक अनिवार्य कदम है। **SVGO** SVG ऑप्टिमाइज़ेशन के लिए इंडस्ट्री स्टैंडर्ड है। यह एक Node.js टूल है, लेकिन इसका इंजन jakearchibald.github.io/svgomg पर अविश्वसनीय रूप से उपयोगी वेब टूल को शक्ति प्रदान करता है। बस अपना परिवर्तित SVG अपलोड करें, और SVGOMG आपको एक लाइव पूर्वावलोकन और फ़ाइल आकार की बचत को वास्तविक समय में देखने के लिए एक स्लाइडर देता है। अधिकांश एसेट्स के लिए, आप टिप्पणियों को हटाने, मेटाडेटा हटाने, बेकार समूहों को संक्षिप्त करने, पाथ को मर्ज करने और खाली विशेषताओं को हटाने के विकल्पों को सुरक्षित रूप से सक्षम कर सकते हैं। फ़ाइल आकार में 30-60% की कमी देखना असामान्य नहीं है। बस 'Remove IDs' जैसे विकल्पों से सावधान रहें यदि आपके डेवलपर्स कोड के साथ विशिष्ट तत्वों को लक्षित करने की योजना बना रहे हैं। इसी तरह, यदि SVG एनीमेशन के लिए नियत है तो आक्रामक पाथ मर्जिंग से बचें; आप उन पाथ्स को एनिमेट नहीं कर सकते जिन्हें एक ही बूँद (blob) में मिला दिया गया है। प्रोडक्शन वेब एसेट्स के लिए, आपको यह भी तय करना होगा कि SVG इनलाइन (कोड सीधे HTML में पेस्ट किया गया) होगा या बाहरी (एक `<img>` टैग या CSS के माध्यम से लिंक किया गया)। इनलाइन SVG बहुत अच्छे होते हैं क्योंकि उन्हें आपकी मुख्य CSS फ़ाइल द्वारा स्टाइल किया जा सकता है, लेकिन वे HTML दस्तावेज़ के आकार में जुड़ते हैं और अलग से कैश नहीं होते हैं। बाहरी SVG ब्राउज़र द्वारा कैश किए जाते हैं लेकिन CSS के साथ हेरफेर करना कठिन होता है। एक अंतिम जाँच: W3C मार्कअप वैलिडेशन सर्विस जैसे टूल का उपयोग करके अपने अंतिम SVG को मान्य करें। जिसने भी एक घंटे एक ऐसे SVG को डीबग करने में बिताया है जो Chrome में पूरी तरह से प्रस्तुत होता है लेकिन Safari में एक पूरी आपदा है, वह इस कदम के मूल्य को जानता है। एक त्वरित सत्यापन पास विकृत कोड को प्रोडक्शन में एक आपात स्थिति बनने से पहले पकड़ लेता है।
अपनी स्थिति के लिए सही तरीका चुनना
तो, AI फ़ाइल को SVG में बदलने का सबसे अच्छा तरीका क्या है? यह इस बात पर निर्भर करता है कि आप कौन हैं और आप क्या हासिल करने की कोशिश कर रहे हैं। **Illustrator वाले पेशेवर डिज़ाइनर के लिए:** इसे स्वयं करें। इफ़ेक्ट्स, ग्रेडिएंट्स और कस्टम फ़ॉन्ट के साथ जटिल आर्टवर्क का एक आदर्श अनुवाद सुनिश्चित करने का एकमात्र तरीका तैयारी का काम करना है—टेक्स्ट को आउटलाइन करना, अपीयरेंस का विस्तार करना, RGB में स्विच करना—और Illustrator के अपने SVG निर्यात संवाद का उपयोग करना। आपके पास पूरा नियंत्रण है; इसका इस्तेमाल करें। **समय सीमा पर काम कर रहे डेवलपर के लिए:** आपके डिज़ाइनर ने बस आप पर एक AI फ़ाइल फेंकी और चले गए। घबराएँ नहीं। लोगो और आइकन जैसे सीधे-सादे एसेट्स के लिए, [CocoConvert का AI से SVG टूल](/convert/ai-to-svg) आपका सबसे तेज़ रास्ता है। यह तेज़ है, किसी सॉफ़्टवेयर की आवश्यकता नहीं है, और जब आप अत्यधिक जटिल आर्टवर्क से नहीं निपट रहे हों तो काम पूरा कर देता है। **ओपन-सोर्स उत्साही या बजट के प्रति सचेत क्रिएटिव के लिए:** आप अक्सर ऐसा करते हैं लेकिन Adobe की महंगी सदस्यता का भुगतान नहीं करना चाहते हैं। Inkscape आपका जवाब है। यह एक शक्तिशाली और मुफ़्त विकल्प है, लेकिन आपको PDF संगतता की आवश्यकता के प्रति सचेत रहना होगा। यदि आपकी स्रोत फ़ाइलें सही ढंग से सहेजी नहीं गई हैं, तो यह काम नहीं करेगा। आप जो भी तरीका चुनें, हमेशा अपना काम जांचें। अंतिम SVG को कम से कम Chrome और Firefox में खोलें। सुनिश्चित करें कि रंग सही हैं, टेक्स्ट शार्प है, और यह साफ़-सुथरे ढंग से स्केल होता है। दो मिनट की विज़ुअल जाँच ज़्यादातर कनवर्ज़न समस्याओं को किसी और के लिए डीबग करने की समस्या बनने से पहले ही पकड़ लेती है।