रेफरेंस · 8 मिनट का पढ़ना
PNG vs SVG: क्या फ़र्क है, और कौन सा इस्तेमाल करें?
PNG पिक्सल का ग्रिड है; SVG आकारों की सूची। बस यही एक फ़र्क तय करता है कि हर एक कितना तेज़, कितना छोटा और कितना एडिट होने लायक है। यहां देखें कि SVG क्या है, PNG वेक्टर क्यों नहीं है, और कब कौन सा चुनें।
01 · छोटा जवाब
पिक्सल बनाम आकार
जो आर्टवर्क बड़ा-छोटा होना है, उसके लिए SVG। जो असल में तस्वीर है, उसके लिए PNG।
PNG (Portable Network Graphics) इमेज को रंगीन पिक्सल के तय ग्रिड के रूप में रखती है, बिना क्वालिटी खोए कंप्रेस करके, और चाहें तो ट्रांसपेरेंसी चैनल के साथ। यह रास्टर फॉर्मेट है। इसे बड़ा करें तो पिक्सल बस बड़े हो जाते हैं, जो आपको धुंधलापन या सीढ़ीनुमा किनारों के रूप में दिखता है। SVG (Scalable Vector Graphics) इमेज को आकारों के वर्णन के रूप में रखता है — “यहां एक गोला, यह कर्व उस ग्रेडिएंट से भरा, यह टेक्स्ट” — इसलिए जिस साइज़ की ज़रूरत हो, रेंडरर उसे उसी वक्त नए सिरे से बनाता है। यह वेक्टर फॉर्मेट है और कभी धुंधला नहीं पड़ता।
इसीलिए लोगो SVG में बेहतर है और फोटो PNG, JPG या WebP में: लोगो सचमुच कुछ आकार हैं, फोटो सचमुच लाखों थोड़े-थोड़े अलग बिंदु।
| PNG | SVG | |
|---|---|---|
| किस्म | रास्टर (पिक्सल) | वेक्टर (आकार), XML टेक्स्ट के रूप में |
| बड़ा करने पर | धुंधला या पिक्सलेटेड | हर साइज़ पर तेज़ |
| फाइल साइज़ | पिक्सल की गिनती के साथ बढ़ता है | जटिलता के साथ बढ़ता है; लोगो और आइकन के लिए बहुत छोटा |
| फोटो और टेक्सचर | अच्छा (फोटो के लिए बड़ी फाइल) | कमज़ोर: अंदर बिटमैप चाहिए या पोस्टर बन जाता है |
| ट्रांसपेरेंसी | हां, पूरी अल्फा | हां, मूल रूप से |
| एडिटिंग | फोटो एडिटर में पिक्सल-दर-पिक्सल | वेक्टर एडिटर या टेक्स्ट एडिटर में पॉइंट हिलाएं और फिल बदलें |
| स्टाइलिंग और एनिमेशन | नहीं | वेब पेज में इनलाइन हो तो CSS, स्क्रिप्टिंग, एनिमेशन |
| सपोर्ट | हर जगह | सभी मौजूदा ब्राउज़र और डिज़ाइन टूल; ईमेल और कुछ अपलोड फॉर्म में अधूरा |
02 · SVG क्या है?
ऐसी इमेज जिसे आप टेक्स्ट एडिटर में खोल सकते हैं
SVG के “S” और “V” में ही पूरा विचार है।
SVG फाइल W3C स्टैंडर्ड फॉर्मेट का छोटा-सा टेक्स्ट डॉक्यूमेंट है। इसे Notepad में खोलें तो कुछ ऐसा दिखेगा, जो अपने-आप में पूरी, वैध इमेज है:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>टेक्स्ट होने की वजह से SVG को हाथ से एडिट किया जा सकता है, उसमें खोज हो सकती है, वेब सर्वर उसे अच्छे से कंप्रेस करता है, स्क्रिप्ट से बन सकता है और वर्ज़न कंट्रोल में रखा जा सकता है। आकारों का वर्णन होने की वजह से उसमें असली ग्रेडिएंट, आंशिक ट्रांसपेरेंसी, क्लिपिंग, टेक्स्ट और — वेब पेज में इनलाइन रखने पर — CSS स्टाइलिंग व एनिमेशन चलते हैं। 1000 पिक्सल पर 40 KB की PNG जैसा लोगो SVG में अक्सर बस कुछ किलोबाइट का होता है।
दो व्यावहारिक बातें। पहली, SVG में स्क्रिप्ट हो सकती है, इसलिए फाइलें भरोसेमंद स्रोत से ही खोलें, जैसे किसी भी डॉक्यूमेंट के साथ करते हैं; <img> टैग से लोड की गई SVG में ब्राउज़र स्क्रिप्ट नहीं चलाते। दूसरी, SVG में बिटमैप जड़ा जा सकता है; ऐसी फाइल असल में वेक्टर नहीं होती और उसकी तेज़ी में कोई इज़ाफ़ा नहीं होता। AnyToSVG की बनाई SVG फाइलों में सिर्फ पाथ और ग्रेडिएंट होते हैं, हर रंग का एक पाथ, कोई जड़ा हुआ बिटमैप कभी नहीं।
03 · क्या PNG वेक्टर है?
नहीं — और “PNG to vector” का मतलब ट्रेसिंग है
गोले की तस्वीर गोला नहीं होती।
PNG वेक्टर फॉर्मेट नहीं है, चाहे 100 % पर वह कितनी भी तेज़ दिखे। PNG लोगो में दस लाख रंगीन पिक्सल होते हैं और इस बात की कोई जानकारी नहीं कि उनमें से कौन-से मिलकर गोला, अक्षर या कर्व बनाते हैं। किसी फोटो एडिटर में ऐसी सेटिंग नहीं जो उसे आकारों में बदल दे: logo.png का नाम बदलकर logo.svg करने से खराब फाइल मिलती है।
लोग जिसे “PNG to vector” या “PNG to SVG” कहकर खोजते हैं, वह ट्रेसिंग है: सॉफ्टवेयर पिक्सल देखता है, रंगों के इलाकों के बीच की सीमाएं ढूंढता है और उन्हें कर्व के रूप में दोबारा बनाता है। सादे आर्टवर्क — लोगो, आइकन, क्लिपआर्ट, लाइन ड्रॉइंग, सिग्नेचर — पर यह लगभग परफेक्ट चलता है, क्योंकि आकार वहां ढूंढे जाने के लिए मौजूद थे। फोटो पर यह स्टाइलाइज़्ड पोस्टर देता है, क्योंकि वहां साफ आकार नहीं, धीरे-धीरे बदलते टोन हैं। ट्रेसिंग क्या कर सकती है और क्या नहीं, यह कदम-दर-कदम रास्टर बनाम वेक्टर गाइड में है, और बाकी बिटमैप फॉर्मेट के लिए image to vector पेज है।
04 · SVG चुनें जब…
आर्टवर्क को बड़ा-छोटा या एडिट करना हो
- लोगो और ब्रांड मार्क जो फेविकॉन साइज़ पर, वेबसाइट हेडर में और बैनर पर, तीनों जगह दिखते हैं।
- आइकन और UI ग्राफिक वेब के लिए: हर स्क्रीन डेंसिटी के लिए एक ही फाइल, CSS से रीकलर होने लायक।
- इलस्ट्रेशन, डायग्राम, चार्ट और नक्शे जो सादे आकारों और रेखाओं से बने हों।
- Cricut, Silhouette, विनाइल और लेज़र मशीनों की कट फाइलें, जिन्हें बिंदु नहीं, आउटलाइन चाहिए।
- प्रिंट आर्टवर्क जो बड़ा किया जाएगा — विज़िटिंग कार्ड से फ्लेक्स बैनर तक — और जिसे डिज़ाइनर बाद में एडिट करेगा।
05 · PNG चुनें जब…
इमेज असल में तस्वीर हो
- स्क्रीनशॉट और ऐसा कुछ भी जिसमें टेक्स्ट ठीक वैसा दिखना चाहिए जैसा रेंडर हुआ।
- फोटो और टेक्सचर या पेंटिंग जैसा आर्ट — ट्रांसपेरेंसी या लॉसलेस क्वालिटी चाहिए तो PNG, साइज़ ज़्यादा मायने रखे तो JPG या WebP।
- सोशल प्रीव्यू, ईमेल सिग्नेचर और ऐप-स्टोर आइकन, जहां अपलोड फॉर्म और मेल क्लाइंट अक्सर SVG ठुकरा देते हैं।
- हज़ारों छोटे आकारों वाला जटिल आर्टवर्क, जहां SVG बिटमैप से बड़ा निकलेगा।
- पिक्सल आर्ट, जहां चौकोर पिक्सल ही डिज़ाइन हैं।
ज़्यादातर प्रोजेक्ट में दोनों इस्तेमाल होते हैं: SVG मास्टर फाइल के रूप में, और जिन गिनी-चुनी जगहों को बिटमैप चाहिए, वहां के लिए PNG एक्सपोर्ट।
06 · कन्वर्ट करना
PNG से SVG, और वापस
एक दिशा ट्रेसिंग है; दूसरी बस ड्रॉइंग।
PNG to SVG: ट्रेस करें
PNG को PNG to SVG कन्वर्टर में डालें (या सीधे कन्वर्टर में)। यह आपके ब्राउज़र में चलता है, कलर या ब्लैक-एंड-व्हाइट मोड चुनता है, रंग गिनता है, स्मूद ग्रेडिएंट पहचानता है और लगभग एक सेकंड में ओरिजिनल के बगल में SVG दिखा देता है। लोगो ठोस रंग पर है तो ट्रांसपेरेंट बैकग्राउंड टिक करें, रंग स्लाइडर तब तक घटाएं जब तक स्वैच डिज़ाइन से मिलें, और डाउनलोड करें। खास तौर पर लोगो के लिए logo to SVG देखें; JPG के लिए JPG to SVG।
SVG to PNG: रेंडर करें
इस दिशा में ट्रेसिंग नहीं चाहिए, बस साइज़ तय करना होता है, क्योंकि वेक्टर में तब तक पिक्सल नहीं होते जब तक आप उसे बनाएं नहीं। SVG को ब्राउज़र, Inkscape, Figma या Illustrator में खोलें और जितनी चौड़ाई चाहिए उस पर PNG एक्सपोर्ट करें (हाई-डेंसिटी स्क्रीन के लिए 2× या 3× पर)। AnyToSVG कन्वर्टर के PNG बटन उस SVG के लिए ठीक यही करते हैं जो उसने अभी ट्रेस किया है, 1×, 2× या 4× पर; वे आम SVG-to-PNG टूल नहीं हैं।
क्वालिटी का क्या?
PNG to SVG उतना ही अच्छा होता है जितने अच्छे PNG में आकार हैं। 500 पिक्सल या उससे बड़ा सादा लोगो लगभग परफेक्ट बदलता है; छोटा, धुंधला या फोटो से लिया हुआ लोगो छोटे, धुंधले या तिरछे वेक्टर में बदलता है। SVG to PNG में सिर्फ वह रेज़ोल्यूशन जाता है जो आपने खुद चुना।
07 · सवाल
PNG vs SVG — अक्सर पूछे जाने वाले सवाल
“SVG क्या है”, “क्या PNG वेक्टर है” और “PNG or SVG” के पीछे के सवाल। और भी पूरी FAQ में।
SVG फाइल क्या है? (what is SVG file)
SVG (Scalable Vector Graphics) ऐसा इमेज फॉर्मेट है जो तस्वीर को आकारों — रेखाओं, कर्व, फिल और टेक्स्ट — के रूप में सादे XML टेक्स्ट में लिखता है। यह पिक्सल नहीं, आकार रखता है, इसलिए किसी भी साइज़ तक बिना धुंधला हुए बड़ा हो जाता है, और हर आधुनिक ब्राउज़र इसे दिखा सकता है।
क्या PNG वेक्टर फॉर्मेट है? (is PNG a vector)
नहीं। PNG रास्टर फॉर्मेट है: यह तय साइज़ पर रंगीन पिक्सल का ग्रिड रखता है। PNG में वेक्टर आकार की तस्वीर हो सकती है, पर फाइल के भीतर खुद कोई आकार नहीं होता। वेक्टर पाने के लिए PNG को ट्रेस करना पड़ता है, और PNG से SVG बनाने का मतलब यही है।
क्या SVG, PNG से बेहतर है?
लोगो, आइकन, डायग्राम और दूसरे सादे आर्टवर्क के लिए हां: यह हर साइज़ पर तेज़ रहता है और आम तौर पर छोटा होता है। फोटो, स्क्रीनशॉट और टेक्सचर वाले आर्टवर्क के लिए नहीं: वहां PNG (या JPG/WebP) सही चुनाव है। आम तौर पर कोई भी बेहतर नहीं है; दोनों अलग तरह की इमेज के लिए हैं।
क्या SVG फाइल PNG से छोटी होती है?
सरल आर्टवर्क के लिए आम तौर पर बहुत छोटी, क्योंकि कुछ पाथ दस लाख पिक्सल से बहुत कम जगह लेते हैं। बहुत से आकारों, ग्रेडिएंट या टेक्सचर वाली जटिल इमेज में SVG उसी PNG से बड़ा भी हो सकता है।
क्या हर जगह PNG की जगह SVG इस्तेमाल कर सकते हैं?
पूरी तरह नहीं। ब्राउज़र, डिज़ाइन टूल, कटिंग मशीन और ज़्यादातर वेबसाइट SVG लेती हैं। पर कई ईमेल क्लाइंट, सोशल मीडिया अपलोड फॉर्म, ऐप-स्टोर आइकन फील्ड और Open Graph प्रीव्यू इमेज को अब भी PNG या JPG चाहिए, इसलिए उनके लिए बिटमैप एक्सपोर्ट रखें।
क्या SVG में ट्रांसपेरेंसी चलती है?
हां। SVG का बैकग्राउंड तब तक ट्रांसपेरेंट रहता है जब तक आप उसे बनाएं नहीं, और अलग-अलग फिल आंशिक रूप से पारदर्शी भी हो सकते हैं। PNG भी पूरी अल्फा ट्रांसपेरेंसी देती है, इसीलिए लोगो के लिए दोनों आम हैं।
PNG को बिना क्वालिटी खोए SVG में कैसे बदलें? (PNG to SVG)
ट्रेसिंग पिक्सल से आकार दोबारा बनाती है, इसलिए लोगो या आइकन जैसी सादे रंगों वाली PNG लगभग हूबहू बदलती है। फोटो स्टाइलाइज़्ड पोस्टर बन जाती हैं। PNG को PNG to SVG कन्वर्टर में डालें, तुलना व्यू देखें और SVG डाउनलोड करें।
SVG को PNG में कैसे बदलें?
SVG को ब्राउज़र, Inkscape, Figma या Illustrator में खोलें और जिस साइज़ की ज़रूरत है उस पर एक्सपोर्ट करें या स्क्रीनशॉट लें। AnyToSVG कन्वर्टर के PNG बटन उस SVG को, जो उसने अभी ट्रेस किया है, 1×, 2× या 4× पर बना देते हैं; यह आम SVG-to-PNG टूल नहीं है।
आगे पढ़ें
वेक्टर के बारे में और
पढ़ते-पढ़ते आज़माएं
कन्वर्टर फ्री है, अकाउंट नहीं चाहिए, और लगभग एक सेकंड में SVG आपकी ओरिजिनल इमेज के बगल में दिख जाता है।