SVG ट्यूटोरियल
SVG से शुरुआत करना

टिप्पणियों

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

संस्करण

इनलाइन एसवीजी

इनलाइन 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 और पुराने संस्करण।
• आप एसवीजी फ़ाइल के भीतर मौजूद व्यक्तिगत तत्वों को सीएसएस का उपयोग करके स्टाइल नहीं कर सकते हैं जो एसवीजी फ़ाइल के लिए बाहरी है। सभी सीएसएस छवि फ़ाइल के भीतर ही होना चाहिए।