SVG ट्यूटोरियल
SVG से शुरुआत करना
खोज…
टिप्पणियों
स्केलेबल वेक्टर ग्राफिक्स (SVG) वेक्टर छवियों को खींचने के लिए W3C मानक है ।
यहाँ एक सरल स्वसंपूर्ण SVG फ़ाइल है:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG को HTML में भी एम्बेड किया जा सकता है, जिस स्थिति में xmlns विशेषता की आवश्यकता नहीं होती है।
अन्य चित्रमय तत्व हैं:
-
<line> -
<ellipse> -
<path> -
<polygon>और<polygon><polyline> -
<text>बाल तत्व जिनमें<tspan>और<textPath>
CSS का उपयोग स्टाइलिंग के लिए किया जाता है, हालांकि सभी CSS गुण SVG पर लागू नहीं होते हैं और SVG स्वयं कुछ विशिष्ट गुणों को परिभाषित करता है जैसे fill और stroke जो अन्यत्र उपयोग नहीं किए जाते हैं।
आकार ढाल या पैटर्न से भरे जा सकते हैं और फिल्टर का उपयोग करके अतिरिक्त रेखापुंज प्रभाव प्राप्त किया जा सकता है।
क्लिप पथ के रूप में उपरोक्त आलेखीय तत्वों का उपयोग करके क्लिपिंग उपलब्ध है।
W3C SVG मानक के संस्करणों के बारे में:
- वर्तमान संस्करण SVG 1.1 (दूसरा संस्करण) है
- W3C वर्तमान में SVG 2 के मसौदे पर काम कर रहा है
संस्करण
| संस्करण | रिलीज़ की तारीख |
|---|---|
| 1.0 | 2001/09/04 |
| 1.1 पहला संस्करण | 2003/01/14 |
| 1.2 टिनी | 2008-12-22 |
| 1.1 दूसरा संस्करण | 2011-08-16 |
इनलाइन एसवीजी
इनलाइन SVG, HTML के भीतर लिखे गए SVG मार्कअप को ब्राउज़र में ग्राफिक्स उत्पन्न करने की अनुमति देता है।
एसवीजी इनलाइन का उपयोग करते समय, DOCTYPE की कड़ाई से आवश्यकता नहीं है। इसके बजाय सिर्फ <svg> टैगबॉक्स खोलने या बंद करने के साथ या तो व्यूबॉक्स या चौड़ाई और ऊंचाई के गुण पर्याप्त होंगे:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
<svg> टुकड़ा ऊपर एक कंटेनर और एक संरचनात्मक तत्व दोनों के रूप में कार्य करता है। यह टुकड़ा अपनी समन्वय प्रणाली स्थापित करता है।
नीचे कुछ सामग्री के साथ एसवीजी टुकड़े को प्रस्तुत करने का एक उदाहरण है। यह "हैलो वर्ल्ड!" के साथ एक आयत का निर्माण करेगा। इसके भीतर पाठ।
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
परिणाम:
एसवीजी के रूप में ![]()
आप एक HTML दस्तावेज़ के भीतर एक छवि के रूप में एक एसवीजी फ़ाइल की सामग्री को एक <img> टैग का उपयोग करके प्रस्तुत कर सकते हैं। उदाहरण के लिए:
<img src="my_svg_file.svg" alt="Image description">
चित्र के आयाम, डिफ़ॉल्ट रूप से, प्रदर्शन एसवीजी में संदर्भित फ़ाइल में निर्दिष्ट चौड़ाई और ऊंचाई गुणों के अनुसार होगा src विशेषता।
यह इस दृष्टिकोण में निहित विभिन्न सीमाओं को ध्यान देने योग्य है:
- ब्राउज़र समर्थन, जबकि अच्छा है, इंटरनेट एक्सप्लोरर 8 और पहले के संस्करण शामिल नहीं हैं, न ही एंड्रॉइड 2.3 और पुराने संस्करण।
- आप एसवीजी फ़ाइल के भीतर मौजूद व्यक्तिगत तत्वों को सीएसएस का उपयोग करके स्टाइल नहीं कर सकते हैं जो एसवीजी फ़ाइल के लिए बाहरी है। सभी सीएसएस छवि फ़ाइल के भीतर ही होना चाहिए।
- जावास्क्रिप्ट नहीं चलेगा।
- छवि को एक फ़ाइल में पूरा होना चाहिए। उदाहरण के लिए, यदि SVG फ़ाइल में रेखापुंज चित्र हैं तो उन आंतरिक छवियों को डेटा URL के रूप में एन्कोड किया जाना चाहिए।
एक पृष्ठभूमि छवि के रूप में एसवीजी
आप सीएसएस फ़ाइल को HTML डॉक्यूमेंट में प्रदर्शित कर सकते हैं, इसे सीएसएस में एक बैकग्राउंड इमेज के रूप में निर्दिष्ट करके। उदाहरण के लिए:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
यदि आपकी एसवीजी फ़ाइल में निर्दिष्ट आयाम आपके एचटीएमएल तत्व के आयामों से बड़े हैं, तो एसवीजी को उसके तत्व के भीतर फिट करने के लिए स्केल करने के लिए, background-size संपत्ति को निर्दिष्ट करना वांछनीय हो सकता है।
SVG को <img> रूप में उपयोग करने के साथ, यह इस दृष्टिकोण के साथ कुछ सीमाओं को ध्यान देने योग्य है:
- ब्राउज़र समर्थन में इंटरनेट एक्सप्लोरर 8 और पहले के संस्करण शामिल नहीं हैं, न ही एंड्रॉइड 2.3 और पुराने संस्करण।
- आप एसवीजी फ़ाइल के भीतर मौजूद व्यक्तिगत तत्वों को सीएसएस का उपयोग करके स्टाइल नहीं कर सकते हैं जो एसवीजी फ़ाइल के लिए बाहरी है। सभी सीएसएस छवि फ़ाइल के भीतर ही होना चाहिए।
