SVG को PNG में बदलें

ऐसा रेज़ोल्यूशन तय करना जो कभी तय था ही नहीं

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

टेक्स्ट में यह सबसे ज़्यादा ग़लत होता है, और इसकी वजह समझना फ़ायदेमंद है। SVG कहता है “यह स्ट्रिंग Helvetica Neue में लिखो”; अगर रेंडर करने वाली मशीन में Helvetica Neue नहीं है, तो उसकी जगह कोई और फ़ॉन्ट आ जाता है और लेआउट खिसक जाता है — जो टाइटल अपने बॉक्स में फ़िट था, अब बाहर निकल जाता है। URL से जुड़ा वेब फ़ॉन्ट यहां बिल्कुल लोड नहीं होता, क्योंकि इमेज के रूप में रेंडर हो रही SVG जान-बूझकर अलग-थलग रखी जाती है और नेटवर्क तक नहीं पहुंच सकती। इसका हल वही है जो हर डिज़ाइनर आख़िरकार सीखता है: एक्सपोर्ट करने से पहले टेक्स्ट को आउटलाइन में बदलें, ताकि अक्षर ऐसे पाथ बन जाएं जिन्हें किसी फ़ॉन्ट की ज़रूरत न हो।

यही अलगाव बाक़ी हैरानियों की भी वजह है। जुड़ा हुआ बिटमैप — कहीं किसी .png की ओर इशारा करता image एलिमेंट — कुछ भी रेंडर नहीं करता। स्क्रिप्ट नहीं चलतीं, इसलिए JavaScript से ख़ुद को बनाने वाली SVG ख़ाली या अधूरी आती है। डिक्लेरेटिव एनिमेशन अपनी शुरुआती स्थिति में रेंडर होता है, यानी पहले फ़्रेम की एक स्थिर तस्वीर। अपने-आप में पूरी हर चीज़ बढ़िया काम करती है: ग्रेडिएंट, फ़िल्टर, क्लिपिंग पाथ, मास्क, एम्बेड की गई data URI इमेज और ब्लर इफ़ेक्ट — सब वैसे ही रेंडर होते हैं जैसे बनाए गए।

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

जब आपको कुछ और चाहिए

resvg और rsvg-convert कमांड लाइन से SVG रेंडर करते हैं और उनके पास असली फ़ॉन्ट मौजूद होते हैं, इसलिए टेक्स्ट किसी दूसरे फ़ॉन्ट के बजाय अपने तय टाइपफ़ेस में रेंडर होता है — rsvg-convert -w 512 in.svg -o out.png पूरी कमांड है। Inkscape --export-type=png --export-dpi=300 इस स्पेसिफ़िकेशन का सबसे पूरा इम्प्लीमेंटेशन है, और वे फ़िल्टर और ब्लेंड मोड संभालता है जिन्हें हल्के रेंडरर सिर्फ़ मोटे तौर पर दिखाते हैं।

रास्टराइज़ करने से पहले ही जांच लें कि क्या किसी चीज़ को सच में PNG चाहिए। हर ब्राउज़र एक दशक से ज़्यादा समय से SVG को सीधे दिखाता है, और वेबसाइट पर लोगो या आइकन के लिए SVG छोटी, हर साइज़ पर शार्प, और CSS से स्टाइल की जा सकने वाली होती है। जिन मामलों में सच में पिक्सेल चाहिए वे लोगों के अंदाज़े से कम हैं: फ़ेविकॉन, सोशल प्रीव्यू इमेज, ईमेल, ऐप स्टोर एसेट, और ऐसे सॉफ़्टवेयर जो वेक्टर नहीं पढ़ सकते।