लेखक: Claire Yoon9 मिनट का पठन

SVG फ़ाइल क्या होती है? (और इसे कैसे खोलें, इस्तेमाल करें, और बनाएं)

SVG पिक्सेल के बजाय कोड से बनी इमेज होती है, इसलिए यह किसी भी आकार में शार्प रहती है। सरल भाषा में इसका मतलब क्या है, SVG किस काम आती है, और इसे कैसे बनाते हैं।

इस पेज पर

SVG (Scalable Vector Graphics) फ़ाइल पिक्सेल की ग्रिड के बजाय गणित और कोड से बनी इमेज होती है। क्योंकि यह तस्वीर को रंगीन डॉट्स की जगह आकृतियों (लाइनों, कर्व्स, और फिल्स) के रूप में स्टोर करती है, इसलिए यह छोटे ऐप आइकन से लेकर पूरे बिलबोर्ड तक, किसी भी आकार में शार्प रहती है, और फ़ाइल आम तौर पर छोटी होती है। आपने SVG फ़ाइलों को शायद लोगो, वेबसाइट आइकन, और Cricut कट फ़ाइलों के रूप में देखा होगा।

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

संक्षेप में
  • SVG इमेज को पिक्सेल के रूप में नहीं, बल्कि कोड में वर्णित आकृतियों के रूप में स्टोर करती है, इसलिए यह धुंधली हुए बिना किसी भी आकार में स्केल हो जाती है।
  • यह लोगो, आइकन, सरल illustrations, और Cricut या print काम के लिए बेहतरीन है। photos के लिए यह ठीक विकल्प नहीं है।
  • इसे खोलें किसी भी वेब ब्राउज़र, डिज़ाइन ऐप (Illustrator, Inkscape, Figma, Canva), या साधारण टेक्स्ट एडिटर में।
  • इसे बनाएं वेक्टर सॉफ्टवेयर में डिजाइन करके, या आपके पास पहले से मौजूद इमेज को SVG में कन्वर्ट करके

SVG बनाम सामान्य इमेज (PNG या JPG)

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

SVG एक वेक्टर इमेज होती है: निर्देशों का एक सेट, जो कहता है "यहां वृत्त बनाओ, इसे नारंगी भरो, वहां यह कर्व बनाओ।" क्योंकि तस्वीर हर बार इन्हीं निर्देशों से दोबारा ड्रॉ होती है, इसलिए यह किसी भी आकार में शार्प दिखती है। यही एक अंतर इसका पूरा आकर्षण है। (कब कौन-सा फॉर्मैट इस्तेमाल करना है, इसकी पूरी जानकारी के लिए PNG बनाम SVG देखें।)

बाईं तरफ पिक्सेलयुक्त और धुंधले PNG के रूप में बड़ा किया गया लोगो, और दाईं तरफ बिल्कुल साफ़ SVG
PNG को बड़ा करें तो पिक्सेल दिखते हैं। SVG आकृतियों से दोबारा ड्रॉ होती है, इसलिए किसी भी आकार में शार्प रहती है।

SVG फ़ाइल के अंदर असल में क्या होता है

यहां वह बात है जो लोगों को चौंकाती है: SVG टेक्स्ट होती है। इसे Notepad या किसी भी कोड एडिटर में खोलें और आप इसे पढ़ सकते हैं। अंदर से यह XML होती है, यानी टैग्ड टेक्स्ट फॉर्मैट, जहां हर आकृति कोड की एक लाइन होती है। नारंगी वृत्त की एक simple SVG ऐसी दिखती है:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

बस यही पूरी फ़ाइल है। circle आकृति बनाता है, cx/cy उसे जगह देते हैं, r radius तय करता है, और fill color तय करता है। क्योंकि यह plain text है, SVG छोटी होती है, ब्राउज़र इसे तुरंत render कर सकता है, और आप सिर्फ एक शब्द बदलकर color बदल सकते हैं। SVG एक open standard है जिसे W3C ने 1990s के अंतिम वर्षों से maintain किया है, और हर modern browser इसे support करता है।

बाईं तरफ SVG code का छोटा snippet और दाईं तरफ उससे render हुआ नारंगी वृत्त, जो दिखाता है कि SVG आकृतियां बताने वाला readable code है
SVG सिर्फ टेक्स्ट होती है: यह code दाईं तरफ वाला नारंगी वृत्त बनाता है।

SVG फ़ाइलें किस काम आती हैं

SVG फ़ाइलें वहां सबसे ज्यादा काम आती हैं जहां किसी graphic को अलग-अलग आकारों में crisp रहना हो या shapes के रूप में edit करना हो:

  • लोगो। एक SVG business card और banner, दोनों पर काम करती है, हर size के लिए अलग file की जरूरत नहीं होती।
  • वेबसाइट आइकन और graphics। Buttons, arrows, और simple illustrations किसी भी screen पर sharp रहते हैं और fast load होते हैं।
  • Cricut और cutting machines। SVG standard cut-file format है। machine vinyl, paper, या HTV काटने के लिए पाथ follow करती है। (Cricut के लिए SVG files तैयार करना इसे शुरू से अंत तक समझाता है।)
  • Print और signage। वेक्टर बिना pixelate हुए किसी भी physical size तक scale हो जाता है।

SVG फ़ाइलें किन कामों के लिए अच्छी नहीं होतीं

SVG फ़ाइलें flat, graphic art के लिए बनी होती हैं, इसलिए photographs के लिए ये अच्छा विकल्प नहीं हैं। photo में लाखों subtle blended colors होते हैं और कोई साफ flat regions नहीं होते; इसे shapes में जबरदस्ती बदलने पर आपको या तो posterized, painting-like version मिलता है या बहुत बड़ी, messy file। अगर आप photo को वेक्टराइज़ करने की सोच रहे हैं, तो पहले photo को SVG में convert करने पर असल में क्या होता है पढ़ें। असली photographic detail के लिए JPG या PNG ही रखें।

SVG फ़ाइल कैसे खोलें

आप क्या करना चाहते हैं, उसके हिसाब से तीन आसान विकल्प हैं:

  • सिर्फ देखना है: file को किसी भी वेब ब्राउज़र में drag करें। यह तुरंत render हो जाएगी, किसी software की जरूरत नहीं।
  • Visual तरीके से edit करना है: इसे Inkscape (मुफ़्त), Illustrator, Figma, या Canva जैसे डिज़ाइन ऐप में खोलें। (SVG को कैसे edit करें recoloring और reshaping समझाता है।)
  • Code देखना या थोड़ा बदलना है: इसे Notepad या VS Code जैसे plain text editor में खोलें।

एक बात लोगों को उलझा देती है: Windows File Explorer by default SVG फ़ाइलों का thumbnail नहीं दिखाता, इसलिए folder में file blank लग सकती है। इसका मतलब यह नहीं कि file टूटी हुई है। इसे browser में खोलें, यह ठीक दिखाई देगी।

SVG कैसे बनाएं

इसके दो रास्ते हैं, और सही रास्ता इस पर निर्भर करता है कि आपके पास शुरुआत में क्या है।

इसे शुरुआत से design करें। वेक्टर सॉफ्टवेयर (Inkscape, Illustrator, Figma, या Canva) में अपना लोगो, icon, या illustration बनाएं और उसे SVG के रूप में export करें। इससे सबसे clean result मिलता है क्योंकि file शुरू से ही वेक्टर थी।

आपके पास पहले से मौजूद इमेज को convert करें। ज्यादातर लोगों को असल में यही चाहिए होता है। अगर आपका लोगो या artwork सिर्फ PNG या JPG के रूप में मौजूद है, तो आप उसे वेक्टराइज़ करके SVG में बदलते हैं, यानी pixels को एडिटेबल shapes के रूप में दोबारा बनाया जाता है। (image वेक्टराइज़ेशन क्या होता है यह process समझाता है।)

PerfectVector के साथ यह कैसा दिखता है

अगर आपके पास PNG या JPG है और आपको real SVG चाहिए, तो conversion वाला रास्ता सही है, और PerfectVector यही करता है। लोगो, icon, या flat illustration upload करें और यह artwork को कम नोड संख्या और एडिटेबल colors वाली clean SVG के रूप में फिर से बनाता है, जो web, print, या cutting machine के लिए तैयार होती है। आप अपनी image को SVG में बदल सकते हैं और result खुद देख सकते हैं। अपनी पहली images मुफ़्त convert करें, credit card की जरूरत नहीं।

यह उन्हीं चीजों पर सबसे अच्छा काम करता है जिनके लिए SVG खुद अच्छी होती है: flat, graphic art और लोगो। detailed photo के लिए कोई भी कन्वर्टर आपको true photographic vector नहीं देगा, और हम दिखावा करने के बजाय आपको यह साफ बता देंगे।

एक छोटी safety note

क्योंकि SVG में code हो सकता है, इसलिए सिद्धांत रूप में इसमें script भी हो सकती है, जैसे किसी web page में हो सकती है। browser या design app में SVG देखना safe है, और जिन sources पर आप भरोसा करते हैं वहां से आई SVG फ़ाइलें ठीक हैं। बस unknown source से आई random SVG के साथ वैसा ही व्यवहार करें जैसा आप किसी unknown file के साथ करेंगे, और अपनी website पर कोई SVG embed करने से पहले यह जान लें कि वह कहां से आई है।

FAQ

SVG फ़ाइल किस काम आती है? लोगो, website icons, buttons, simple illustrations, और Cricut जैसी machines के cut files के लिए। जहां भी किसी graphic को अलग-अलग sizes में sharp रहना हो या shapes के रूप में edit करना हो, SVG एक मजबूत विकल्प है। web पर इसका बहुत उपयोग होता है क्योंकि files छोटी होती हैं और quality खोए बिना scale होती हैं।

मैं SVG फ़ाइल कैसे खोलूं? इसे देखने के लिए किसी भी web browser में drag करें, visually edit करने के लिए Inkscape, Illustrator, Figma, या Canva जैसे design app में खोलें, या code देखने के लिए Notepad जैसे text editor में खोलें। ध्यान दें कि Windows File Explorer by default SVG फ़ाइलों का thumbnail नहीं दिखाता, इसलिए blank दिखने वाला icon यह नहीं बताता कि file broken है।

मैं SVG फ़ाइल कैसे बनाऊं? या तो इसे वेक्टर सॉफ्टवेयर (Inkscape, Illustrator, Figma, या Canva) में design करके SVG के रूप में export करें, या आपके पास पहले से मौजूद PNG या JPG लोगो जैसी image को वेक्टराइज़ करके SVG में convert करें। शुरुआत से design करने पर सबसे clean result मिलता है; जब आपके पास सिर्फ रास्टर इमेज हो, तब conversion सबसे quick route है।

क्या SVG फ़ाइल vector file होती है? हां। SVG का मतलब Scalable Vector Graphics है, और यह images को pixels के बजाय वेक्टर shapes के रूप में store करती है। इसी वजह से यह quality खोए बिना किसी भी size तक scale हो जाती है।

SVG और PNG या JPG में क्या अंतर है? PNG या JPG pixels से बनी होती है और अपनी resolution से ज्यादा बड़ा करने पर blur हो जाती है। SVG shapes से बनी होती है और किसी भी size में sharp रहती है। PNG और JPG photos के लिए बेहतर हैं; SVG लोगो, icons, और graphics के लिए बेहतर है।

क्या मैं SVG फ़ाइल Microsoft Word या Office में खोल सकता/सकती हूं? हां। Microsoft 365 और Office के recent versions आपको SVG files insert करने देते हैं, और document के अंदर ही उन्हें recolor या restyle भी करने देते हैं, जो reports और slides में logos और icons के लिए काम आता है।


SVG बस पिक्सेल के बजाय shapes और code से बनी image होती है, और इसी वजह से यह हर जगह sharp रहती है और एडिटेबल भी रहती है। अगर आपकी image अभी सिर्फ PNG या JPG के रूप में है, तो इसे clean SVG में convert करें और आपके पास ऐसी file होगी जिसे आप scale, recolor, और cut कर सकते हैं, वह भी कभी blur हुए बिना।

Blog से और

परफ़ेक्ट वेक्टर बनाने
के लिए तैयार हैं?