SVG क्या है? वेक्टर फ़ॉर्मैट की पूरी गाइड

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

SVG क्या है?

SVG (Scalable Vector Graphics) दो-आयामी वेक्टर ग्राफ़िक्स बयान करने के लिए एक XML-आधारित W3C मानक है। एक्सटेंशन .svg और MIME टाइप image/svg+xml है। gzip से कंप्रेस किया रूप .svgz एक्सटेंशन इस्तेमाल करता है।

रास्टर फ़ॉर्मैट (JPG, PNG, WebP) तस्वीर को पिक्सेल के एक तय ग्रिड के रूप में रखते हैं; बड़ा करें तो पिक्सेल दिखने लगते हैं। SVG आकारों को गणितीय रूप से बयान करता है, और ब्राउज़र या प्रोग्राम उन्हें स्क्रीन के रिज़ॉल्यूशन के हिसाब से फिर से बनाता है। MDN की इमेज फ़ॉर्मैट गाइड SVG को उन इमेज के लिए आदर्श विकल्प बताती है जिन्हें ड्रॉइंग कमांड से दर्शाया जा सकता है, ख़ासकर तब जब दिखने का साइज़ पता न हो या बदलता रहे, और कहती है कि यह तस्वीरों के लिए आमतौर पर उपयोगी नहीं है।

इतिहास: SVG 1.0, 1.1 और SVG 2

• 4 सितंबर 2001: SVG 1.0, W3C Recommendation के रूप में प्रकाशित हुआ।
• 14 जनवरी 2003: SVG 1.1, Recommendation बना। 1.1 ने भाषा को मॉड्यूल में बाँटा, जिससे मोबाइल प्रोफ़ाइल जैसे उप-समूह तय करना आसान हुआ।
• 16 अगस्त 2011: SVG 1.1 Second Edition प्रकाशित हुआ। आज ब्राउज़र इसी स्थिर संस्करण पर काम करते हैं।
• SVG 2: W3C के प्रकाशन इतिहास के अनुसार इसके वर्किंग ड्राफ़्ट 2012 से आए और पहला Candidate Recommendation Snapshot 15 सितंबर 2016 को प्रकाशित हुआ। नवीनतम स्नैपशॉट 6 अक्टूबर 2026 का है; डॉक्यूमेंट अब भी Candidate Recommendation चरण में है।

SVG 2, 1.1 Second Edition पर आधारित है और इसका लक्ष्य HTML और CSS के साथ बेहतर तालमेल है। फ़िल्टर, मास्किंग और फ़ॉन्ट जैसे कुछ विषय अलग CSS और FX मॉड्यूल में चले गए। व्यवहार में ब्राउज़र SVG 2 के कुछ हिस्से ही लागू करते हैं, इसलिए यह न मानें कि हर सुविधा हर जगह काम करेगी।

SVG फ़ाइल की संरचना

एक सरल SVG फ़ाइल ऐसी दिखती है:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

निर्देशांक प्रणाली: viewBox, width और height

viewBox ड्रॉइंग की अंदरूनी निर्देशांक प्रणाली तय करता है (यहाँ 0 से 100)। width और height तय करते हैं कि ड्रॉइंग पेज पर कितनी जगह लेगी। viewBox वाली SVG, CSS में दिए किसी भी साइज़ पर अनुपात में बढ़ती-घटती है। viewBox के बिना फ़ाइलें साइज़ बदलने पर कट सकती हैं, जो लोगो की सबसे आम ग़लतियों में से एक है।

मुख्य एलिमेंट

• आकार: rect, circle, ellipse, line, polyline, polygon और path, जो कुछ भी बना सकता है।
• टेक्स्ट: text और tspan। टेक्स्ट चुनने और खोजने लायक रहता है, लेकिन अगर देखने वाले डिवाइस पर फ़ॉन्ट नहीं है, तो विकल्प वाला फ़ॉन्ट इस्तेमाल होता है।
• समूह और दोबारा इस्तेमाल: g, defs, symbol, use। आइकन सेट अक्सर एक ही फ़ाइल में symbol एलिमेंट के रूप में बंडल किए जाते हैं।
• रंगना: ठोस रंग, लीनियर और रेडियल ग्रेडिएंट, पैटर्न, क्लिपिंग पाथ, मास्क और फ़िल्टर (ब्लर, ड्रॉप शैडो)।
• स्टाइल और एनिमेशन: CSS से SVG को स्टाइल किया जा सकता है; CSS एनिमेशन और SMIL एनिमेशन एलिमेंट हलचल जोड़ते हैं।
• एम्बेड की गई सामग्री: रास्टर तस्वीरों के लिए image, HTML के लिए foreignObject और JavaScript के लिए script।

रंग, पारदर्शिता, लेयर और पेज

SVG में पारदर्शिता स्वाभाविक है: जो कुछ नहीं बनाया गया, वह ख़ाली है, और opacity व fill-opacity अर्ध-पारदर्शिता तय करते हैं। लेयर को g समूहों से दर्शाया जाता है; Inkscape और Illustrator अपनी लेयर इसी तरह रखते हैं। रंग डिफ़ॉल्ट रूप से sRGB होते हैं, और सामान्य अर्थ में कोई बिट डेप्थ सीमा नहीं है, क्योंकि रंग संख्याओं के रूप में लिखे जाते हैं। SVG कई पेजों वाला डॉक्यूमेंट फ़ॉर्मैट नहीं है; कई पेजों वाली ड्रॉइंग के लिए PDF बेहतर है।

ब्राउज़र, सिस्टम और सॉफ़्टवेयर में सपोर्ट

MDN के अनुसार Chrome, Edge, Firefox, Opera और Safari, सभी SVG सपोर्ट करते हैं। आप इसे <img> से, CSS background-image के रूप में, HTML के अंदर सीधे, या <object> और <iframe> से इस्तेमाल कर सकते हैं। Inkscape, Adobe Illustrator, Affinity Designer और Figma जैसे वेक्टर टूल SVG पढ़ते-लिखते हैं, और Microsoft Office के मौजूदा संस्करण SVG ग्राफ़िक्स डालने देते हैं।

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

सुरक्षा: SVG को डॉक्यूमेंट की तरह बरतें

SVG एक XML डॉक्यूमेंट है और इसमें script एलिमेंट, इवेंट एट्रिब्यूट (जैसे onload) और बाहरी रेफ़रेंस हो सकते हैं। MDN का "SVG as an image" पेज बताता है कि जब SVG को <img> या CSS बैकग्राउंड से इस्तेमाल किया जाता है, तो ब्राउज़र JavaScript बंद कर देते हैं और इमेज या स्टाइलशीट जैसे बाहरी संसाधन लोड नहीं करते। फ़ाइल को सीधे खोलने पर या <iframe>, <object> या <embed> से एम्बेड करने पर ये पाबंदियाँ लागू नहीं होतीं।

व्यावहारिक नतीजा: अगर कोई साइट उपयोगकर्ताओं को SVG फ़ाइलें अपलोड करने देती है और उन्हें सीधे अपने डोमेन से परोसती है, तो फ़ाइल में छिपी स्क्रिप्ट उस साइट के संदर्भ में चल सकती है (stored XSS)। आम बचाव:

• अपलोड की गई SVG को ऐसे सैनिटाइज़र से गुज़ारें जो script, इवेंट एट्रिब्यूट, foreignObject और बाहरी लिंक हटा दे।
• उपयोगकर्ताओं की फ़ाइलें अलग डोमेन से, सख़्त Content-Security-Policy के साथ, या डाउनलोड के रूप में (Content-Disposition: attachment) परोसें।
• अगर वेक्टर की ज़रूरत नहीं है, तो अपलोड की गई SVG को सर्वर पर PNG में बदलें और केवल रास्टर संस्करण प्रकाशित करें।

आम उपयोग

• लोगो और ब्रांड एसेट: एक ही फ़ाइल विज़िटिंग कार्ड से लेकर होर्डिंग तक साफ़ रहती है।
• इंटरफ़ेस आइकन: CSS से रंगे जा सकते हैं और हाई-डेंसिटी स्क्रीन पर कभी धुँधले नहीं होते।
• चार्ट, नक्शे और डायग्राम: D3.js जैसी लाइब्रेरी डेटा को सीधे SVG एलिमेंट में बनाती हैं।
• फ़ेविकॉन: मौजूदा ब्राउज़र <link rel="icon" type="image/svg+xml"> के ज़रिए SVG फ़ेविकॉन स्वीकार करते हैं।
• कटिंग और प्रिंटिंग: लेज़र कटर, विनाइल कटर और कढ़ाई मशीनें वेक्टर पाथ के साथ काम करती हैं।

खूबियाँ और कमज़ोरियाँ

आम समस्याएँ और उनके हल

कोई साइट या ऐप SVG स्वीकार नहीं करता

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

टेक्स्ट किसी दूसरे फ़ॉन्ट में दिखता है

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

पेज पर SVG ग़लत साइज़ की है या कटी हुई है

viewBox के बिना, या तय width/height के साथ, साइज़ बदलना उम्मीद के मुताबिक़ काम नहीं करता। रूट svg एलिमेंट में पूरी ड्रॉइंग को घेरने वाला viewBox जोड़ें और साइज़ CSS में तय करें।

फ़ाइल उम्मीद से बड़ी है

डिज़ाइन टूल SVG में एडिटर का मेटाडेटा, ज़रूरत से ज़्यादा दशमलव अंक और छिपी लेयर लिख देते हैं। SVGO जैसा ऑप्टिमाइज़र इन्हें हटा देता है। सर्वर पर Gzip या Brotli कंप्रेशन टेक्स्ट-आधारित SVG को और छोटा कर देता है।

मुझे अपना PNG लोगो SVG में चाहिए

रास्टर इमेज को सच में वेक्टर में "बदला" नहीं जा सकता; टूल जो करते हैं वह ट्रेसिंग है: आकार पहचाने जाते हैं और आउटलाइन के रूप में दोबारा बनाए जाते हैं। हमारे PNG से SVG और JPG से SVG टूल 2 से 8 रंगों के साथ ट्रेस करते हैं। सरल लोगो और ड्रॉइंग के लिए नतीजे अच्छे और तस्वीरों के लिए मोटे-मोटे होते हैं। इन टूल्स में फ़ाइल सुरक्षित कनेक्शन से हमारे सर्वर पर अपलोड होती है, वहाँ ट्रेस होती है और ज़्यादा से ज़्यादा 30 मिनट के भीतर हटा दी जाती है।

कन्वर्ज़न के टिप्स

• लक्षित साइज़ जानें: SVG को PNG में रेंडर करते समय वह सबसे बड़ा साइज़ चुनें जिस पर इमेज दिखेगी, और हाई-डेंसिटी स्क्रीन के लिए उसे दोगुना करें। हमारे टूल में सबसे लंबी भुजा 4096 पिक्सेल तक हो सकती है; अगर आप चौड़ाई ख़ाली छोड़ते हैं, तो छोटी ड्रॉइंग इस तरह बढ़ाई जाती हैं कि सबसे लंबी भुजा 1024 पिक्सेल हो।
• फ़ोटो वाली सामग्री के लिए JPG: अगर SVG में कोई फ़ोटो एम्बेड है और पारदर्शिता नहीं चाहिए, तो JPG या WebP, PNG से छोटे होते हैं; आप बाद में इमेज कन्वर्टर में PNG को बदल सकते हैं।
• फ़ेविकॉन: अगर आपका लोगो SVG है, तो फ़ेविकॉन जनरेटर उसे स्वीकार करता है और पैकेज में icon.svg जोड़ता है।
• ट्रेसिंग के लिए साफ़ स्रोत: PNG से SVG बनाते समय ऊँचे रिज़ॉल्यूशन वाली, सपाट रंगों वाली, बिना नॉइज़ की इमेज से शुरू करें।

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

SVG और PNG में क्या अंतर है?

PNG तय संख्या वाले पिक्सेल है और बड़ा करने पर धुँधला हो जाता है। SVG आकारों को बयान करता है और हर साइज़ पर साफ़-साफ़ फिर से बनता है। SVG लोगो और आइकन के लिए ठीक है; PNG या JPG तस्वीरों और स्क्रीनशॉट के लिए।

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

SVG कोई चलने वाला प्रोग्राम नहीं है, लेकिन इसमें JavaScript एम्बेड हो सकती है। जब SVG को इमेज (<img>) के रूप में दिखाया जाता है, तो स्क्रिप्ट नहीं चलतीं, लेकिन फ़ाइल को सीधे ब्राउज़र में खोलने पर चल सकती हैं। अनजान स्रोतों की SVG को सीधे खोलने के बजाय किसी व्यूअर में देखें, या PNG में बदल लें।

क्या मैं Word या PowerPoint में SVG डाल सकता हूँ?

Microsoft Office के मौजूदा संस्करण SVG डालना सपोर्ट करते हैं। पुराने संस्करणों के लिए, या अगर आप फ़ाइल दूसरे प्रोग्राम के साथ साझा करेंगे, तो PNG कॉपी ज़्यादा सुरक्षित है।

क्या SVG को PNG में बदलने से क्वालिटी घटती है?

PNG लॉसलेस है, लेकिन ड्रॉइंग एक पिक्सेल साइज़ पर स्थिर हो जाती है। काफ़ी बड़ी चौड़ाई चुनें, तो आपको कोई नुक़सान नहीं दिखेगा; बाद में PNG को बड़ा करने पर वह धुँधली हो जाएगी।

क्या SVG एनिमेशन सपोर्ट करता है?

हाँ। हलचल CSS एनिमेशन, SMIL एनिमेशन एलिमेंट और JavaScript से आ सकती है। PNG में बदलने पर आपको एक ही फ़्रेम मिलता है।

स्रोत

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 का प्रकाशन इतिहास
• MDN: SVG as an image
• MDN: Image file type and format guide