SVG से PNG — जब आपको सचमुच पिक्सल चाहिए (और जब नहीं चाहिए)

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

SVG-से-PNG एक काम के रूप में मौजूद होने की पूरी वजह यही है। इसलिए नहीं कि PNG बेहतर है — आमतौर पर होती नहीं — बल्कि इसलिए कि दुनिया का बड़ा हिस्सा सिर्फ़ पिक्सल पढ़ सकता है।

वेक्टर और रास्टर, झटपट

SVG कोई तस्वीर नहीं है। यह निर्देशों का एक सेट है — यहाँ एक गोला खींचो, वहाँ यह पथ, इसे इस रंग से भरो। ब्राउज़र निर्देशों का पालन करता है और आप जो भी साइज़ माँगें उस पर उन्हें ताज़ा रेंडर कर देता है, इसलिए यह 16 पिक्सल पर उतनी ही तेज़ है जितनी 16,000 पर, और फ़ाइल नन्ही रहती है क्योंकि यह बस गणित है।

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

तो SVG को PNG में बदलना यानी अनंत स्केलेबिलिटी को सार्वभौमिक संगतता से बदलना। यह अच्छा सौदा है या नहीं, यह पूरी तरह इस पर निर्भर करता है कि इमेज कहाँ जा रही है।

जब आपको सचमुच PNG चाहिए

तीन मामले जहाँ मैं बिना हिचक रास्टराइज़ करता हूँ, क्योंकि वेक्टर वहाँ चलेगी ही नहीं:

ईमेल। ईमेल क्लाइंट SVG रेंडर नहीं करते — Gmail, Outlook, Apple Mail, क़रीब-क़रीब सब सुरक्षा वजहों से इसे मना कर देते हैं। ईमेल सिग्नेचर या न्यूज़लेटर में लोगो को रास्टर फ़ॉर्मैट होना ही पड़ता है। PNG, क्योंकि आपको ट्रांसपेरेंसी चाहिए।

सोशल और OG प्रीव्यू इमेज। जब आप कोई लिंक शेयर करते हैं तो जो नन्हा कार्ड दिखता है — Open Graph इमेज — उसे एक तयशुदा साइज़ की रास्टर होना पड़ता है, आमतौर पर 1200x630। प्लेटफ़ॉर्म वहाँ SVG रेंडर नहीं करेंगे। अगर आपका सोर्स आर्ट वेक्टर है, तो आप उसी साइज़ पर एक PNG एक्सपोर्ट करते हैं।

पुराना या ऑफ़लाइन सॉफ़्टवेयर। ढेरों डेस्कटॉप ऐप, प्रेज़ेंटेशन टूल, डॉक्युमेंट एडिटर और प्रिंट वर्कफ़्लो या तो SVG इम्पोर्ट नहीं कर पाते या उसका कबाड़ा कर देते हैं। उन्हें किसी उदार रिज़ॉल्यूशन पर PNG थमा देना हर बार, बिना किसी हैरानी के काम कर जाता है।

तीनों में तय करने वाली बात एक ही है: मंज़िल भौतिक रूप से वेक्टर पढ़ ही नहीं सकती, इसलिए स्केलेबिलिटी बेमानी है। जो फ़ॉर्मैट रेंडर होता है वह उससे हमेशा बेहतर है जो नहीं होता।

सही रखने लायक वो एक चीज़: रिज़ॉल्यूशन

यह रही वह ग़लती जो मैं सबसे ज़्यादा देखता हूँ, और शुरू में ख़ुद भी कर चुका हूँ। चूँकि PNG उसी साइज़ पर तय हो जाती है जिस पर आप उसे एक्सपोर्ट करते हैं, इसलिए आपको इसे काफ़ी बड़ा एक्सपोर्ट करना पड़ता है — और आदर्श रूप से ठीक उसी साइज़ पर जिस पर आप इसे दिखाएँगे।

एक लोगो को 100x100 PNG के रूप में एक्सपोर्ट कीजिए और फिर उसे किसी हाई-डेंसिटी स्क्रीन पर 300 पिक्सल पर दिखाइए, और यह नरम और दानेदार दिखेगा। उस जगह को भरने वाले पिक्सल मौजूद ही नहीं। इलाज आसान है: उसी साइज़ पर एक्सपोर्ट कीजिए जिस पर आप सचमुच इस्तेमाल करेंगे, या उससे बड़ा, ख़ासकर Retina और 4K डिस्प्ले के लिए जहाँ आपको अक्सर नाममात्र साइज़ का 2 गुना चाहिए होता है। वेक्टर छोड़ने पर आप जो एकमात्र असली फ़ायदा गँवाते हैं यही है, तो टारगेट रिज़ॉल्यूशन सही करने में एक पल लगाइए।

जब आपको रास्टराइज़ नहीं करना चाहिए

अगर मंज़िल SVG पढ़ सकती है, तो SVG ही रखिए। बस, और कुछ नहीं।

अपनी ही वेबसाइट पर, किसी आइकन या लोगो को वेक्टर ही रहना चाहिए। यह हर स्क्रीन पर हर ज़ूम लेवल पर तीखा रहेगा, यह बराबरी वाली PNG से छोटा रहेगा, और जब कोई नया ऊँचे-घनत्व वाला डिस्प्ले आएगा तो आपको बड़ा वर्शन दोबारा एक्सपोर्ट नहीं करना पड़ेगा। वहाँ इसे रास्टराइज़ करना शुद्ध घाटा है — आप उस संगतता को पाने के लिए फ़ॉर्मैट की सबसे अच्छी ख़ूबी फेंक रहे होंगे जो आपके पास पहले से है।

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

मैं इसे असल में कैसे करता हूँ

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

पर असली हुनर कन्वर्ज़न नहीं है। यह वह सवाल है जो आप पहले पूछते हैं: क्या यह जगह वेक्टर पढ़ती है? अगर हाँ, तो SVG को छोड़ दीजिए और सबसे तीखे, सबसे छोटे विकल्प का मज़ा लीजिए। अगर नहीं — ईमेल, OG कार्ड, कोई ज़िद्दी पुराना ऐप — तो रास्टराइज़ कीजिए, सही साइज़ पर, और अगली बार के लिए अपनी SVG सुरक्षित रखिए। यह फ़ैसला सही कर लीजिए और जहाँ आपका लोगो होना चाहिए वहाँ आपको दोबारा कभी ख़ाली डिब्बा नहीं दिखेगा।