वेक्टर vs रास्टर इमेज: SVG की असल में ज़रूरत कब है?

वेक्टर और रास्टर इमेज का फ़र्क असल में इस बात का है कि तस्वीर सेव कैसे होती है। रास्टर इमेज (PNG, JPG, WebP) रंगीन पिक्सेल की एक तय ग्रिड होती है, जबकि वेक्टर इमेज (SVG) ड्रॉइंग के निर्देशों का एक सेट होती है: कोऑर्डिनेट से बताई गई आकृतियाँ, लाइनें, कर्व और फ़िल। यही एक फ़र्क तय करता है कि कौन किस काम में अच्छा है। वेक्टर किसी भी साइज़ पर शार्प रहते हैं और लोगो, आइकन और डायग्राम के लिए सही हैं। रास्टर किसी फ़ोटो की अनगिनत बारीकियों को पकड़ लेते हैं। यह गाइड बताती है कि SVG कब इस्तेमाल करें, कब यह गलत चुनाव है, और दोनों के बीच कन्वर्ट करने पर असल में क्या होता है।

रास्टर इमेज असल में क्या है#

रास्टर इमेज पिक्सेल का एक आयत है, जिसमें हर पिक्सेल का अपना रंग होता है। 1200 × 800 की एक फ़ोटो में ठीक 9,60,000 रंगीन छोटे चौकोर होते हैं, न एक कम, न एक ज़्यादा। PNG, JPG, WebP, GIF और HEIC सभी रास्टर फ़ॉर्मैट हैं; इनका फ़र्क इस बात में है कि ये पिक्सेल को कैसे कंप्रेस करते हैं, बुनियादी तरीके में नहीं। (अगर आप दो सबसे आम फ़ॉर्मैट में से चुन रहे हैं, तो हमारी PNG vs JPG गाइड देखें।)

चूँकि पिक्सेल की गिनती तय होती है, इसलिए रास्टर इमेज का एक नैचुरल साइज़ होता है। छोटा करने पर फ़ालतू पिक्सेल हटा दिए जाते हैं। बड़ा करने पर सॉफ़्टवेयर को बीच के नए पिक्सेल खुद से गढ़ने पड़ते हैं, इसीलिए किसी छोटे लोगो को बड़े बैनर पर खींच देने से वह धुंधला या चौकोर-चौकोर दिखने लगता है। इसका फ़ायदा यह है कि पिक्सेल ग्रिड वह सब रिकॉर्ड कर सकती है जो कैमरा देखता है: त्वचा, पत्ते, धुंध, परछाइयाँ और बीच का हर ग्रेडिएंट।

वेक्टर इमेज असल में क्या है#

वेक्टर इमेज पिक्सेल सेव ही नहीं करती। वह एक विवरण सेव करती है, कुछ इस तरह: "यहाँ इतने रेडियस का एक गोला बनाओ, उसमें बैंगनी रंग भरो, फिर इन पॉइंट से होकर एक कर्व खींचो।" SVG (Scalable Vector Graphics) वेब का वेक्टर फ़ॉर्मैट है। इसकी परिभाषा W3C SVG स्पेसिफ़िकेशन में दी गई है, और MDN के SVG डॉक्युमेंटेशन के मुताबिक सभी मॉडर्न ब्राउज़र इसे सपोर्ट करते हैं। अंदर से SVG फ़ाइल सादा टेक्स्ट (XML) होती है, जिसे आप किसी टेक्स्ट एडिटर में खोल सकते हैं।

पिक्सेल सिर्फ़ उसी पल बनते हैं जब इमेज दिखाई जाती है, जब ब्राउज़र या ऐप इन निर्देशों को उस साइज़ पर ड्रॉ करता है जिसकी उसे ज़रूरत है। इसीलिए वेक्टर बिना शार्पनेस खोए बड़े-छोटे किए जा सकते हैं: एक गोले और कुछ कर्व से बना लोगो फ़ोन, 4K मॉनिटर या प्रिंट किए गए पोस्टर पर हर बार बिल्कुल साफ़ दोबारा ड्रॉ होता है। और इसीलिए सिंपल वेक्टर ग्राफ़िक्स अक्सर बहुत छोटी फ़ाइलें होती हैं, क्योंकि कुछ आकृतियों को बताने में बस कुछ लाइनों का टेक्स्ट लगता है। फ़ॉर्मैट के बारे में और विस्तार से जानने के लिए हमारा लेख SVG फ़ाइल क्या है पढ़ें।

वेक्टर vs रास्टर: सीधी तुलना#

SVG की असल में ज़रूरत कब है#

जब इमेज असली दुनिया से कैप्चर न की गई हो बल्कि आकृतियों से बनी हो, और उसे एक से ज़्यादा साइज़ पर ठीक दिखना हो, तब वेक्टर फ़ॉर्मैट चुनें:

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

रास्टर कब सही चुनाव है#

जब भी इमेज कोई फ़ोटो हो या उसमें फ़ोटो जैसी डिटेल हो, रास्टर फ़ॉर्मैट इस्तेमाल करें:

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

सीधा नियम: अगर इमेज ड्रॉ की गई है, तो वेक्टर के बारे में सोचें। अगर फ़ोटो खींची गई है, तो रास्टर ही रहने दें।

वेक्टर और रास्टर के बीच कन्वर्ट करना#

दोनों दिशाएँ एक-दूसरे का उल्टा नहीं हैं, और ज़्यादातर उलझन यहीं से आती है।

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

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

फ़ोटो पर ट्रेसिंग का नतीजा खराब आता है। जब हमने 14.1 KB की एक फ़ोटो अपने JPG से SVG कन्वर्टर में डाली, तो 607 पाथ से बनी 151.5 KB की SVG निकली: दस गुना से भी बड़ी, और असली फ़ोटो के बगल में साफ़ तौर पर धब्बेदार। अब यह टूल पहले आपकी इमेज के रंग गिनता है और अगर कोई फ़ोटो इसी नतीजे की ओर जा रही हो तो आपको पहले ही चेतावनी देता है। साइज़ इतना क्यों बढ़ जाता है, यह जानना हो तो हमारा लेख ट्रेस की गई SVG, PNG से बड़ी क्यों होती है पढ़ें।

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

वेक्टर और रास्टर इमेज में मुख्य फ़र्क क्या है? रास्टर इमेज रंगीन पिक्सेल की एक तय ग्रिड सेव करती है, जबकि वेक्टर इमेज आकृतियों और लाइनों को गणितीय निर्देशों के रूप में सेव करती है जो दिखाते समय ड्रॉ होते हैं। इसीलिए वेक्टर किसी भी साइज़ पर शार्प रहते हैं और रास्टर अपने असली रेज़ोल्यूशन से ज़्यादा बड़ा करने पर धुंधले हो जाते हैं।

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

क्या मैं किसी फ़ोटो को SVG में बदल सकता हूँ? आप किसी फ़ोटो को ट्रेस करके SVG बना सकते हैं, लेकिन नतीजा आमतौर पर असली फ़ाइल से कहीं बड़ा और धब्बेदार होता है, क्योंकि फ़ोटो के मुलायम रंग-बदलाव सैकड़ों सपाट आकृतियों में बदल जाते हैं। फ़ोटो को JPG, PNG या WebP में ही रखें।

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

क्या SVG को PNG में बदलने से क्वालिटी घटती है? SVG को PNG में बदलने से एक्सपोर्ट किए गए साइज़ पर क्वालिटी नहीं घटती, क्योंकि वेक्टर ठीक उसी पिक्सेल साइज़ पर नए सिरे से ड्रॉ होता है। हाँ, बाद में PNG को SVG की तरह बड़ा नहीं किया जा सकता, इसलिए उसे सबसे बड़े साइज़ पर एक्सपोर्ट करें जिसकी आपको ज़रूरत पड़ेगी।

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

संक्षेप में#

• रास्टर (PNG, JPG, WebP) पिक्सेल की एक तय ग्रिड है: फ़ोटो, स्क्रीनशॉट और स्कैन के लिए सही।
• वेक्टर (SVG) ड्रॉइंग के निर्देशों का सेट है: लोगो, आइकन, डायग्राम और कटिंग फ़ाइलों के लिए सही।
• SVG से PNG से SVG को किसी भी साइज़ के पिक्सेल में बदलें। सिंपल ग्राफ़िक्स को PNG से SVG या JPG से SVG से वेक्टर में ट्रेस करें, और फ़ोटो को फ़ोटो ही रहने दें।
• और तुलनाएँ हमारी फ़ाइल फ़ॉर्मैट गाइड्स में हैं, और सभी इमेज टूल इमेज टूल्स हब में मिलेंगे।