मुफ्त SVG से PNG कनवर्टर

SVG बनाम PNG

SVG (Scalable Vector Graphics) एक वेक्टर प्रारूप है, XML मार्कअप जो आकृतियों को गणितीय रूप से वर्णित करता है। SVG में एक वृत्त है "त्रिज्या R का एक वृत्त (x, y) पर भरण रंग F के साथ बनाएं", निर्देश, पिक्सेल नहीं। ब्राउज़र निर्देशों को जिस भी आकार में आप SVG प्रदर्शित करते हैं, रेंडर करता है, इसलिए यह 1x, 2x, 3x और उससे आगे भी तीव्र रहता है। PNG (Portable Network Graphics) एक रास्टर प्रारूप है, निश्चित रंग मानों पर पिक्सेल का एक निश्चित ग्रिड। PNG वही है जो आप तब प्राप्त करते हैं जब आप किसी SVG को विशिष्ट रिज़ॉल्यूशन पर "फ्रीज" करते हैं। SVG को PNG में परिवर्तित करना रास्टराइज़ेशन कहलाता है: एक लक्ष्य पिक्सेल ग्रिड चुनना और उस निश्चित आकार पर वेक्टर निर्देशों को रेंडर करना, जिसके बाद परिणाम एक सामान्य रास्टर छवि होती है, जिसमें वे सभी आकार संबंधी प्रतिबंध शामिल होते हैं।

SVG को 1998 में स्थापित W3C SVG वर्किंग ग्रुप द्वारा विकसित किया गया था; SVG 1.0 4 सितंबर 2001 को W3C अनुशंसा बन गया; SVG 1.1 14 जनवरी 2003 को आया और अगले दशक के लिए प्रमुख संस्करण था; SVG 1.1 दूसरा संस्करण 16 अगस्त 2011 को आया; SVG 2 4 अक्टूबर 2018 को Candidate Recommendation पर पहुंचा लेकिन रुक गया है, 2026 तक यह पूर्ण अनुशंसा के बजाय CR ही रहता है। PNG 1 अक्टूबर 1996 को W3C अनुशंसा बन गया और मार्च 1997 में IETF RFC 2083; प्रारूप तब से स्थिर है।

SVG को PNG में क्यों बदलें?

• ईमेल क्लाइंट SVG समर्थन छोड़ रहे हैं। Microsoft ने Outlook for the web और नए Outlook for Windows में सितंबर 2025 से शुरू करते हुए inline SVG समर्थन को सेवानिवृत्त करना शुरू कर दिया, रोलआउट अक्टूबर 2025 में पूरा हो गया, inline SVG अब रिक्त स्थान के रूप में रेंडर होते हैं। SVG अनुलग्नक अभी भी काम करते हैं, लेकिन इनलाइन-स्टाइल वाले ईमेल टेम्पलेट जो पहले SVG लोगो एम्बेड करते थे उन्हें PNG फॉलबैक की आवश्यकता है। Gmail का वेब इंटरफ़ेस SVG को ठीक से रेंडर करता है; Apple Mail भी; मुख्य ब्रेक Microsoft की तरफ है।
• सोशल मीडिया प्लेटफ़ॉर्म। Twitter/X, Instagram, Facebook, LinkedIn या तो SVG अपलोड को सीधे अस्वीकार करते हैं या प्रदर्शन से पहले उन्हें PNG/JPEG में संकुचित और पुन: एन्कोड करते हैं। प्लेटफ़ॉर्म के पसंदीदा आयामों (Open Graph के लिए 1200x630, Instagram के लिए 1080x1080) पर पूर्व-रास्टराइज़िंग उनके हानिकर ऑटो-रूपांतरण को बायपास करती है।
• ऐप आइकन जनरेशन। iOS ऐप आइकन PNG 1024x1024 होने चाहिए (App Store लिस्टिंग) साथ ही विभिन्न डिवाइस-विशिष्ट आकार; Android एडैप्टिव आइकन लांचर में 432x432 पर रेंडर होते हैं (xxxhdpi पर 108dp) Play Store लिस्टिंग के लिए 512x512 के साथ; PWA मैनिफेस्ट आइकन को आमतौर पर 192x192 और 512x512 की आवश्यकता होती है। इनमें से किसी द्वारा SVG स्वीकार नहीं किया जाता है।
• प्रिंट-ऑन-डिमांड और प्रीप्रेस। Printful, Redbubble, Society6, RedPrint और अधिकांश प्रिंट-ऑन-डिमांड सेवाओं को विशिष्ट रिज़ॉल्यूशन पर PNG (या PDF) की आवश्यकता होती है, आमतौर पर लक्ष्य भौतिक आकार के लिए 300 DPI। उनके अपलोड फ्लो में SVG स्वीकार नहीं किया जाता है।
• विरासत CMS और ऐप्स। पुराने WordPress इंस्टॉल, विरासत एडमिन टूल, दस्तावेज़ संपादक जो ब्राउज़र SVG समर्थन से पहले के हैं, जहां भी "PNG होना चाहिए" एक कठिन आवश्यकता है।
• Discord इमोजी और इसी तरह के। Discord के कस्टम इमोजी अपलोड के लिए PNG (या एनिमेटेड इमोजी के लिए एनिमेटेड GIF) की आवश्यकता होती है; अनुशंसित आकार 128x128 256 KB फ़ाइल आकार कैप के साथ। SVG स्वीकार नहीं किया जाता है।

ब्राउज़र में रूपांतरण कैसे काम करता है

Canvas API रास्टराइज़ेशन तकनीक सीधी है लेकिन इसमें सूक्ष्म पकड़ें हैं। मानक पाइपलाइन: SVG को Blob URL (URL.createObjectURL(svgBlob)) के माध्यम से या सीधे data URI (data:image/svg+xml;base64,...) के रूप में Image तत्व के रूप में लोड करें; onload इवेंट की प्रतीक्षा करें; वांछित आउटपुट आयामों पर एक कैनवास बनाएं; चुने गए आकार पर SVG को रास्टराइज़ करने के लिए ctx.drawImage(image, 0, 0, width, height) कॉल करें; canvas.toBlob('image/png') के माध्यम से निर्यात करें। ब्राउज़र SVG रेंडरर इस रास्टराइज़ेशन के दौरान ग्रेडिएंट, मास्क, फ़िल्टर, टेक्स्ट और SVG फ़ीचर सेट के अधिकांश को सही ढंग से संभालते हैं। तीन चेतावनियाँ मायने रखती हैं। बाहरी संसाधन CORS के तहत विफल होते हैं: बाहरी छवियों (<image href="https://other-domain.com/photo.jpg">) या बाहरी फ़ॉन्ट का संदर्भ देने वाले SVG लोड नहीं हो सकते हैं यदि क्रॉस-ओरिजिन सर्वर उपयुक्त CORS हेडर वापस नहीं करता है, कैनवास "tainted" हो जाता है और toBlob एक SecurityError फेंकता है। इसे टालने के लिए छवियों को data URI के रूप में और फ़ॉन्ट को @font-face के रूप में data URI src के साथ एम्बेड करें। SVG जिनमें <script> टैग होते हैं वे निष्पादित नहीं होते हैं जब Image के रूप में लोड किए जाते हैं, ब्राउज़र का छवि डिकोडर सुरक्षा के लिए स्क्रिप्टिंग संदर्भ को हटा देता है। SMIL एनिमेशन समतल हो जाते हैं time=0 पर एक एकल फ्रेम में; यदि SVG अपने दृश्य स्थिति के लिए एनिमेशन पर निर्भर करता है, तो रास्टराइज़्ड PNG इसे कैप्चर नहीं करेगा। क्रॉस-ब्राउज़र पिक्सेल अंतर: Chrome, Firefox और Safari अपने संबंधित वेक्टर रेंडरर में अंतर के कारण एक ही SVG के लिए सूक्ष्म रूप से अलग रास्टराइज़्ड आउटपुट उत्पन्न करते हैं; उत्पादन आइकन के लिए, रनटाइम पर प्रति-ब्राउज़र रूपांतरण पर निर्भर रहने के बजाय एक बार रेंडर करें और PNG शिप करें।

सही आउटपुट रिज़ॉल्यूशन चुनना

SVG में कोई अंतर्निहित रिज़ॉल्यूशन नहीं है, चुनाव आपका है। सामान्य लक्ष्य: iOS App Store लिस्टिंग आइकन 1024x1024; Android Play Store लिस्टिंग आइकन 512x512 (इन-लांचर एडैप्टिव आइकन 432x432 पर, 264x264 सुरक्षित क्षेत्र के भीतर डिज़ाइन किया गया); PWA मैनिफेस्ट आइकन 192x192 और 512x512; favicon ऐतिहासिक रूप से 16x16, 32x32, 48x48 (आधुनिक favicon.ico सभी तीन आकारों को बंडल करता है; आधुनिक सर्वोत्तम अभ्यास उन ब्राउज़रों के लिए icon.svg शिप करता है जो इसका समर्थन करते हैं और 192x192 apple-touch-icon.png फॉलबैक); Open Graph सोशल कार्ड 1200x630; Twitter कार्ड 1200x675; Instagram वर्ग 1080x1080; Discord इमोजी 128x128; Slack इमोजी 128x128; 300 DPI पर प्रिंट को पिक्सेल में इंच आयाम का 3 गुना चाहिए (4 इंच के लोगो प्रिंट के लिए 1200x1200 चाहिए)। रेटिना-गुणवत्ता वाली स्क्रीन रेंडरिंग के लिए, प्रदर्शित आकार का 2 गुना लक्ष्य करें, 100x100 प्रदर्शित आइकन को रेटिना स्क्रीन पर तीव्र रहने के लिए 200x200 पर निर्यात किया जाना चाहिए।

इस कनवर्टर का उपयोग कैसे करें

1. SVG प्रदान करें। अपलोड ज़ोन पर .svg फ़ाइल छोड़ें, या टेक्स्ट क्षेत्र में कच्चा SVG मार्कअप पेस्ट करें। दोनों रास्ते समान तरीके से काम करते हैं।
2. आउटपुट आयाम सेट करें। पिक्सेल में चौड़ाई और ऊंचाई; लॉक-आस्पेक्ट-रेशियो टॉगल अनुपात बनाए रखता है जब आप एक आयाम बदलते हैं। अधिकतम 8192x8192 (अधिकांश आधुनिक ब्राउज़रों पर कैनवास-आकार सीमा; कुछ हार्डवेयर 4096 या 8192 पर सीमित होते हैं)।
3. एक पृष्ठभूमि चुनें। पारदर्शी (डिफ़ॉल्ट, SVG के अल्फा चैनल को संरक्षित करता है), ठोस सफेद, ठोस काला, या कोई भी कस्टम रंग। उपयोगी जब गंतव्य पारदर्शिता का समर्थन नहीं करता है (कुछ विरासत प्रिंट संदर्भ)।
4. कनवर्ट करें और डाउनलोड करें। कनवर्ट बटन SVG को चुने गए आकार पर रास्टराइज़ करता है और पूर्वावलोकन दिखाता है; डाउनलोड PNG को आपके डिवाइस पर सहेजता है।

ईमानदार दायरा: यह उपकरण क्या करता है और क्या नहीं

यह उपकरण एक एकल SVG को चुने गए आकार पर एक एकल PNG में रास्टराइज़ करता है। यह ऐप स्टोर के लिए आवश्यक पूर्ण मल्टी-साइज आइकन सेट उत्पन्न नहीं करता है (केवल iOS के लिए 1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20), उसके लिए RealFaviconGenerator या App Icon Generator जैसे समर्पित उपकरण का उपयोग करें। यह परिणामी PNG को अनुकूलित नहीं करता (पहले स्रोत SVG को साफ करने के लिए SVG Optimizer टूल का उपयोग करें; PNG अनुकूलन के लिए एक अलग कंप्रेसर का उपयोग करें)। यह मल्टी-साइज favicon.ico आउटपुट को बंडल नहीं करता। यह एनिमेट नहीं करता, निर्यात किए गए PNG एकल-फ्रेम हैं, भले ही SVG में SMIL एनिमेशन हो। एक SVG से कई आकारों की बैच जनरेशन के लिए, sharp-cli (Node.js) या resvg-cli (Rust) जैसे CLI का उपयोग करें; उनके द्वारा की जाने वाली प्रति-आकार रूपांतरण इस उपकरण के समान है, बस स्क्रिप्टेबल है।

गोपनीयता: क्यों केवल-ब्राउज़र यहां मायने रखता है

SVG फ़ाइलों में अक्सर मालिकाना ब्रांड संपत्तियाँ, प्रगति पर लोगो, आंतरिक उत्पाद आइकन या NDA के तहत डिज़ाइनर द्वारा प्रदान की गई स्रोत फ़ाइलें होती हैं। सर्वर-साइड रूपांतरण सेवाएँ (CloudConvert, Online-Convert, Convertio) आपके SVG को उनके बुनियादी ढांचे में अपलोड करती हैं जहां यह लॉग में बैठता है। यह उपकरण Canvas API के माध्यम से आपके ब्राउज़र में संपूर्ण रास्टराइज़ेशन पाइपलाइन चलाता है, Convert पर क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पेज को ऑफ़लाइन (हवाई जहाज मोड) ले जाएं और कनवर्टर अभी भी काम करता है। अप्रकाशित ब्रांड कार्य, आंतरिक उत्पाद आइकन, NDA-बाध्य डिज़ाइनर फ़ाइलें या कोई भी SVG जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं करना चाहेंगे के लिए सुरक्षित।

अक्सर पूछे जाने वाले प्रश्न

SVG को सीधे उपयोग करने के बजाय PNG में क्यों बदलें?

अधिकांश आधुनिक ब्राउज़रों के लिए, आपको ऐसा करने की आवश्यकता नहीं है। SVG Chrome, Firefox, Safari, Edge और Opera में नेटिव रूप से रेंडर होता है, और अधिकांश वेब उपयोग के लिए सही प्रारूप है। रूपांतरण की आवश्यकता तब होती है जब गंतव्य SVG का समर्थन नहीं करता: Microsoft ने सितंबर-अक्टूबर 2025 में Outlook web और नए Outlook for Windows में inline SVG को सेवानिवृत्त किया; iOS / Android ऐप आइकन PNG होने चाहिए; प्रिंट-ऑन-डिमांड सेवाओं को PNG की आवश्यकता है; Discord और Slack कस्टम इमोजी अपलोड PNG; कुछ विरासत CMS अभी भी SVG अपलोड को अस्वीकार करते हैं। उन संदर्भों के लिए, आप एक बार रास्टराइज़ करते हैं और PNG शिप करते हैं।

मुझे किस रिज़ॉल्यूशन पर निर्यात करना चाहिए?

गंतव्य से मेल खाएं। iOS ऐप स्टोर लिस्टिंग: 1024x1024। Android Play Store: 512x512 (इन-लांचर एडैप्टिव आइकन: 432x432)। PWA मैनिफेस्ट: 192 और 512। Open Graph सोशल कार्ड: 1200x630। Instagram वर्ग: 1080x1080। Retina डिस्प्ले के लिए, प्रदर्शित CSS आकार के 2x पर निर्यात करें, 100x100 आइकन तीव्र रहने के लिए 200x200 PNG होना चाहिए। प्रिंट के लिए, 300 DPI का अर्थ है प्रति प्रदर्शित इंच 300 पिक्सेल (4 इंच लोगो प्रिंट = 1200x1200 PNG)। यहां अधिकतम 8192x8192 है, जो आधुनिक ब्राउज़र कैनवास सीमा है।

रूपांतरण के बाद मेरे SVG के कुछ भाग गायब क्यों हैं?

तीन सामान्य कारण। CORS द्वारा अवरुद्ध बाहरी संसाधन: यदि SVG किसी अन्य डोमेन पर छवियों या फ़ॉन्ट का संदर्भ देता है जो उपयुक्त CORS हेडर वापस नहीं करता है, कैनवास "tainted" हो जाता है और निर्यात उन्हें चुपचाप गिरा देता है। छवियों को data URI के रूप में और फ़ॉन्ट को @font-face के रूप में data URI src के साथ एम्बेड करें। SVG के अंदर स्क्रिप्ट निष्पादित नहीं होती: <script> टैग ब्राउज़र के छवि-डिकोडर सुरक्षा मॉडल द्वारा हटाए जाते हैं, स्क्रिप्ट जो भी उत्पन्न करती है वह दिखाई नहीं देगी। SMIL एनिमेशन time=0 (प्रारंभ फ्रेम) पर रेंडर होते हैं; एनिमेटेड दृश्य स्थिति कैप्चर नहीं होती है। JavaScript या एनिमेशन पर निर्भर SVG के लिए, पहले एक वास्तविक ब्राउज़र में रेंडर करें फिर स्क्रीनशॉट लें, या Puppeteer हेडलेस का उपयोग करें।

क्या यह पारदर्शिता संरक्षित करता है?

हाँ जब पृष्ठभूमि के रूप में "पारदर्शी" चुना जाता है, PNG SVG के अल्फा चैनल को बरकरार रखता है, अर्ध-पारदर्शी पिक्सेल पूरी तरह से संरक्षित होते हैं। एक ठोस रंग (सफेद, काला, कस्टम) चुनें जब गंतव्य पारदर्शिता का समर्थन नहीं करता है या जब आपको एक विशिष्ट पृष्ठभूमि रंग बेक्ड चाहिए (कुछ विरासत प्रिंट संदर्भ)।

क्या मैं एक SVG से कई आकार उत्पन्न कर सकता हूँ?

एक क्लिक में नहीं, यह उपकरण प्रति रूपांतरण एक एकल PNG उत्पन्न करता है। ऐप-स्टोर आइकन-सेट जनरेशन (iOS और Android द्वारा आवश्यक एक दर्जन या इतने आकार) के लिए, RealFaviconGenerator (वेब), App Icon Generator (वेब), या sharp-cli (Node.js) या resvg-cli (Rust) जैसे CLI जैसे समर्पित उपकरण का उपयोग करें, वे जो प्रति-आकार रूपांतरण करते हैं वह वही Canvas-शैली रास्टराइज़ेशन है, बस कई आकारों में स्क्रिप्टेड।

क्या मेरी SVG फ़ाइलें अपलोड की जाती हैं?

नहीं। रास्टराइज़ेशन पूरी तरह से Canvas API के माध्यम से आपके ब्राउज़र में चलता है। आपका SVG और परिणामी PNG कभी नेटवर्क पार नहीं करते, Convert पर क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पेज को ऑफ़लाइन (हवाई जहाज मोड) ले जाएं और कनवर्टर अभी भी काम करता है। अप्रकाशित ब्रांड कार्य, आंतरिक उत्पाद आइकन, NDA-बाध्य डिज़ाइनर स्रोत फ़ाइलें या कोई भी SVG जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं करना चाहेंगे के लिए सुरक्षित।

संबंधित टूल्स