SVG: यह क्या है, प्रमुख अवधारणाएँ और वेब डेवलपमेंट में उपयोग

SVG क्या है?

SVG XML पर आधारित एक वेक्टर ग्राफ़िक्स फ़ॉर्मेट है, जो 2001 में W3C अनुशंसा के रूप में पेश किया गया था। रास्टर फ़ॉर्मेट के विपरीत, SVG ज्यामितीय प्रिमिटिव — बिंदुओं, रेखाओं, वक्रों और बहुभुजों — के माध्यम से छवियों का वर्णन करता है। SVG फ़ाइल एक सादा टेक्स्ट XML दस्तावेज़ है जिसे मानक उपकरणों से पढ़ा, संपादित और संपीड़ित किया जा सकता है।

SVG आर्किटेक्चर में कई प्रमुख अवधारणाएँ शामिल हैं। viewBox वास्तविक तत्व आयामों से स्वतंत्र एक वर्चुअल समन्वय प्रणाली को परिभाषित करता है। उदाहरण के लिए, viewBox="0 0 100 100" 100×100 का एक वर्गाकार ग्रिड बनाता है, जिसके अंदर सभी निर्देशांक निश्चित होते हैं। जब कंटेनर की चौड़ाई या ऊँचाई बदलती है, तो सामग्री आनुपातिक रूप से स्केल होती है।

W3C SVG 2 Specification के अनुसार, SVG का आधुनिक संस्करण ग्रेडिएंट, मास्क, फ़िल्टर, मनमाने स्थान पर टेक्स्ट, JavaScript के माध्यम से इंटरैक्टिविटी और CSS और SMIL के माध्यम से एनिमेशन समर्थित करता है। SVG DOM में एक पूर्ण HTML तत्व के रूप में एकीकृत है, जो प्रत्येक ग्राफ़िकल प्रिमिटिव पर प्रोग्रामेटिक नियंत्रण की अनुमति देता है।

मोबाइल डेवलपमेंट में, SVG iOS में UIGraphicsImageRenderer के माध्यम से और Android में VectorDrawable के माध्यम से भी उपयोग किया जाता है — दोनों फ़ॉर्मेट GPU पर हार्डवेयर-त्वरित रास्टर में SVG-जैसे विवरण को परिवर्तित करते हैं।

SVG फ़ॉर्मेट का इतिहास और विकास

SVG 1.0 2001 में W3C अनुशंसा बनी, SVG 1.1 2003 में, और SVG 2.0 2012 से विकास के अधीन है। SVG 2 का मुख्य नवाचार गहन CSS एकीकरण, सम्मिश्रण और ब्लेंडिंग मोड के लिए समर्थन, और HTML में namespace उपसर्गों के बिना SVG का उपयोग करने की क्षमता है।

हालाँकि SVG 2 ने अभी तक अनुशंसा का दर्जा प्राप्त नहीं किया है, आधुनिक ब्राउज़र पहले से ही इसकी अधिकांश कार्यक्षमता का समर्थन करते हैं। Chrome, Safari, Firefox और Edge में SVG 1.1 के लिए लगभग पूर्ण समर्थन और SVG 2 का एक महत्वपूर्ण भाग है।

SVG के मूल तत्व

SVG द्वि-आयामी ग्राफ़िक्स का वर्णन करने के लिए तत्वों का एक सेट प्रदान करता है। प्रत्येक तत्व में विशेषताएँ होती हैं जो इसकी स्थिति, आकार और दृश्य उपस्थिति निर्धारित करती हैं। विशेषताओं को xml विशेषताओं या CSS गुणों के माध्यम से सेट किया जा सकता है।

• <rect> x, y, width, height, rx, ry (कोने की गोलाई) विशेषताओं वाला आयत।
• <circle> cx, cy (केंद्र) और r (त्रिज्या) विशेषताओं वाला वृत्त।
• <ellipse> cx, cy, rx, ry विशेषताओं वाला दीर्घवृत्त।
• <line> x1, y1, x2, y2 विशेषताओं वाला रेखा खंड।
• <polyline> points विशेषता (निर्देशांक सूची) वाली टूटी हुई रेखा।
• <polygon> points विशेषता वाला बंद बहुभुज।
• <path> d विशेषता (आदेश: M, L, C, Q, A, Z) वाला मनमाना पथ।
• <text> x, y, font-size, font-family विशेषताओं वाला टेक्स्ट तत्व।

path तत्व सबसे शक्तिशाली और लचीला SVG तत्व है। d विशेषता में आदेशों का एक क्रम होता है: M (moveTo), L (lineTo), C (क्यूबिक बेज़ियर वक्र), Q (क्वाड्रैटिक बेज़ियर वक्र), A (चाप), Z (पथ बंद करें)। प्रत्येक आदेश का निरपेक्ष या सापेक्ष रूप होता है (बड़ा या छोटा अक्षर)।

SVG <g> के माध्यम से तत्वों को समूहीकृत करने का भी समर्थन करता है। समूह दृश्य विशेषताओं (fill, stroke, transform) को सभी चाइल्ड तत्वों को प्राप्त कराता है। यह आकृतियों के पूरे सेट पर एक एकल शैली लागू करने और एकल transform के माध्यम से उनकी स्थिति नियंत्रित करने की अनुमति देता है।

SVG बनाम रास्टर ग्राफ़िक्स: फ़ॉर्मेट तुलना

SVG और रास्टर फ़ॉर्मेट (JPEG, PNG, WebP) के बीच मुख्य अंतर जानकारी संग्रहीत करने का तरीका है। रास्टर एक निश्चित आकार के ग्रिड में प्रत्येक पिक्सेल का रंग संग्रहीत करता है। SVG आकृतियों को प्रस्तुत करने के लिए गणितीय आदेश संग्रहीत करता है। यह अंतर फ़ॉर्मेट के सभी लाभ और नुकसान निर्धारित करता है।

HTTP Archive, 2025 के अनुसार, 68% वेबसाइटें आइकन के लिए, 34% चित्रण के लिए और 22% लोगो के लिए SVG का उपयोग करती हैं। औसत SVG आइकन का आकार 0.5–2 KB है, जबकि समान गुणवत्ता वाला रास्टर आइकन PNG फ़ॉर्मेट में 5–20 KB होता है।

SVG फ़ोटोग्राफ़ और जटिल रास्टर छवियों के लिए उपयुक्त नहीं है — XML विवरण का आकार समतुल्य JPEG से अधिक होगा। SVG के लिए अनुशंसित अनुप्रयोग: आइकन, लोगो, चित्रण, आरेख, चार्ट, रिस्पॉन्सिव डिज़ाइन वाले इंटरफ़ेस तत्व।

कब SVG चुनें और कब रास्टर फ़ॉर्मेट चुनें

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

हाइब्रिड दृष्टिकोण — इंटरफ़ेस तत्वों के लिए SVG और फ़ोटो सामग्री के लिए WebP/AVIF का संयोजन — गुणवत्ता और पृष्ठ लोड प्रदर्शन के बीच सबसे अच्छा संतुलन प्रदान करता है।

इनलाइन SVG और CSS स्टाइलिंग

इनलाइन SVG SVG मार्कअप को <img> या background-image के माध्यम से अलग फ़ाइल के बजाय सीधे HTML दस्तावेज़ में एम्बेड करना है। इनलाइन SVG का लाभ यह है कि SVG तत्व DOM का हिस्सा बन जाते हैं और CSS के माध्यम से स्टाइल किए जा सकते हैं, JavaScript के माध्यम से नियंत्रित किए जा सकते हैं और अतिरिक्त सर्वर अनुरोधों के बिना एनिमेटेड किए जा सकते हैं।

<img src="icon.svg"> के विपरीत, जहाँ SVG शैडो DOM में पृथक होता है, इनलाइन SVG मूल दस्तावेज़ से रंग और फ़ॉन्ट प्राप्त करता है। यह उदाहरण के लिए, प्रत्येक स्थिति के लिए अलग फ़ाइल लोड किए बिना CSS छद्म-वर्ग :hover के माध्यम से होवर पर आइकन रंग बदलने को लागू करने की अनुमति देता है।

CSS-Tricks के अनुसार, आधुनिक वेब अनुप्रयोगों में आइकन का उपयोग करने का अनुशंसित तरीका इनलाइन SVG है। CSS गुण fill, stroke, stroke-width सीधे SVG तत्वों पर लागू होते हैं। CSS अनुकूलन के लिए, यह महत्वपूर्ण है कि स्रोत SVG में fill और stroke इनलाइन विशेषताओं के रूप में सेट न हों — अन्यथा CSS उन्हें ओवरराइड नहीं कर सकता।

• लाभ: CSS स्टाइलिंग, JS नियंत्रण, कोई HTTP अनुरोध नहीं, viewBox अनुकूलनशीलता।
• नुकसान: HTML पृष्ठ आकार में वृद्धि, HTML से अलग कैश करने में असमर्थता।
• विकल्प: SVG स्प्राइट — एकाधिक SVG को एक फ़ाइल में संयोजित करना और <use href="#id"> का उपयोग करना।

SVG स्प्राइट कैशिंग समस्या को हल करते हैं: सभी आइकन एक फ़ाइल में एकत्र किए जाते हैं, ब्राउज़र इसे एक बार लोड करता है, और व्यक्तिगत आइकन स्प्राइट के अंदर वांछित तत्व की id निर्दिष्ट करके <use> के माध्यम से एक्सेस किए जाते हैं।

SVG एनिमेशन: CSS और SMIL

CSS SVG एनिमेशन ब्राउज़र में वेक्टर ग्राफ़िक्स को एनिमेट करने का सबसे सामान्य और कुशल तरीका है। CSS गुण जैसे transform, opacity और fill HTML तत्वों की तरह ही SVG तत्वों पर लागू होते हैं। मनमाने पथ पर एनिमेशन के लिए CSS गुण offset-path का उपयोग किया जाता है।

SMIL (Synchronized Multimedia Integration Language) SVG में निर्मित एक एनिमेशन तंत्र है जो CSS से स्वतंत्र है। <animate>, <animateTransform> और <animateMotion> तत्व बिना JavaScript या CSS के किसी भी SVG विशेषता को एनिमेट करने की अनुमति देते हैं। SMIL एनिमेशन ब्राउज़र फ्रेम दर के साथ सिंक्रनाइज़ होने की गारंटी है।

MDN Web Docs के अनुसार, SMIL सभी आधुनिक ब्राउज़रों में समर्थित है, लेकिन CSS एनिमेशन अधिक पूर्वानुमानित और कुशल माना जाता है। SMIL का मुख्य उपयोग मामला उन विशेषताओं को एनिमेट करना है जो CSS के माध्यम से सुलभ नहीं हैं, जैसे <path> तत्व का d (path)।

JavaScript + requestAnimationFrame SVG एनिमेशन पर अधिकतम नियंत्रण देता है। वेब डेवलपर जटिल एनिमेशन अनुक्रमों के लिए GSAP और Anime.js जैसी लाइब्रेरी का उपयोग करते हैं जिनमें टाइमलाइन और ईज़िंग फ़ंक्शन होते हैं जिन्हें शुद्ध CSS के साथ लागू करना कठिन है।

कोड उदाहरण: SVG ग्राफ़िक्स बनाना

पहला उदाहरण मूल SVG तत्वों का उपयोग करके एक सरल घर का आइकन है। सभी आकृतियाँ rect और polyline हैं:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

दूसरा उदाहरण CSS के माध्यम से एक घूमने वाले लोडर एनिमेशन को दिखाता है। यह एक धराशायी रूपरेखा बनाने के लिए stroke-dasharray विशेषता के साथ <circle> का उपयोग करता है:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

तीसरा उदाहरण स्मूथ कंटूर ड्राइंग के लिए पथ को एनिमेट करने के लिए GSAP लाइब्रेरी का उपयोग करता है। GSAP stroke-dashoffset विशेषता के साथ काम करता है, जो लाइन प्रकट होने का प्रभाव पैदा करता है:

// GSAP के साथ पथ बनाएं
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});