प्रिंट और वेब के लिए SVG को PNG में कैसे बदलें
SVG को PNG में बदलने की ज़रूरत ही क्यों है?
SVG (स्केलेबल वेक्टर ग्राफिक्स) को तो सबसे अच्छा फॉर्मेट होना चाहिए। यह पिक्सल के बजाय गणितीय पाथ के रूप में आकृतियों को संग्रहीत करता है, इसलिए एक लोगो को छोटे से फेविकॉन से लेकर एक विशाल बिलबोर्ड तक बिना किसी शार्पनेस को खोए स्केल किया जा सकता है। तो फिर हम इसे बदलने की बात ही क्यों कर रहे हैं? क्योंकि असल दुनिया में, कई प्लेटफॉर्म इसे सपोर्ट ही नहीं करते। एक डिफ़ॉल्ट वर्डप्रेस मीडिया लाइब्रेरी में SVG अपलोड करने की कोशिश करें और आप एक सुरक्षा ब्लॉक से टकरा जाएंगे। प्रिंटफुल और रेडबबल जैसी अधिकांश प्रिंट-ऑन-डिमांड सेवाएं PNG या JPEG जैसे रास्टर प्रारूपों की मांग करती हैं—क्योंकि उनके औद्योगिक-ग्रेड प्रिंटिंग सॉफ़्टवेयर (RIP, या रास्टर इमेज प्रोसेसर) को XML नहीं, बल्कि पिक्सल की आवश्यकता होती है। यहां तक कि ईमेल क्लाइंट और पुराने माइक्रोसॉफ्ट ऑफिस संस्करण भी SVG को या तो असंगत रूप से प्रस्तुत करेंगे या बस हाथ खड़े कर देंगे। यहीं पर PNG काम आता है। PNG महत्वपूर्ण अल्फा-ट्रांसपेरेंसी चैनल प्रदान करता है, जो आपके लोगो के बैकग्राउंड को सफेद बॉक्स लगाने के बजाय पारदर्शी रखता है। यह दोषरहित (lossless) संपीड़न का भी उपयोग करता है, इसलिए आप हर बार फ़ाइल सहेजने पर गुणवत्ता नहीं खोते हैं। लेकिन एक समस्या है। PNG रिज़ॉल्यूशन पर निर्भर है। एक बार जब आप इसे 300 पिक्सल चौड़ाई पर निर्यात करते हैं, तो आप इसे पिक्सलेटेड किए बिना 3000 पिक्सल तक नहीं खींच सकते। यह एक मौलिक समझौता है, और इसका मतलब है कि शुरुआत में ही निर्यात के आयामों को सही ढंग से सेट करना पूरी प्रक्रिया का सबसे महत्वपूर्ण कदम है।
रिज़ॉल्यूशन को समझना: PPI, DPI, और कौन से नंबर उपयोग करें
चलिए पहले इसे स्पष्ट करते हैं: इस पूरी प्रक्रिया का सबसे भ्रमित करने वाला हिस्सा रिज़ॉल्यूशन है। लोग DPI (डॉट्स प्रति इंच) और PPI (पिक्सेल प्रति इंच) का ऐसे उपयोग करते हैं जैसे वे एक ही हों, लेकिन वे नहीं हैं। PPI वह है जिसे आप नियंत्रित करते हैं। यह आपके द्वारा बनाई जा रही डिजिटल छवि का पिक्सेल घनत्व है। DPI वह है जो एक भौतिक प्रिंटर करता है—वह कागज पर स्याही के कितने छोटे डॉट्स डालता है। जब आप SVG को PNG में निर्यात करते हैं, तो आप PPI सेट कर रहे होते हैं। वेब ग्राफिक्स के लिए, चलिए इस बात को रास्ते से हटा दें: 'वेब के लिए 72 PPI' का पुराना नियम एक जीवाश्म है। यह अर्थहीन है। जो मायने रखता है वह है पूर्ण पिक्सेल आयाम। अपने ग्राफिक्स को ठीक उसी आकार में निर्यात करें जिस आकार में वे प्रदर्शित किए जाएंगे। यदि आपकी हीरो इमेज स्लॉट 1200 × 600 पिक्सल है, तो 1200 × 600 पिक्सल की PNG निर्यात करें। आधुनिक रेटिना और HiDPI स्क्रीन के लिए, आपको चीजों को शार्प रखने के लिए '2x' संस्करण की भी आवश्यकता होगी—इस मामले में, 2400 × 1200 पिक्सल। प्रिंट वह जगह है जहां नंबर वास्तव में मायने रखते हैं। उद्योग मानक अंतिम भौतिक आकार पर गणना किया गया 300 PPI है। यदि आप एक मानक 3.5 × 2 इंच का बिजनेस कार्ड डिज़ाइन कर रहे हैं, तो आपकी PNG को कम से कम 1050 × 600 पिक्सल होना चाहिए (यह 3.5 × 300 और 2 × 300 है)। एक बड़े A4 पोस्टर के लिए, आपको उस 300 PPI लक्ष्य को प्राप्त करने के लिए 2480 × 3508 पिक्सेल की छवि की आवश्यकता होगी। इसका एकमात्र अपवाद दूर से देखे जाने वाले बड़े प्रारूप वाले प्रिंट हैं, जैसे कि बैनर, जहां आप अक्सर 150 PPI या 96 PPI से भी काम चला सकते हैं क्योंकि दूरी पिक्सल को एक साथ मिला देती है। यह लचीलापन ही पूरी बात है। आपका मूल SVG रिज़ॉल्यूशन-स्वतंत्र है। आप एक ही स्रोत फ़ाइल से एक छोटे आइकन के लिए PNG और एक विशाल पोस्टर के लिए दूसरी PNG बना सकते हैं, बिना मूल को छुए। यह एक ऐसी शक्ति है जो आपके पास कम-रिज़ॉल्यूशन वाले JPEG से शुरू करते समय नहीं होती है।
CocoConvert का उपयोग करके SVG को PNG में कैसे बदलें
चूंकि CocoConvert आपके ब्राउज़र में काम करता है, इसलिए आपको इलस्ट्रेटर या इंकस्केप इंस्टॉल करने की आवश्यकता नहीं है। रूपांतरण हमारे सर्वर पर होता है। प्रक्रिया सरल है, लेकिन सेटिंग्स की जांच किए बिना सिर्फ 'कन्वर्ट' बटन न दबाएं। जादू विवरण में है। 1. [SVG to PNG कनवर्टर](/convert/svg-to-png) पेज पर जाएं। 2. अपनी SVG फ़ाइल को अपलोड क्षेत्र में खींचें, या 'फ़ाइल चुनें' बटन का उपयोग करें। 50 MB की फ़ाइल सीमा उदार है; अधिकांश SVG छोटे होते हैं, अक्सर 1 MB से कम। 3. यह महत्वपूर्ण कदम है। बदलने से पहले, 'आउटपुट सेटिंग्स' पैनल खोलें। यहीं पर आप पिक्सल में लक्ष्य चौड़ाई सेट करते हैं। उन नंबरों का उपयोग करें जिनकी आपने पहले गणना की थी—उदाहरण के लिए, 300 PPI पर उस A4 प्रिंट जॉब के लिए 2480 px। CocoConvert स्वचालित रूप से मूल पहलू अनुपात बनाए रखता है। 'कस्टम आयाम' चेकबॉक्स का उपयोग केवल तभी करें जब आपको एक विशिष्ट ऊंचाई को बाध्य करने और संभावित रूप से छवि को विकृत करने की आवश्यकता हो। 4. बैकग्राउंड डिफ़ॉल्ट रूप से पारदर्शी होता है, जो अल्फा चैनल को संरक्षित करता है। आमतौर पर आप यही चाहते हैं। यदि आपको एक ठोस पृष्ठभूमि की आवश्यकता है (मान लीजिए, एक वर्कफ़्लो के लिए जो बाद में केवल JPEG स्वीकार करता है), तो आप इसे बाद में फ़ोटोशॉप में ठीक करने के बजाय यहां एक रंग सेट कर सकते हैं। 5. कन्वर्ट पर क्लिक करें और अपनी नई PNG प्राप्त करें। फोंट पर एक त्वरित ध्यान दें: CocoConvert एक मानक ब्राउज़र इंजन का उपयोग करके SVG प्रस्तुत करता है। इसका मतलब है कि यदि आपका SVG CSS `@font-face` नियम के माध्यम से एक विशेष फ़ॉन्ट का उपयोग करता है, तो यह सही ढंग से प्रदर्शित नहीं हो सकता है जब तक कि वह फ़ॉन्ट SVG फ़ाइल के भीतर ही एम्बेड न हो। वेब पर फ़ॉन्ट रेंडरिंग से जूझने वाला कोई भी व्यक्ति इस विशेष सिरदर्द को जानता है। सार्वभौमिक समाधान यह है कि आप SVG निर्यात करने से पहले अपने वेक्टर संपादक में अपने टेक्स्ट को आउटलाइन (या पाथ) में बदल दें। इलस्ट्रेटर में, यह Type > Create Outlines है। इंकस्केप में, यह Path > Object to Path है। यह टेक्स्ट को आकृतियों में बदल देता है और गारंटी देता है कि यह हर जगह समान दिखेगा, जो वैसे भी लोगो के लिए एक अच्छी प्रथा है।
एक साथ कई SVG फ़ाइलों को बदलना
यदि आप एक आइकन लाइब्रेरी, एक यूआई किट, या ब्रांड संपत्ति के एक फ़ोल्डर के साथ काम कर रहे हैं, तो एक-एक करके फ़ाइलों को बदलना कोई विकल्प नहीं है। CocoConvert आपको बैच में बदलने की सुविधा देता है। बस फ़ाइल पिकर में अपनी सभी SVG फ़ाइलों को एक साथ चुनें (Shift या Ctrl/Cmd दबाए रखें) और वे सभी समान आउटपुट सेटिंग्स के साथ संसाधित की जाएंगी। आपकी परिवर्तित PNG एक ही, साफ-सुथरे ZIP संग्रह में आ जाएंगी। बैच जॉब चलाते समय समझने के लिए कुछ व्यवहार हैं। आपके द्वारा चुनी गई चौड़ाई सेटिंग बैच की प्रत्येक फ़ाइल पर लागू होती है, लेकिन प्रत्येक व्यक्तिगत फ़ाइल का पहलू अनुपात संरक्षित रहता है। उदाहरण के लिए, यदि आपके पास एक ही बैच में एक वर्गाकार 24 × 24 px आइकन और एक चौड़ा 1200 × 300 px बैनर है, और आप आउटपुट चौड़ाई 512 px पर सेट करते हैं, तो आइकन 512 × 512 px PNG बन जाएगा, और बैनर 512 × 128 px PNG बन जाएगा। यह लगभग हमेशा वही होता है जो आप मिश्रित आकार के बैचों के लिए चाहते हैं, लेकिन एक विशाल फ़ोल्डर को संसाधित करने से पहले इसके बारे में पता होना अच्छा है। साथ ही, अपने इनपुट फ़ाइल नामों पर ध्यान दें। आउटपुट ZIP उन्हें प्रतिबिंबित करेगा, बस एक्सटेंशन को .png में बदल देगा। यदि आपकी स्रोत फ़ाइलें `icon-home.svg` और `icon-cart.svg` की तरह अच्छी तरह से नामित हैं, तो आपका आउटपुट उतना ही व्यवस्थित होगा। यदि उनका नाम `download(1).svg` है, तो आपके पास एक गड़बड़ होगी। अपलोड करने से पहले अपने फ़ाइल नामों को साफ़ करें। आइए काम के लिए सही टूल के बारे में स्पष्ट रहें। CocoConvert सुविधा के लिए बनाया गया है, जो दर्जनों या कुछ सौ फ़ाइलों को बदलने के लिए एकदम सही है। यदि आप एक विशाल स्वचालन पाइपलाइन के लिए 500+ फ़ाइलों वाले फ़ोल्डर को देख रहे हैं, तो आप इंकस्केप या इमेजमैजिक जैसे कमांड-लाइन टूल से बेहतर सेवा प्राप्त करेंगे। उस टूल का उपयोग करें जो आपके कार्य के पैमाने पर फिट बैठता है।
रूपांतरण से पहले SVG तैयार करना: सामान्य गलतियाँ
आपकी अंतिम PNG उतनी ही अच्छी होगी जितनी कि स्रोत SVG। यह क्लासिक 'जैसा इनपुट, वैसा आउटपुट' वाली समस्या है। यदि आपका रूपांतरण सही नहीं दिख रहा है, तो समस्या लगभग हमेशा SVG कोड के अंदर ही छिपी होती है। यहां जांच करने के लिए सबसे आम दोषी दिए गए हैं। गायब हिस्से या अजीब सफेद बॉक्स? यह अक्सर टूटे हुए क्लिपिंग पाथ या मास्क की ओर इशारा करता है। SVG एक आकृति को दूसरे को मास्क करने के लिए उपयोग कर सकते हैं, लेकिन यदि मास्क और आकृति के बीच का संदर्भ टूट जाता है (अक्सर एक ऐप से निर्यात करने और दूसरे में संपादित करने से), तो रेंडरर भ्रमित हो जाता है। यदि आप ऐसा देखते हैं, तो SVG को एक टेक्स्ट एडिटर में खोलें और खराब आईडी संदर्भों वाले `clipPath` या `mask` तत्वों की खोज करें। गलत आकार का आउटपुट? इसका दोषी संभवतः एक गायब `viewBox` विशेषता है। एक अच्छी तरह से बने SVG को अपने आंतरिक समन्वय प्रणाली को परिभाषित करने और इसे ठीक से स्केल करने की अनुमति देने के लिए एक `viewBox` (जैसे `viewBox='0 0 100 100'`) की आवश्यकता होती है। कुछ उपकरण केवल `width` और `height` विशेषताओं के साथ SVG निर्यात करते हैं, जिससे रेंडरर आपके अनुरोधित आउटपुट आकार को अनदेखा कर सकते हैं और बस फ़ाइल के शाब्दिक पिक्सेल आयामों का उपयोग कर सकते हैं। इसका समाधान SVG को संपादित करना और दस्तावेज़ के आयामों से मेल खाने वाला `viewBox` जोड़ना है। एक वेक्टर फ़ाइल में पिक्सलेटेड अनुभाग? आपके SVG में एक एम्बेडेड रास्टर छवि हो सकती है। हाँ, SVG में `<image>` टैग के अंदर JPEG या PNG छिपे हो सकते हैं। यदि किसी लोगो में एक फोटोग्राफिक बनावट है, उदाहरण के लिए, वह बनावट केवल उतनी ही शार्प होगी जितनी मूल एम्बेडेड छवि थी। पूरी फ़ाइल को 4000 पिक्सल चौड़ा करने से उस एक हिस्से को जादुई रूप से डी-पिक्सलेट नहीं किया जाएगा। प्रिंट के लिए गलत रंग? याद रखें कि SVG और PNG दोनों RGB प्रारूप हैं, जो डिफ़ॉल्ट रूप से sRGB कलर स्पेस में रहते हैं। PNG, CMYK रंग डेटा संग्रहीत नहीं कर सकता है। यदि आपके प्रिंटर को बिल्कुल CMYK फ़ाइल की आवश्यकता है, तो आप PNG में परिवर्तित करके वहां नहीं पहुंच सकते। आपको अपने वेक्टर संपादक पर वापस जाना होगा और TIFF या ठीक से कॉन्फ़िगर किए गए PDF जैसे CMYK-देशी प्रारूप को निर्यात करना होगा।
रूपांतरण के बाद PNG को ऑप्टिमाइज़ करना
चौंकिए मत अगर आपके द्वारा अभी-अभी बनाई गई सुंदर, उच्च-रिज़ॉल्यूशन वाली PNG बहुत बड़ी है। एक जटिल SVG से प्रिंट-तैयार PNG, जैसे ग्रेडिएंट वाली 2480 × 3508 px फ़ाइल, आसानी से 15–25 MB से ऊपर जा सकती है। वेब के लिए, यह एक गैर-स्टार्टर है। प्रिंट के लिए, आकार कम चिंता का विषय है, लेकिन कई प्रिंट सेवाओं की अपलोड सीमा होती है, इसलिए यदि संभव हो तो फ़ाइलों को 10 MB से कम रखना एक अच्छी प्रथा है। वेब डिलीवरी के लिए, ऑप्टिमाइज़ेशन वैकल्पिक नहीं है। आपको अपनी PNG को एक दोषरहित ऑप्टिमाइज़र के माध्यम से चलाना होगा। ब्राउज़र-आधारित Squoosh, कमांड-लाइन उपयोगिता `pngquant`, या वेब सेवा TinyPNG जैसे उपकरण गुणवत्ता में किसी भी दृश्य परिवर्तन के बिना फ़ाइल आकार को 40–70% तक कम कर सकते हैं। वे बुद्धिमानी से रंग पैलेट को कम करके और अधिक कुशल संपीड़न लागू करके काम करते हैं। एक 2 MB की PNG अक्सर `pngquant --quality=65-80 yourfile.png` का उपयोग करके 300 KB से कम हो सकती है। आपको यह भी पूछना चाहिए कि क्या PNG वेब के लिए सबसे अच्छा अंतिम प्रारूप है भी। यदि आपकी छवि को पारदर्शिता की आवश्यकता नहीं है, तो इसे WebP में बदलना एक स्मार्ट कदम है। WebP को आधुनिक ब्राउज़रों में सार्वभौमिक समर्थन प्राप्त है और यह आमतौर पर तुलनीय PNG की तुलना में 25–35% छोटी फ़ाइलें बनाता है। केवल-वेब संपत्तियों के लिए, आप CocoConvert के साथ सीधे SVG से WebP में जा सकते हैं और बीच के PNG चरण को पूरी तरह से छोड़ सकते हैं। प्रिंट के लिए, ठीक इसके विपरीत करें: ऑप्टिमाइज़ न करें। अपनी प्रिंट सेवा को सीधे डाउनलोड की गई पूरी-रिज़ॉल्यूशन, असम्पीडित PNG भेजें। प्रिंटफुल जैसी कुछ सेवाएं विशेष रूप से संपीड़ित PNG अपलोड करने के खिलाफ चेतावनी देती हैं। हानिपूर्ण संपीड़न आर्टिफैक्ट जो आपकी स्क्रीन पर पूरी तरह से अदृश्य हैं, प्रिंट होने पर स्पष्ट रूप से दिखाई दे सकते हैं।
त्वरित संदर्भ: उपयोग के मामले के अनुसार सेटिंग्स
आपको हर बार फ़ाइल बदलते समय गणित करने की आवश्यकता नहीं है। इस अनुभाग को बुकमार्क करें या इसे सबसे आम निर्यात सेटिंग्स के लिए एक चीट शीट के रूप में संभाल कर रखें। फेविकॉन (वेब): 512 × 512 px पर निर्यात करें। आधुनिक फेविकॉन जनरेटर इस एक बड़ी PNG को लेंगे और आपके लिए सभी छोटे आकार (16, 32, 180, 192 px) बना देंगे। सोशल मीडिया प्रोफ़ाइल चित्र: अपने न्यूनतम के रूप में 800 × 800 px का उपयोग करें। भले ही ट्विटर/एक्स और फेसबुक जैसे प्लेटफॉर्म उन्हें छोटा दिखाते हैं, एक बड़ी स्रोत फ़ाइल अपलोड करने से उनके संपीड़न एल्गोरिदम को बेहतर डेटा मिलता है, जिसके परिणामस्वरूप बहुत तेज अंतिम छवि बनती है। ओपन ग्राफ / सोशल शेयर छवि: 1200 × 630 px। यह फेसबुक द्वारा अनुशंसित मानक पहलू अनुपात है और अब लगभग सभी द्वारा उपयोग किया जाता है। बिजनेस कार्ड (प्रिंट, 3.5 × 2 इंच @ 300 PPI): 1050 × 600 px। यदि आपके प्रिंटर को ब्लीड की आवश्यकता है, तो प्रत्येक तरफ 0.125 इंच जोड़ें, जिससे आपका दस्तावेज़ 1125 × 675 px हो जाएगा (प्रत्येक आयाम के लिए कुल 75 अतिरिक्त पिक्सेल)। A4 पोस्टर (प्रिंट, 300 PPI): 2480 × 3508 px. लेटर पोस्टर (प्रिंट, 300 PPI): 2550 × 3300 px. टी-शर्ट प्रिंट क्षेत्र (12 × 14 इंच @ 300 PPI): एक सामान्य आकार 3600 × 4200 px है। रेटिना वेब ग्राफिक (2x): अपने CSS में परिभाषित आयामों को दोगुना करें। 600 × 400 px के रूप में स्टाइल की गई छवि को 1200 × 800 px स्रोत PNG की आवश्यकता होती है। इन सभी पिक्सेल मानों को सीधे [SVG to PNG कनवर्टर](/convert/svg-to-png) पेज पर चौड़ाई फ़ील्ड में टाइप किया जा सकता है। गैर-वर्गाकार छवियों के लिए जहां आपको दोनों आयामों को परिभाषित करने की आवश्यकता है, बस कस्टम आयाम टॉगल का उपयोग करें। जबकि यह सूची एक बेहतरीन शुरुआती बिंदु है, सत्य का अंतिम स्रोत हमेशा विशिष्ट प्रिंट सेवा के दिशानिर्देश होते हैं। रेडबबल, प्रिंटफुल, गूटेन, और अन्य सभी अपने द्वारा बेचे जाने वाले प्रत्येक उत्पाद के लिए विस्तृत पिक्सेल और DPI आवश्यकताओं को प्रकाशित करते हैं। एक बड़े प्रिंट रन से पहले हमेशा उनके विनिर्देशों की जांच करें।