SVG का मतलब Scalable Vector Graphics होता है। यह W3C का ओपन स्टैंडर्ड है, जिसमें तस्वीरों को पिक्सल के बजाय निर्देशों के रूप में वर्णित किया जाता है: यहां एक गोला बनाएं, इस वक्र का अनुसरण करें, उस आकृति को इस रंग से भरें, इस शब्द को उस टाइपफेस में लिखें। क्योंकि चित्र निर्देशों के एक सेट के रूप में होता है, इसे किसी भी आकार में बनाएँ, यह धुंधला या पिक्सलेटेड नहीं होता। इसी वजह से लोगो, आइकन, नक्शे और चार्ट के लिए अक्सर SVG का उपयोग किया जाता है।
एक SVG तस्वीर कैसे संग्रहीत करता है
एक SVG फ़ाइल XML होती है: पठनीय टेक्स्ट जिसे आप किसी भी एडिटर में खोल सकते हैं। <path> एलिमेंट ड्राइंग कमांड्स की एक सघन स्ट्रिंग रखता है, <rect>, <circle> और <polygon> वह काम करते हैं जिसकी उनसे उम्मीद की जाती है, <text> वास्तविक सेलेक्ट की जा सकने वाली टेक्स्ट रखता है, और <g> एलिमेंट्स को समूहित करता है ताकि उन्हें एक साथ खिसकाया या स्टाइल किया जा सके। viewBox एट्रिब्यूट कोऑर्डिनेट सिस्टम को परिभाषित करता है, जो पूरी ड्राइंग को साफ-सुथरे तरीके से स्केल होने देता है।
क्योंकि यह टेक्स्ट है, SVG बहुत अच्छी तरह से कंप्रेस हो जाता है; gzipped SVG (जिसे कभी-कभी एक्सटेंशन .svgz दिया जाता है) अक्सर अपनी मूल साइज़ का एक छोटा हिस्सा ही होता है। टेक्स्ट होने का मतलब यह भी है कि SVG को CSS से स्टाइल किया जा सकता है, ऐनिमेट किया जा सकता है और स्क्रिप्ट किया जा सकता है। ब्राउज़र इसे दस्तावेज़ का हिस्सा मानता है, किसी अपारदर्शी इमेज की तरह नहीं।
यह अंतिम क्षमता सुरक्षा के लिए महत्वपूर्ण है: SVG के अंदर <script> एलिमेंट हो सकता है। जहां भी SVG को उपयोगकर्ता अपलोड के रूप में स्वीकार किया जाता है, वहां इसे सैनिटाइज़ करना या ऐसे तरीके से परोसना ज़रूरी है जो इसे चलने न दे, यही कारण है कि कुछ साइटें हर रास्टर फ़ॉर्मेट स्वीकार करने के बावजूद SVG को अस्वीकार कर देती हैं।
फोटो के लिए SVG एक खराब कंटेनर है। आप इसके अंदर एक रास्टर इमेज एम्बेड कर सकते हैं, लेकिन फिर आपके पास XML में लिपटी एक पिक्सल इमेज होती है, जिसमें स्केलिंग का कोई लाभ नहीं मिलता।
एक SVG कौन सा मेटाडेटा रखता है
SVG में एक समर्पित <metadata> एलिमेंट होता है, और क्योंकि मानक यह तय नहीं करता कि इसके अंदर क्या होना चाहिए, संपादक इसमें बहुत कुछ जोड़ देते हैं। आमतौर पर इसमें Dublin Core टर्म्स के साथ RDF होता है: dc:title, dc:creator, dc:date, dc:description, dc:rights और एक लाइसेंस URI। <title> और <desc> एलिमेंट रूट पर या किसी भी अलग-अलग शेप पर हो सकते हैं, जहां वे स्क्रीन रीडर के लिए एक्सेसिबिलिटी टेक्स्ट के रूप में भी काम करते हैं।
इसके बाद आता है एडिटर का अपना बुककीपिंग डेटा, और आम तौर पर वही सबसे बड़ा हिस्सा होता है। Inkscape अपना पूरा नेमस्पेस लिखता है: दस्तावेज़ की विंडो ज्योमेट्री, ज़ूम स्तर और कर्सर पोज़िशन जब इसे आखिरी बार सेव किया गया था, गाइड लाइनें, ग्रिड सेटिंग्स, लेयर नाम और विज़िबिलिटी, और inkscape:version स्ट्रिंग। Illustrator अपने डॉक्यूमेंट आइडेंटिफ़ायर और हिस्ट्री के साथ एक XMP पैकेट एम्बेड करता है। इन में से कोई भी चीज़ कुछ ड्रॉ नहीं करती।
इससे दो व्यावहारिक बातें निकलती हैं। एडिटर डेटा अक्सर फ़ाइल के ज़्यादातर हिस्से पर कब्जा कर लेता है, इसलिए प्रकाशित करने से पहले SVG को किसी ऑप्टिमाइज़र से गुज़ारने पर अक्सर उसका साइज़ आधा हो जाता है। और लेयर नाम वही टेक्स्ट हैं जो आपने लिखा था: <g inkscape:label="client logo v3 REJECTED"> तस्वीर में अदृश्य है लेकिन फ़ाइल में पूरी तरह से दिखाई देता है।
SVG कब उपयोग करें
SVG का उपयोग किसी भी ऐसी चीज़ के लिए करें जो खींची हुई हो, फोटो खींची हुई न हो: लोगो, आइकन, डायग्राम, चार्ट, इलस्ट्रेशन, नक्शे। वेब के लिए यह सही विकल्प है, जहां एक ही फ़ाइल हर स्क्रीन डेंसिटी पर काम करती है, और प्रिंट के लिए भी, जहां इसे किसी भी साइज़ में स्केल किया जा सकता है।
फोटो और किसी भी सतत टोन वाली इमेज के लिए PNG या JPG का उपयोग करें। जब आपको ऐसी तस्वीर चाहिए जो बहुत पुराने या सीमित सॉफ़्टवेयर में भी खुल सके, तो एक फ्लैट रास्टर कॉपी भी एक्सपोर्ट करें, और प्रकाशित करने से पहले एडिटर का मेटाडेटा हटा दें, ताकि फ़ाइल छोटी हो जाए और इसलिए भी कि लेयर नाम हमेशा सार्वजनिक रूप से दिखाने के लिए नहीं होते।