SVG से PNG — वेक्टर ग्राफ़िक्स को बिना अपलोड किए किसी भी साइज़ में रेंडर करें

लोग अक्सर पूछते हैं कि SVG से PNG "बिना क्वालिटी खोए" कैसे कन्वर्ट करें, और इस सवाल में ही एक ग़लतफ़हमी है जिसे पहले दूर करना ज़रूरी है। SVG में खोने के लिए कोई क्वालिटी होती ही नहीं। उसमें पिक्सेल ही नहीं होते।

वेक्टर बताते हैं, पिक्सेल स्टोर करते हैं

SVG शेप्स का विवरण है — कर्व, फ़िल, टेक्स्ट — एक ऐसे कोऑर्डिनेट सिस्टम में जिसका कोई तय पिक्सेल साइज़ नहीं होता। PNG पिक्सेल का एक तय ग्रिड है। इसलिए SVG से PNG कन्वर्ट करने का मतलब हमेशा एक साइज़ चुनना होता है, और नतीजा आपके चुने हर साइज़ पर शार्प होता है।

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

viewBox, width और height का असल मतलब

रूट एलिमेंट पर तीन एट्रिब्यूट साइज़ को कंट्रोल करते हैं। viewBox कोऑर्डिनेट सिस्टम तय करता है — "यह ड्रॉइंग आड़े में 0 से 240 और खड़े में 0 से 160 तक फैली है"। width और height, अगर मौजूद हों, तो एक डिफ़ॉल्ट डिस्प्ले साइज़ सुझाते हैं। कई SVG में सिर्फ़ viewBox होता है, कुछ में सिर्फ़ width और height, और कुछ में दोनों नहीं।

यह कन्वर्टर जो भी मौजूद हो उसे पढ़ता है, ब्राउज़र की तरह इंट्रिन्सिक साइज़ निकालता है, और उसे 1× बेस के तौर पर इस्तेमाल करता है। अगर कुछ भी घोषित न हो, तो यह 1,024 पिक्सेल पर लौट जाता है ताकि आपको फिर भी काम की इमेज मिले।

"बिना क्वालिटी खोए" ग़लत सवाल क्यों है

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

यह टूल आपकी SVG फ़ाइलों को ब्राउज़र में पढ़ता है, हर एक्ज़ीक्यूटेबल चीज़ हटाता है, हर फ़ाइल को आपके चुने साइज़ पर ब्राउज़र के अपने इंजन से रेंडर करता है, और ट्रांसपेरेंसी बरकरार रखते हुए लॉसलेस PNG लौटाता है — अलग-अलग या ZIP में।

आपके ब्राउज़र वाला ही रेंडरर

सर्वर-साइड कन्वर्टर एक अलग लाइब्रेरी इस्तेमाल करते हैं — librsvg, Inkscape, ImageMagick — और हर एक में कमियाँ हैं: कोई फ़िल्टर जो वह सपोर्ट नहीं करता, कोई फ़ॉन्ट जिसे वह बदल देता है, कोई ग्रेडिएंट जिसे वह थोड़ा अलग बनाता है। जो PNG आपको वापस मिलता है, वह उस SVG से मेल न खाए जिसे आपने देखा था।

यहाँ रेंडरिंग Blink, Gecko या WebKit करता है — जो भी ब्राउज़र आप इस्तेमाल कर रहे हैं — SVG को कैनवास पर बनाकर। अगर SVG आपके ब्राउज़र में सही दिखता है, तो PNG भी वैसा ही दिखेगा, क्योंकि वह सचमुच वही ड्रॉइंग है।

स्क्रिप्ट हटाई गईं, कुछ अपलोड नहीं हुआ

SVG XML है, और उसमें <script> एलिमेंट, onload हैंडलर और एम्बेडेड HTML हो सकते हैं। अनजान स्रोत की फ़ाइल यूँ ही खोलने की चीज़ नहीं है। रेंडर करने से पहले कन्वर्टर स्क्रिप्ट, इवेंट एट्रिब्यूट और foreignObject ब्लॉक हटा देता है, और नतीजे को एक इमेज एलिमेंट के अंदर रेंडर करता है जो वैसे भी कोड नहीं चला सकता। दो परतें, दोनों लोकल।

किसी भी मोड़ पर कुछ अपलोड नहीं होता। बैच कन्वर्ट होते समय आपके ब्राउज़र के डेवलपर टूल्स का Network पैनल खाली रहता है।

चूँकि साइज़ एक चुनाव है, यह जानना मददगार है कि विकल्प किसलिए हैं। दो मोड लगभग हर केस कवर कर लेते हैं।

1×, 2×, 3× — स्क्रीन डेंसिटी से मिलान

सामान्य मॉनिटर हर CSS पॉइंट पर एक पिक्सेल दिखाता है। Retina या HiDPI डिस्प्ले दो दिखाता है; ज़्यादातर आधुनिक फ़ोन तीन। इसलिए स्क्रीन पर 32 पॉइंट के आइकन को पहले के लिए 32-पिक्सेल PNG, दूसरे के लिए 64 और तीसरे के लिए 96 चाहिए। 1×, 2× और 3× का पूरा मतलब यही है।

वेब और ऐप के काम में आमतौर पर वही SVG तीनों स्केल पर एक्सपोर्ट किया जाता है। फ़ाइल एक बार ड्रॉप करें, 1× पर कन्वर्ट करें, सेटिंग बदलें, फिर कन्वर्ट करें — या बस 3× पर एक्सपोर्ट करें और प्लेटफ़ॉर्म को डाउनस्केल करने दें।

आम टार्गेट के लिए साइज़ टेबल

फ़ेविकॉन: 16, 32 और 48 पिक्सेल, जिन्हें 512-पिक्सेल PNG से PNG से ICO टूल के ज़रिए बनाना सबसे अच्छा है। ऐप आइकन: स्टोर के लिए 1024 पिक्सेल, फिर आइकन सेट जनरेटर। सोशल अवतार: 400 से 800 पिक्सेल। Open Graph इमेज: 1200 × 630। मार्केटप्लेस लिस्टिंग: आमतौर पर लंबे किनारे पर 2000 पिक्सेल।

प्रिंट और मार्केटप्लेस के लिए कस्टम चौड़ाई

प्रिंट के लिए 300 DPI पर फ़िज़िकल साइज़ से उल्टा हिसाब लगाएँ: A4 पेज 2,480 पिक्सेल चौड़ा, A3 3,508, 6-इंच का स्टिकर 1,800। चौड़ाई मोड पर जाएँ, संख्या टाइप करें, और ऊँचाई SVG के आस्पेक्ट रेशियो के हिसाब से आ जाती है। कन्वर्टर आउटपुट को लंबे किनारे पर 16,384 पिक्सेल तक सीमित रखता है — यह सीमा ब्राउज़र कैनवास पर लगाते हैं — और बताता है अगर किसी रिक्वेस्ट को घटाना पड़ा हो।

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

बैकग्राउंड ट्रांसपेरेंट रखना

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

नतीजे चेकरबोर्ड पर दिखते हैं ताकि आप डाउनलोड से पहले ट्रांसपेरेंसी की पुष्टि कर सकें।

किसी रंग पर कब फ़्लैट करें

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

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

ब्राउज़र में रेंडर करने का मतलब है कि PNG स्क्रीन से मेल खाता है, लेकिन उसे ब्राउज़र के वे नियम भी विरासत में मिलते हैं कि कोई इमेज क्या लोड कर सकती है।

गायब फ़ॉन्ट

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

भरोसेमंद समाधान है SVG एक्सपोर्ट करने से पहले अपने डिज़ाइन टूल में टेक्स्ट को आउटलाइन में बदल देना। अक्षर पाथ बन जाते हैं और हर जगह एक जैसे रेंडर होते हैं।

गायब लिंक्ड इमेज

यही नियम <image href="https://…"> पर लागू होता है। URL से खींची गई रास्टर इमेज खाली निकलेगी। उसकी जगह उसे एम्बेड करें — ज़्यादातर एडिटर में "एम्बेड इमेजेज़" एक्सपोर्ट विकल्प होता है, जो लिंक को SVG के अंदर data URI में बदल देता है। एम्बेडेड इमेज ठीक रेंडर होती हैं।

खाली या बहुत छोटा आउटपुट

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

अगर SVG परफ़ेक्ट स्केल होता है, तो SVG से PNG कन्वर्ट क्यों करें? क्योंकि बहुत सारा सॉफ़्टवेयर अब भी वेक्टर नहीं ले सकता।

आइकन सेट और फ़ेविकॉन

ऐप स्टोर, फ़ेविकॉन फ़ॉर्मैट और कई आइकन सिस्टम तय साइज़ के PNG चाहते हैं। जो सबसे बड़ा साइज़ चाहिए उस पर एक बार SVG से PNG कन्वर्ट करें, फिर बाक़ी आइकन जनरेटर या PNG से ICO से काटें।

SVG अस्वीकार करने वाले प्लेटफ़ॉर्म

सोशल नेटवर्क, मार्केटप्लेस, कम्युनिटी फ़ोरम और ज़्यादातर CMS मीडिया लाइब्रेरी SVG अपलोड अस्वीकार करते हैं — आंशिक रूप से सुरक्षा के लिए, क्योंकि SVG में स्क्रिप्ट हो सकती है। ट्रांसपेरेंट बैकग्राउंड वाला 2× PNG सार्वभौमिक विकल्प है।

ईमेल सिग्नेचर और न्यूज़लेटर

मेल क्लाइंट SVG हटा देते हैं या टूटी इमेज दिखाते हैं। ईमेल में लोगो PNG होते हैं, आदर्श रूप से 2× पर एक्सपोर्ट करके आधे साइज़ पर दिखाए जाते हैं ताकि Retina स्क्रीन पर शार्प रहें।

प्रिंट और बड़ा फ़ॉर्मैट

प्रिंट शॉप PDF और हाई-रेज़ोल्यूशन रास्टर लेती हैं। चौड़ाई मोड से लोगो को 3,000 या 4,000 पिक्सेल पर रेंडर करें और वह पोस्टर साइज़ में साफ़ प्रिंट होगा — टार्गेट साइज़ पर रास्टराइज़ किए गए वेक्टर में अपस्केलिंग का धुंधलापन नहीं होता।

ऑनलाइन लगभग हर SVG से PNG कन्वर्टर फ़ाइल अपलोड करता है और उसे सर्वर पर librsvg, Inkscape या हेडलेस ब्राउज़र से रेंडर करता है। सरल शेप्स के लिए यह काम करता है और किसी भी जटिल चीज़ पर भटक जाता है।

सटीकता

हर रेंडरिंग लाइब्रेरी SVG स्पेसिफ़िकेशन का थोड़ा अलग हिस्सा सपोर्ट करती है। फ़िल्टर, मास्क, ब्लेंड मोड, फ़ाइल के अंदर का CSS और पाथ पर टेक्स्ट आम शिकार हैं। ब्राउज़र इंजन मौजूद सबसे संपूर्ण SVG रेंडरर हैं, और आपकी मशीन वाले से रेंडर करने का मतलब है कि PNG प्रीव्यू से अलग हो ही नहीं सकता।

प्राइवेसी और सीमाएँ

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

सर्वर क्या बेहतर करता है: बहुत पुराना हार्डवेयर जटिल SVG के बैच को डेटा सेंटर से धीमा रेंडर करेगा। दस लोगो के लिए कोई फ़र्क़ नहीं पड़ता।

SVG से PNG कन्वर्ज़न का आउटपुट स्टैंडर्ड PNG है, इसलिए यहाँ का हर टूल इसे बिना दोबारा अपलोड किए ले लेता है।

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