SVG को सही साइज़ की PNG में कैसे बदलें

छोटा जवाब

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

नीचे लिखा सब कुछ तब के लिए है जब वह डिफ़ॉल्ट काफ़ी न हो, यानी जब आपके लिए कोई संख्या तय कर दी गई हो, जब यह छपने जा रही हो, या जब यह गलत दिखती हुई लौट आए।

साइज़ फ़ाइल का नहीं, आपका फ़ैसला क्यों है

JPEG नापे गए पिक्सलों की जाली है; वह कितनी बड़ी है, इस सवाल का एक जवाब होता है। SVG तस्वीर है ही नहीं, वह निर्देशों का समूह है, जैसे यहाँ एक वृत्त खींचिए, यह पाथ उस रंग में। और निर्देशों का कोई साइज़ नहीं होता। ब्राउज़र उन्हें 16 पिक्सल पर भी पूरा कर सकता है और 4000 पर भी, और नतीजा दोनों जगह उतना ही साफ़ रहता है, क्योंकि वह कुछ बड़ा-छोटा कर ही नहीं रहा। वह दोबारा खींच रहा है।

इसीलिए रूपांतरण आपके लिए कोई संख्या चुन नहीं सकता, और इसीलिए बड़ी संख्या चुनने की आपको कोई कीमत भी नहीं चुकानी पड़ती। तस्वीरों वाले कामों में यह अकेला ऐसा काम है जिसमें “इसे बड़ा कर दीजिए” मुफ़्त है।

ज़्यादातर SVG फ़ाइलों में width और height एट्रिब्यूट होते ज़रूर हैं, और टूल उन्हें दिखा भी देगा, पर वे डिफ़ॉल्ट हैं, सीमा नहीं। जिस आइकन पर width="24" लिखा है, वह सिर्फ़ इतना कहता है कि उसे बनाने वाले के मन में 24 पिक्सल का टूलबार था।

वह संख्या असल में आती कहाँ से है

वेबसाइट के लिए। तस्वीर पेज पर CSS पिक्सलों में जितनी जगह घेरती है, उसे उन स्क्रीनों के पिक्सल घनत्व से गुणा कर दीजिए जिनकी आपको परवाह है। 200 पिक्सल चौड़े खाने में बैठे लोगो को Retina लैपटॉप के लिए 400 पिक्सल की फ़ाइल चाहिए और हाल के फ़ोन के लिए 600। @2x और @3x का पूरा मतलब बस इतना ही है, और इसीलिए जो टूल उन्हें खुद लिख देता है वह आपको यही हिसाब तीन बार लगाने से बचा लेता है।

ऐप आइकन, स्टोर लिस्टिंग या favicon के लिए। संख्या प्रकाशित होती है और निकालने को कुछ है ही नहीं: स्टोर के पेज पर जो लिखा है, ठीक वही। favicon के लिए तो रैस्टराइज़ कीजिए ही मत। इसके बजाय .ico बनाइए, जो एक ही फ़ाइल में कई साइज़ रखती है, क्योंकि ब्राउज़र का टैब, बुकमार्क और Windows का शॉर्टकट, तीनों अलग-अलग साइज़ माँगते हैं।

छपाई के लिए। इंच में भौतिक आकार को प्रिंटर के रिज़ॉल्यूशन से गुणा कर दीजिए। विज़िटिंग कार्ड पर दो इंच चौड़ा जाने वाला लोगो 300 DPI पर 600 पिक्सल है; वही लोगो A4 पन्ने भर, यानी 8.3 इंच में, करीब 2500। प्रिंट शॉप आदतन 300 DPI माँगती हैं, और कमरे भर की दूरी से देखे जाने वाले बड़े बैनर के लिए 150 काफ़ी है।

सोशल प्रीव्यू या OG इमेज के लिए। प्लैटफ़ॉर्म एक डिब्बा बता देता है, ज़्यादातर लिंक प्रीव्यू के लिए ⁦1200 × 630⁩, और वह डिब्बा आपके लोगो से अलग आकार का होता है। “खाली जगह भरिए” वाली सेटिंग इसी के लिए है। ड्रॉइंग अपने ही अनुपात में बीच में रखी जाती है और बाकी जगह बैकग्राउंड के रंग से भर दी जाती है, उस खिंचे हुए लोगो के बजाय जो सबको बता देता है कि आपने जाँचा नहीं था।

जब इनमें से दो लागू हों, तो बड़ा वाला इस्तेमाल कीजिए। ज़रूरत से बड़ी PNG बस थोड़ा बड़ा डाउनलोड है; जो बहुत छोटी है उसे बाद में ठीक नहीं किया जा सकता, और वजह अगले हिस्से में है।

वापसी का रास्ता नहीं है

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

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

ऐसा सॉफ़्टवेयर भी है जो PNG को वापस SVG में बदलने का दावा करता है। वह जो करता है वह है ट्रेस: यह अंदाज़ा लगाना कि पिक्सलों की इस जाली की व्याख्या कौन-से वक्र कर सकते हैं। सपाट, दो-रंगी कलाकृति पर वह ठीक-ठाक चल जाता है और बाकी हर चीज़ पर महँगी बकवास बनाता है, और वह कभी वह नहीं लौटाता जो असली ड्रॉइंग के पास था।

पिक्सल बनते ही तीन चीज़ें बदल जाती हैं

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

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

इसका इलाज वही है जो हर डिज़ाइनर पहले से जानता है: SVG एक्सपोर्ट करने से पहले टेक्स्ट को आउटलाइन में बदल दीजिए (Illustrator इसे Create Outlines कहता है, Figma इसे Flatten कहता है, Inkscape इसे Object to Path)। अक्षर ज्यामिति बन जाते हैं, फ़ॉन्ट का मायने रखना बंद हो जाता है, और तस्वीर हर मशीन पर एक जैसी दिखती है। यह किसी नकल पर कीजिए, क्योंकि आउटलाइन में बदला टेक्स्ट अब टेक्स्ट की तरह संपादित नहीं किया जा सकता।

बाल जैसी लकीरें भूरी पड़ जाती हैं या गायब हो जाती हैं। जो स्ट्रोक आपके चुने साइज़ पर एक पिक्सल से कम बैठता है, उसे ठोस लकीर के रूप में खींचा ही नहीं जा सकता, इसलिए वह फीका खींचा जाता है। इसीलिए नाज़ुक लोगो 64 पिक्सल पर रैस्टराइज़ होने पर धुला-धुला दिखता है जबकि वही फ़ाइल 512 पर बिलकुल ठीक। अगर छोटा साइज़ ही ज़रूरत है, तो जवाब कोई दूसरी एक्सपोर्ट सेटिंग नहीं, मोटे स्ट्रोक वाली सरल ड्रॉइंग है। यही वजह है कि favicon कोई चिह्न होता है, वर्डमार्क नहीं।

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

पारदर्शिता, और कौन-सा फ़ॉर्मैट चुनें

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

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

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

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

जब एक्सपोर्ट खाली या गलत निकले

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

ड्रॉइंग छोटी-सी है, ऊपर बाएँ कोने में। फ़ाइल में width और height तो हैं पर viewBox नहीं, इसलिए बड़ा-छोटा करने को कोई निर्देशांक-व्यवस्था है ही नहीं और कलाकृति बड़े कैनवस पर अपनी असली इकाइयाँ ही बनाए रखती है। अच्छा कन्वर्टर आपके लिए viewBox डाल देता है; अगर आपके वाले ने नहीं डाला, तो रूट तत्व पर viewBox="0 0 width height" हाथ से जोड़ देना इसे ठीक कर देता है, और फ़ाइल सादा टेक्स्ट है इसलिए आप ऐसा कर सकते हैं।

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

यह बहुत बड़े साइज़ से मना कर देता है। ब्राउज़र इस पर छत लगाते हैं कि कैनवस कितना बड़ा हो सकता है, और वे इस पर सहमत नहीं कि छत कहाँ है: किसी किनारे पर मोटे तौर पर 16,000 पिक्सल के आगे कुछ वापस नहीं आता, और iPhone या iPad पर Safari कहीं पहले ही हाथ खड़े कर देता है, करीब ⁦4096 × 4096⁩ पर। जो टूल आपको चेतावनी देता है वह आपको खाली फ़ाइल से बचा रहा है, क्योंकि दम टूटने पर ब्राउज़र कोई त्रुटि संदेश नहीं, वही बनाता है।

इसमें से किसी के लिए अपलोड की ज़रूरत नहीं

SVG रैस्टराइज़ करना वह काम है जो हर ब्राउज़र दिन में हज़ारों बार करता है, और यह वही मशीनरी है जो किसी वेब पेज पर आइकन खींचती है। आपकी कलाकृति के PNG बनकर निकलने के लिए किसी सर्वर तक जाकर लौटने की कोई तकनीकी वजह नहीं है, और यहाँ का टूल उसे कहीं भेजता भी नहीं। पेज की Content-Security-Policy उन सारे पतों के नाम गिना देती है जिनसे वह संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं है।

SVG के साथ यह आम से ज़्यादा मायने रखता है, क्योंकि SVG तस्वीर नहीं, दस्तावेज़ है। उसमें कोई स्क्रिप्ट और कोई दूर का पता हो सकता है, और किसी एजेंसी की भेजी लोगो फ़ाइल वह फ़ाइल है जो आपने लिखी ही नहीं। image टैग के ज़रिए खींचे जाने पर वह उसमें होती है जिसे विनिर्देश secure static mode कहता है: स्क्रिप्ट चल ही नहीं सकती और उस पते से कभी संपर्क नहीं होता। इसे वेबसाइट नहीं, ब्राउज़र लागू करता है।

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