SVG क्या है? स्केलेबल वेक्टर ग्राफिक्स समझाया गया
संक्षिप्त उत्तर: SVG एक टेक्स्ट फ़ाइल है जो चित्र बनाती है
SVG का अर्थ है स्केलेबल वेक्टर ग्राफिक्स (Scalable Vector Graphics)। मूल रूप से, एक SVG फ़ाइल केवल एक टेक्स्ट फ़ाइल होती है। यदि आप इसे किसी टेक्स्ट एडिटर में खोलते हैं, तो आपको JPEG या PNG की तरह पिक्सेल का ग्रिड नहीं दिखेगा; आपको XML मार्कअप दिखेगा जो बताता है कि आकृतियाँ कैसे बनानी हैं। यह गणितीय निर्देशों का एक सेट है—कर्व्स द्वारा परिभाषित पाथ, केंद्र और त्रिज्या वाले वृत्त, चौड़ाई और ऊंचाई वाले आयत—जो किसी ब्राउज़र या इमेज एडिटर को यह बताता है कि एक चित्र को कैसे रेंडर करना है। एक साधारण लोगो केवल 2 KB का टेक्स्ट हो सकता है। असली जादू इसके नाम में है: 'स्केलेबल'। चूंकि फ़ाइल एक निश्चित पिक्सेल ग्रिड के बजाय ज्यामिति का वर्णन करती है, आप उसी SVG फ़ाइल का उपयोग एक छोटे से 16×16 पिक्सेल के फ़ेविकॉन और एक 3-मीटर-चौड़े बिलबोर्ड के लिए कर सकते हैं, जिसमें गुणवत्ता में ज़रा भी कमी नहीं आएगी। एक PNG को उसके मूल आकार से 10 गुना बढ़ाने की कोशिश करें और आपको एक धुंधली गड़बड़ी मिलेगी। एक SVG को उसके आकार से 10 गुना बढ़ाने पर वह बिल्कुल स्पष्ट दिखता है, जो मूल के समान होता है। SVG W3C का एक ओपन स्टैंडर्ड है, जिसका वर्तमान स्थिर संस्करण SVG 1.1 (जो 2011 में प्रकाशित हुआ था) है और SVG 2 अभी भी विकास में है। अच्छी खबर यह है कि आपको संगतता (compatibility) के बारे में चिंता करने की आवश्यकता नहीं है। हर आधुनिक ब्राउज़र—Chrome, Firefox, Safari, Edge—SVG को मूल रूप से हैंडल करता है। यही कारण है कि वेब डेवलपर्स ने इसे आइकन और लोगो से लेकर चार्ट और जटिल चित्रों तक हर चीज़ के लिए अपनाया है।
SVG रास्टर फॉर्मेट्स (PNG, JPEG, WebP) से कैसे अलग है
PNG, JPEG और WebP जैसी रास्टर इमेज मूल रूप से रंगीन वर्गों का एक विशाल ग्रिड होती हैं। एक 1920×1080 PNG फ़ाइल अपने 2,073,600 पिक्सेल में से प्रत्येक के लिए विशिष्ट रंग मान संग्रहीत करती है। फ़ाइल में 'वृत्त' या 'रेखा' की कोई अवधारणा नहीं होती; यह बस इतना जानती है कि निर्देशांक (142, 87) पर पिक्सेल नीले रंग का एक विशेष शेड है। यह विधि तस्वीरों के लिए एकदम सही है, जहाँ आपके पास लाखों सूक्ष्म रंग भिन्नताएं होती हैं जिन्हें कोई भी फ़ॉर्मूला कुशलता से वर्णित करने की उम्मीद नहीं कर सकता। SVG जैसे वेक्टर फॉर्मेट्स दूसरी दिशा से काम करते हैं। एक SVG पिक्सेल संग्रहीत नहीं करता है। इसके बजाय, यह एक कमांड संग्रहीत करता है जैसे 'निर्देशांक (150, 90) पर 40-पिक्सेल त्रिज्या और #0057FF फिल कलर के साथ एक भरा हुआ वृत्त बनाएं।' ब्राउज़र या इमेज व्यूअर यह गणना करने का काम करता है कि इमेज प्रदर्शित होने पर किन पिक्सेल को रंगना है। यह फ़ाइल को रिज़ॉल्यूशन से पूरी तरह स्वतंत्र बनाता है। इस अंतर के बहुत बड़े व्यावहारिक परिणाम होते हैं। विभिन्न मीडिया में एक कंपनी लोगो का उपयोग करने के लिए, आपको एक फ़ेविकॉन के लिए 32px PNG, वेबसाइट हेडर के लिए 200px वर्ज़न और प्रिंट ब्रोशर के लिए 2000px वर्ज़न की आवश्यकता हो सकती है। SVG के साथ, एक ही फ़ाइल इन सभी उपयोग के मामलों को त्रुटिहीन ढंग से संभालती है। दूसरी ओर, एक पहाड़ की तस्वीर को SVG के रूप में प्रस्तुत करने का प्रयास एक आपदा होगी। फ़ाइल को विवरण को अनुमानित करने के लिए भी लाखों व्यक्तिगत पाथ एलिमेंट्स की आवश्यकता होगी, जिसके परिणामस्वरूप एक विशाल फ़ाइल बनेगी जो JPEG से दसवें आकार की होने के बावजूद खराब दिखेगी। किसी पर भी विश्वास न करें जो आपको बताता है कि SVG *हमेशा* छोटा होता है। फ़ाइल का आकार पूरी तरह से जटिलता पर निर्भर करता है। एक साधारण दो-रंग का आइकन 4 KB PNG की तुलना में 800-बाइट SVG के रूप में छोटा होने की संभावना है। लेकिन कई ग्रेडिएंट्स और सैकड़ों पाथ्स के साथ एक विस्तृत चित्रण SVG के रूप में आसानी से 200 KB का हो सकता है, जबकि एक कंप्रेस्ड PNG वर्ज़न केवल 80 KB का होता है। सही फॉर्मेट का चुनाव करने के लिए यह जानना ज़रूरी है कि इमेज में क्या है।
SVG फ़ाइलों में वास्तव में क्या होता है: एक अंदरूनी नज़र
चूंकि SVG केवल XML है, आपको अंदर झाँकने के लिए किसी विशेष सॉफ्टवेयर की आवश्यकता नहीं है। यहाँ एक पूरी SVG फ़ाइल है जो एक मोटी नीली बॉर्डर वाला एक लाल वृत्त बनाती है: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> वह पूरी इमेज केवल 141 कैरेक्टर का टेक्स्ट है। `viewBox` एट्रिब्यूट हमारे ड्राइंग कैनवास—एक 100×100 निर्देशांक प्रणाली—को सेट करता है। `cx`, `cy` और `r` एट्रिब्यूट्स वृत्त की स्थिति और आकार को परिभाषित करते हैं। आप इस कोड को सीधे HTML फ़ाइल में कॉपी और पेस्ट कर सकते हैं, और आपका वेब ब्राउज़र इमेज को बिल्कुल सही ढंग से रेंडर करेगा। बेशक, वास्तविक दुनिया के SVG आमतौर पर अधिक जटिल होते हैं। Adobe Illustrator या Figma जैसे डिज़ाइन टूल मेटाडेटा, एडिटर-विशिष्ट टैग और कभी-कभी छिपी हुई रास्टर इमेज से भरी हुई फूली हुई फ़ाइलें एक्सपोर्ट करने के लिए कुख्यात हैं, ऐसे प्रभावों के लिए जिन्हें वेक्टर के रूप में व्यक्त नहीं किया जा सकता है। डिफ़ॉल्ट सेटिंग्स के साथ एक्सपोर्ट की गई एक SVG ऑप्टिमाइज़ किए जाने के बाद उसी फ़ाइल से 15-20 गुना बड़ी हो सकती है। SVG की असली शक्ति `<path>` एलिमेंट में निहित है। एक पाथ के `d` एट्रिब्यूट में अपनी एक छोटी भाषा होती है, जिसमें एक वर्चुअल पेन को स्थानांतरित करने (`M`), रेखाएं खींचने (`L`), जटिल कर्व्स बनाने (`C`), और आकृतियों को बंद करने (`Z`) के लिए कमांड होते हैं। एक एकल, लंबा पाथ एलिमेंट किसी भी कल्पनाशील आकृति का वर्णन कर सकता है, मानचित्र पर किसी देश की रूपरेखा से लेकर एक कस्टम लेटरफॉर्म तक। इस तरह वेक्टर ग्राफिक्स अपने विशिष्ट चिकने कर्व्स प्राप्त करते हैं जो कभी पिक्सेलेट नहीं होते, चाहे आप कितना भी ज़ूम क्यों न करें।
सामान्य उपयोग के मामले: जहाँ SVG उत्कृष्ट है और जहाँ नहीं
लोगो SVG के लिए पोस्टर चाइल्ड हैं। एक ही ब्रांड मार्क को 120px वेबसाइट हेडर, 0.75-इंच के बिजनेस कार्ड और कई फुट के ट्रेड शो बैनर पर स्पष्ट दिखना चाहिए। प्रत्येक संभावित रिज़ॉल्यूशन के लिए रास्टर फ़ाइलों के एक फ़ोल्डर को प्रबंधित करने की कोशिश करने की तुलना में एक मास्टर SVG फ़ाइल का उपयोग करना कहीं अधिक समझदार और विश्वसनीय है। आइकन एक और सही उपयोग का मामला है। Font Awesome जैसे आधुनिक आइकन सेट SVG के रूप में वितरित किए जाते हैं। 24×24 पिक्सेल के छोटे आकार में, एक SVG आइकन एक पिक्सेल-परफेक्ट PNG जितना ही स्पष्ट हो सकता है, लेकिन यह आधुनिक फोन और लैपटॉप की हाई-DPI स्क्रीन के लिए 48px या 96px तक भी खूबसूरती से स्केल करता है, यह सब एक ही स्रोत फ़ाइल से होता है। यहाँ एक प्रमुख उपयोग का मामला है जिसे लोग अक्सर भूल जाते हैं: डेटा विज़ुअलाइज़ेशन। जब आप किसी समाचार साइट पर एक इंटरैक्टिव चार्ट देखते हैं, तो इसकी अच्छी संभावना है कि यह SVG है। D3.js जैसी लाइब्रेरी ब्राउज़र में इन विज़ुअलाइज़ेशन को गतिशील रूप से बनाती हैं। एक बार चार्ट में हर बार, एक स्कैटर प्लॉट पर हर बिंदु, और एक मानचित्र पर हर क्षेत्र एक विशिष्ट SVG एलिमेंट होता है जिसे CSS से स्टाइल किया जा सकता है और JavaScript से मैनिपुलेट किया जा सकता है। अब वास्तविकता की जाँच: तस्वीरों के लिए SVG का उपयोग न करें। एक तस्वीर के लगातार टोन और जटिल बनावट को वेक्टर पाथ से कुशलता से वर्णित नहीं किया जा सकता है। एक तस्वीर को SVG में 'ट्रेस' करने का कोई भी प्रयास एक राक्षसी रूप से बड़ी फ़ाइल का उत्पादन करेगा जो एक सस्ती वेक्टरकृत कला परियोजना की तरह दिखती है, न कि एक तस्वीर की तरह। किसी भी फोटोग्राफिक चीज़ के लिए, JPEG, WebP, या AVIF का उपयोग करें। वे आपको बहुत छोटी फ़ाइलें और कहीं बेहतर गुणवत्ता देंगे। साथ ही, पेशेवर प्रिंट वर्कफ़्लो में SVG के साथ सावधान रहें। प्रिंट की दुनिया अभी भी CMYK रंग, स्पॉट कलर और ओवरप्रिंट सेटिंग्स के इर्द-गिर्द घूमती है, और PDF और EPS जैसे फॉर्मेट्स में इन सुविधाओं के लिए कहीं अधिक गहरा, अधिक विश्वसनीय समर्थन है। SVG का नेटिव कलर स्पेस RGB है, और जबकि आप CMYK प्रोफाइल एम्बेड कर सकते हैं, प्रिंट शॉप सॉफ्टवेयर में समर्थन सर्वोत्तम रूप से असंगत है।
SVG में और उससे रूपांतरण: क्या काम करता है और क्या नहीं
वेक्टर फॉर्मेट्स के बीच रूपांतरण आमतौर पर आसान हिस्सा होता है। AI से SVG, EPS से SVG, या वेक्टर-आधारित PDF से SVG में जाना अक्सर एक स्वच्छ प्रक्रिया होती है क्योंकि अंतर्निहित ज्यामितीय डेटा पहले से ही मौजूद होता है। यह अधिकतर एक फ़ाइल फॉर्मेट की भाषा से दूसरे में अनुवाद होता है। CocoConvert इन वेक्टर-से-वेक्टर रूपांतरणों को मज़बूती से संभालता है, पाथ्स, रंगों और टाइपोग्राफी को संरक्षित रखता है। PNG या JPEG जैसी रास्टर इमेज को SVG में बदलना एक पूरी तरह से अलग जानवर है। यह प्रक्रिया, जिसे ऑटो-ट्रेसिंग कहा जाता है, में सॉफ्टवेयर आपके पिक्सेल-आधारित इमेज में आकृतियाँ कहाँ हैं, इसका अनुमान लगाता है और उन्हें अनुमानित करने के लिए वेक्टर पाथ बनाता है। जिस किसी ने भी एक जटिल लोगो को एक ऑनलाइन कनवर्टर में डाला है और एक ऊबड़-खाबड़ गड़बड़ी वापस पाई है, वह दर्द जानता है। परिणाम एक बहुत ही सरल, हाई-कंट्रास्ट ग्राफिक के लिए स्वीकार्य हो सकते हैं, लेकिन किसी भी जटिल चीज़ के लिए, यह एक अनुमान है। लोगो के एक truly clean वेक्टर वर्ज़न के लिए, किसी डिजाइनर द्वारा Illustrator या Inkscape जैसे टूल में मैन्युअल रूप से इसे फिर से बनाने से बेहतर कुछ नहीं है। दूसरी दिशा में जाना—SVG से PNG जैसे रास्टर फॉर्मेट में—सीधा है। चूंकि SVG का कोई अंतर्निहित पिक्सेल आकार नहीं होता है, आपको बस कनवर्टर को यह बताने की आवश्यकता होती है कि अंतिम PNG को कितना बड़ा बनाना है। CocoConvert आपको एक लक्ष्य चौड़ाई निर्दिष्ट करने देता है, और ऊंचाई को आस्पेक्ट रेश्यो बनाए रखने के लिए स्वचालित रूप से गणना की जाती है। वेब उपयोग के लिए, 1× और 2× आकार (उदाहरण के लिए, 400px और 800px चौड़ा) पर एक्सपोर्ट करना एक सामान्य अभ्यास है। उच्च-गुणवत्ता वाली 300 DPI प्रिंटिंग के लिए, याद रखें कि 4-इंच चौड़ी इमेज को 1200 पिक्सेल चौड़ा एक्सपोर्ट करने की आवश्यकता होती है। एक आखिरी रूपांतरण जो अक्सर लोगों को परेशान करता है वह है SVG से PDF। चूंकि दोनों वेक्टर फॉर्मेट्स हो सकते हैं, इसलिए कलाकृति के लिए रूपांतरण आमतौर पर दोषरहित होता है। दिक्कत फोंट हैं। यदि आपकी SVG आपके सिस्टम पर स्थापित एक फ़ॉन्ट का उपयोग करती है लेकिन उसे एम्बेड नहीं करती है, तो परिणामी PDF इसे किसी और चीज़ से बदल सकता है, जिससे आपका डिज़ाइन टूट सकता है। प्रो-टिप यह है कि आप SVG एक्सपोर्ट करने से *पहले* अपने डिज़ाइन सॉफ्टवेयर में सभी टेक्स्ट को आउटलाइन्स में बदल दें।
वेब डेवलपमेंट में SVG: एम्बेड करना, स्टाइलिंग और एनिमेट करना
SVG को वेब पेज पर लाने के आपके पास कुछ तरीके हैं, और आप जो तरीका चुनते हैं उसके वास्तविक परिणाम होते हैं। सबसे सरल एक `<img>` टैग है: `<img src="logo.svg" alt="Company logo">`। यह आसान है, लेकिन यह एक ब्लैक बॉक्स है। आप CSS के साथ अंदर जाकर किसी आकृति का रंग नहीं बदल सकते, न ही आप इसे JavaScript के साथ एनिमेट कर सकते हैं। पूर्ण नियंत्रण पाने के लिए, आपको SVG को सीधे अपने HTML में इनलाइन करना होगा। SVG मार्कअप DOM का हिस्सा बन जाता है, ठीक आपके `<div>`s और `<p>`s की तरह। यहीं पर SVG वेब पर वास्तव में चमकता है। आप CSS सेलेक्टर्स के साथ SVG के अंदर किसी भी एलिमेंट को टारगेट कर सकते हैं ताकि होवर पर फिल बदल सकें, या जटिल इंटरेक्शन बनाने के लिए JavaScript और Web Animations API का उपयोग कर सकें। इस तरह आधुनिक फ्रंट-एंड फ्रेमवर्क आइकनों के लिए SVGs का उपयोग करते हैं—वे कंपोनेंट्स के रूप में इनलाइन रेंडर किए जाते हैं। अपने CSS में `background-image: url('icon.svg')` का उपयोग करना एक तीसरा विकल्प है, जो दोहराए जाने वाले पैटर्न या सजावटी तत्वों के लिए बहुत अच्छा है। हालांकि, `<img>` टैग की तरह, यह SVG को अलग करता है, किसी भी आंतरिक स्टाइलिंग को रोकता है। आप विभिन्न अवस्थाओं के लिए विभिन्न SVG फ़ाइलें बनाकर और लिंक करके इसे ठीक कर सकते हैं, लेकिन यह कोई विशेष रूप से सुरुचिपूर्ण समाधान नहीं है। एनिमेशन में SVGs वास्तव में मजेदार हो जाते हैं। आप एक इनलाइन SVG में किसी भी एलिमेंट पर मानक CSS एनिमेशन और ट्रांजीशन लागू कर सकते हैं। 'ड्राइंग' प्रभावों के लिए एक लोकप्रिय तरकीब `stroke-dasharray` और `stroke-dashoffset` CSS प्रॉपर्टीज़ का उपयोग करती है ताकि एक पाथ स्क्रीन पर खुद को खींचता हुआ प्रतीत हो। एक नेटिव SVG एनिमेशन सिंटैक्स भी है जिसे SMIL कहा जाता है, लेकिन इसके असंगत सपोर्ट हिस्ट्री (यह कभी इंटरनेट एक्सप्लोरर में काम नहीं करता था) के कारण, आज अधिकांश डेवलपर्स CSS या JavaScript के साथ ही काम करते हैं। अंत में, परफॉर्मेंस के बारे में एक बात। वेक्टर शुद्धता को अपनी साइट की गति को कम न करने दें। हजारों पाथ्स के साथ एक बहुत बड़ी, जटिल SVG ब्राउज़र के लिए रेंडर करने में धीमी हो सकती है। यदि आपके पास पृष्ठभूमि के रूप में उपयोग की जाने वाली एक जटिल चित्रण है, तो आप इसे एक ऑप्टिमाइज़्ड WebP फ़ाइल में रास्टरइज़ करना बेहतर समझ सकते हैं। स्केलेबिलिटी में थोड़ी कमी इसके लायक है यदि यह मोबाइल डिवाइस पर 300ms के पेंट टाइम को बचाता है।
SVG फ़ाइलों को ऑप्टिमाइज़ करना: गुणवत्ता खोए बिना आकार कम करना
किसी डिज़ाइन टूल से सीधे निकली SVG फ़ाइल पर कभी विश्वास न करें। वे लगभग हमेशा अनावश्यक डेटा से भरी होती हैं। Illustrator और अन्य एडिटर ढेर सारे XML मेटाडेटा, एडिटर-विशिष्ट एट्रिब्यूट्स, छिपी हुई लेयर्स और अप्रयुक्त परिभाषाएँ जोड़ते हैं। 18 KB की लोगो फ़ाइल को ऑप्टिमाइज़ेशन के बाद 3 KB तक सिकुड़ते देखना असामान्य नहीं है—यह 80% की कमी है जिसमें बिल्कुल कोई विज़ुअल बदलाव नहीं होता। इस काम के लिए इंडस्ट्री-स्टैंडर्ड टूल SVGO (SVG Optimizer) है। जबकि यह एक कमांड-लाइन यूटिलिटी है, इसका उपयोग करने का सबसे आसान तरीका वेब-आधारित GUI के माध्यम से है, और सबसे अच्छा Jake Archibald द्वारा SVGOMG है। आप अपना SVG कोड पेस्ट कर सकते हैं या एक फ़ाइल अपलोड कर सकते हैं और फ़ाइल आकार और रेंडरिंग पर उनके प्रभाव को देखने के लिए विभिन्न ऑप्टिमाइज़ेशन सेटिंग्स को विज़ुअली टॉगल कर सकते हैं। सबसे बड़े फायदे आमतौर पर मेटाडेटा को हटाने, ग्रुप्स को कोलैप्स करने, छिपे हुए एलिमेंट्स को हटाने और `<rect>` जैसी सरल आकृतियों को अधिक कुशल `<path>` एलिमेंट्स में बदलने से मिलते हैं। 'प्रेसिजन' स्लाइडर पर विशेष ध्यान दें, जो निर्देशांकों में दशमलव स्थानों को नियंत्रित करता है। इसे 6 से 2 तक कम करने से अक्सर फ़ाइल आकार में 20-30% की कमी हो सकती है, जिसमें कोई बोधगम्य अंतर नहीं होता। यदि आप आइकनों के लिए SVGs को सीधे अपने HTML में इनलाइन कर रहे हैं, तो आप और भी आक्रामक हो सकते हैं। HTML5 में इनलाइन SVGs के लिए `xmlns` एट्रिब्यूट की आवश्यकता नहीं होती है, और यदि आप जानते हैं कि आइकन का हमेशा एक निश्चित आकार होगा तो आप `viewBox` को भी हटा सकते हैं (हालांकि यह कम आम और जोखिम भरा हो सकता है)। CocoConvert कुछ बेसिक ऑप्टिमाइजेशन स्वचालित रूप से लागू करता है, जैसे मेटाडेटा को हटाना और निर्देशांक परिशुद्धता को कम करना। यह आपको एक अच्छा शुरुआती बिंदु देता है। लेकिन प्रोडक्शन वेब उपयोग के लिए जहाँ हर किलोबाइट मायने रखता है, हम दृढ़ता से सलाह देते हैं कि आप अपनी फ़ाइलों को SVGOMG के माध्यम से चलाएं। एक स्वचालित टूल को रूढ़िवादी होना पड़ता है, लेकिन एक इंसान जो आउटपुट की जांच कर सकता है, वह सबसे छोटी संभव फ़ाइल प्राप्त करने के लिए ऑप्टिमाइजेशन को बहुत आगे तक सुरक्षित रूप से बढ़ा सकता है।