PNG को SVG में बदलें: लोगो, आइकन और लाइन आर्ट ट्रेस करें

PNG एक रास्टर इमेज है: पिक्सल का एक तय ग्रिड, जिसमें हर पिक्सल का एक रंग और चाहें तो ओपेसिटी वैल्यू होती है। 500 × 500 px के लोगो में ठीक 250,000 ऐसे वर्ग होते हैं, और कुछ नहीं। इसलिए उसे पोस्टर साइज़ तक बड़ा करने पर हर वर्ग बस बड़ा हो जाता है या उनके बीच की जगह धुंधली पड़ जाती है। SVG एक वेक्टर इमेज है, यानी एक टेक्स्ट फ़ाइल जिसमें <path>, <circle> और <rect> जैसे आकार निर्देशांक और फ़िल रंगों के साथ लिखे होते हैं। ब्राउज़र या कटिंग मशीन इन आकारों को ज़रूरत के हिसाब से किसी भी साइज़ पर दोबारा बनाती है, इसीलिए वेक्टर लोगो फ़ोन की स्क्रीन पर भी और ट्रेड-शो के बैनर पर भी साफ़ दिखता है।

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

कुछ कन्वर्टर मुश्किल हिस्सा छोड़ देते हैं। वे एक वैध SVG फ़ाइल लिख देते हैं जिसमें एक <image> एलिमेंट होता है और मूल PNG base64 टेक्स्ट के रूप में एम्बेड होती है; इससे फ़ाइल PNG से लगभग एक तिहाई बड़ी भी हो जाती है। नतीजा SVG की तरह खुलता है और फ़ाइल-टाइप जाँच पास कर लेता है, पर वह वेक्टर रैपर में रखी पिक्सल इमेज ही है: ज़ूम करने पर वही दाँतेदार किनारे दिखते हैं, और कटिंग मशीन को चलने के लिए कोई पाथ नहीं मिलता। किसी भी SVG को टेक्स्ट एडिटर में खोलकर data:image/png खोजें; अगर यह स्ट्रिंग मिले, तो कुछ भी वेक्टराइज़ नहीं हुआ।

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

फ़ोटो इसका उल्टा मामला हैं। पोर्ट्रेट या प्रोडक्ट शॉट में हज़ारों हल्के अलग टोन एक-दूसरे में घुलते हैं, और वेक्टर फ़ॉर्मैट के पास इसे बताने का कोई कारगर तरीक़ा नहीं है। ट्रेसर से 16 रंग माँगें तो दिखने वाली पट्टियों वाला पोस्टराइज़्ड चित्र मिलता है; 64 माँगें तो PNG से कहीं बड़ी फ़ाइल में हज़ारों छोटे आकार मिलते हैं, फिर भी वह फ़ोटो जैसा नहीं दिखता। सॉफ़्ट ग्रेडिएंट, ड्रॉप शैडो और ग्लो भी इसी तरह पतली पट्टियों की परतों में बदल जाते हैं। छोटा टेक्स्ट तीसरी समस्या है: 10–12 px पर एंटी-एलियासिंग हर अक्षर को बैकग्राउंड में घोल देती है, और ट्रेसर "e" और "o" में फ़र्क़ नहीं कर पाता।

किसी भी सेटिंग से ज़्यादा रेज़ोल्यूशन मायने रखता है। ट्रेसर हर कर्व को किनारे पर पिक्सल की सीढ़ी के हिसाब से बैठाता है, और सीढ़ी जितनी बारीक होगी, कर्व उतना सटीक होगा। अगर आपने PNG खुद Figma, Canva, Photoshop या स्लाइड डेक से एक्सपोर्ट की है, तो उसे डिस्प्ले साइज़ से दो-तीन गुना बड़ी एक्सपोर्ट करें; 1500–2000 px चौड़ा लोगो ट्रेसर को काम करने के लिए काफ़ी जानकारी देता है। छोटी PNG को पहले AI एनलार्जर से बड़ा न करें, जब तक नतीजा 100 % ज़ूम पर साफ़ न दिखे, क्योंकि गढ़ी हुई किनारे की बनावट भी असली किनारों जितनी ही ईमानदारी से ट्रेस होती है।

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

आख़िर में, ट्रेसर के करने से पहले रंगों की संख्या ख़ुद घटाएँ। सोर्स फ़ाइल में शैडो, ग्लो और ग्रेडिएंट ओवरले छिपा दें, और अगर वेक्टर वर्ज़न को ग्रेडिएंट फ़िल की ज़रूरत नहीं है तो उसे उसके बीच वाले रंग से बदल दें। आउटलाइन के रंग समेत बचे हुए ठोस रंग गिनें और संख्या लिख लें; अगले चरण में दर्ज की जाने वाली यह सबसे काम की संख्या है। अगर एक ही लोगो की JPEG और PNG में से चुनना हो, तो PNG लें, क्योंकि JPEG कंप्रेशन हर किनारे के आसपास नॉइज़ जोड़ता है, जैसा JPG vs JPEG vs PNG में समझाया गया है।

हर ट्रेसर वही तीन सवाल पूछता है, भले ही लेबल अलग हों। पहला है कितने रंग रखने हैं। PNG से SVG कन्वर्टर में कलर मोड रंगीन, ग्रेस्केल और ब्लैक एंड व्हाइट में से चुनता है, और रंगों की संख्या तय करती है कि पिक्सल को कितने क्लस्टर में बाँटा जाए, 2 से 64 तक। इसे अपनी लिखी हुई गिनती के बराबर रखें। इसे बहुत ज़्यादा रखने पर ट्रेसर एंटी-एलियास्ड किनारे के पिक्सल को अलग पतले रंगों में बाँट देता है, जो हर आकार के चारों ओर हल्के हेलो के रूप में दिखता है; बहुत कम रखने पर दो ब्रांड रंग एक में मिल जाते हैं।

दूसरा सवाल है किनारों को कैसे सँभालना है। स्मूदिंग पिक्सल से बनी सीढ़ियों को गोल करती है, और बारीकी तय करती है कि कितना छोटा धब्बा भी आकार बन सकता है। PNG पेज बारीकी 70 और स्मूदिंग 40 से शुरू होता है, जो साफ़ एक्सपोर्ट पर छोटे कोने बचाए रखता है। अगर धूल और बेकार बिंदु दिखें तो बारीकी घटाएँ, कर्व लहरदार लगें तो स्मूदिंग बढ़ाएँ, और सीधे किनारों वाले ज्यामितीय लोगो के लिए कर्व को सीधी रेखाएँ पर, या ब्लॉकी रखने वाली पिक्सल आर्ट के लिए पिक्सल किनारे पर सेट करें।

तीसरा सवाल सिर्फ़ ब्लैक एंड व्हाइट ट्रेसिंग पर लागू होता है: स्याही और काग़ज़ के बीच रेखा कहाँ खींचनी है। थ्रेशोल्ड 1 से 254 तक चलता है, डिफ़ॉल्ट 128 है। थ्रेशोल्ड से गहरे पिक्सल काले हो जाते हैं, हल्के खाली। पतले नीले बॉलपॉइंट से लिखे सिग्नेचर के लिए इसे 160–180 की ओर बढ़ाएँ ताकि हल्की रेखाएँ बची रहें; हल्के भूरे काग़ज़ पर मोटे मार्कर के चित्र के लिए इसे 100 की ओर घटाएँ ताकि काग़ज़ की बनावट धब्बे न बन जाए। एक बार में एक सेटिंग बदलकर तुलना करें, क्योंकि सेटिंग्स का असर आपस में जुड़ा होता है।

सिर्फ़ थंबनेल देखकर न रुकें। SVG को ब्राउज़र में खोलें और सबसे बारीक कर्व पर 400–800 % तक ज़ूम करें, जैसे किसी अक्षर का गोल हिस्सा या नुकीला सिरा। अच्छे ट्रेस में आर्क स्मूद दिखते हैं और जहाँ डिज़ाइन में कोने हैं वहाँ कोने तीखे रहते हैं; कमज़ोर ट्रेस में लहरें, दबाव के निशान और गोल हो चुके सिरे दिखते हैं। फिर फ़ाइल को Inkscape, Illustrator या Figma जैसे वेक्टर एडिटर में खोलें और आउटलाइन या नोड व्यू चालू करें। दो रंगों वाले साधारण लोगो में आमतौर पर कुछ सौ नोड होते हैं; अगर आपकी फ़ाइल में कई हज़ार दिखें, तो ट्रेसर शोर के पीछे चला गया है और पाथ एडिट करना या काटना मुश्किल होगा।

फ़ाइल साइज़ एक तेज़ जाँच है। फ्लैट लोगो की ऑप्टिमाइज़ की हुई SVG आमतौर पर कुछ KB से कुछ दर्जन KB की होती है, और अक्सर मूल PNG से भी छोटी होती है। अगर ट्रेस की गई फ़ाइल सोर्स PNG से कई गुना बड़ी है, तो आमतौर पर रंग बहुत ज़्यादा हैं, बारीकी बहुत ज़्यादा है, या ऐसी फोटो ट्रेस की गई है जिसे नहीं करना चाहिए था। SVG ऑप्टिमाइज़ करें चालू रखें, क्योंकि यह बिना दिखने वाले बदलाव के कोऑर्डिनेट राउंड करता है और पाथ मर्ज करता है। आख़िर में आर्टवर्क को पोस्टर साइज़ तक बड़ा और फ़ेविकॉन साइज़ तक छोटा करके देखें कि दोनों पर ठीक दिखता है।

मुफ़्त डेस्कटॉप विकल्प Inkscape है। PNG इम्पोर्ट करें, उसे चुनें और Path > Trace Bitmap (Shift+Alt+B) खोलें। Brightness cutoff जैसे सिंगल-स्कैन मोड एक काला पाथ बनाते हैं, जो लाइन आर्ट के लिए ठीक है; मल्टीपल-स्कैन मोड तय संख्या के रंग या ग्रे को एक के ऊपर एक परतों में ट्रेस करते हैं। Inkscape की ब्लैक एंड व्हाइट ट्रेसिंग Potrace पर बनी है, जो Peter Selinger की 2001 में जारी की गई ट्रेसिंग लाइब्रेरी है। Potrace खुद कमांड-लाइन प्रोग्राम है जो PNG की जगह PBM, PGM, PPM या BMP पढ़ता है, सिर्फ़ दो-रंग वाली इमेज संभालता है, और SVG, PDF, EPS या DXF लिखता है; इसलिए स्कैन के बड़े बैच स्क्रिप्ट से चलाने के लिए यह अच्छा विकल्प है।

Adobe Illustrator में Illustrator CS6 से Image Trace ने पुराने Live Trace की जगह ली। PNG रखें, Window > Image Trace खोलें और Black and White Logo, 3 Colors या 16 Colors जैसे प्रीसेट से शुरू करें, फिर एडवांस्ड सेक्शन में Paths, Corners और Noise ठीक करें। ट्रेस तब तक लाइव रहता है जब तक आप Expand पर क्लिक नहीं करते, जो उसे सामान्य एडिट होने वाले पाथ में बदल देता है। अगर आपके पास दोनों में से कोई प्रोग्राम नहीं है, तो ब्राउज़र कन्वर्टर वही प्रक्रिया चलाता है: रंग घटाना, किनारे खोजना, कर्व फ़िट करना; इमेज से SVG कन्वर्टर JPG, WebP और HEIC भी लेता है और SVG की जगह EPS, PDF या DXF भी लिख सकता है।

वेब पर SVG 2001 से W3C Recommendation है और हर मौजूदा ब्राउज़र इसे <img> टैग में, CSS बैकग्राउंड के रूप में या HTML में इनलाइन दिखाता है, जहाँ होवर पर इसके रंग तक बदले जा सकते हैं। ट्रेस किया हुआ लोगो अक्सर रेटिना स्क्रीन के लिए बने कई PNG साइज़ की जगह एक छोटी फ़ाइल ले लेता है। कटिंग मशीनों के लिए Cricut Design Space और Silhouette Studio SVG फॉर्मेट ही मानते हैं: हर ट्रेस की गई आकृति कट पाथ बनती है, और मल्टी-कलर ट्रेस अलग परतों में आता है जिन्हें आप अलग रंगों के विनाइल से काट सकते हैं। लेज़र कटर और CNC सॉफ़्टवेयर आमतौर पर DXF पसंद करते हैं, जो PNG से DXF उन्हीं ट्रेसिंग सेटिंग से बनाता है।

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