एसवीजी एक उदाहरण

SVG XML के द्वारा लिखा जाता है।

एसवीजी उदाहरण

नीचे दिए उदाहरण एक साधारण SVG फ़ाइल का उदाहरण है। SVG फ़ाइल को .svg एक्सटेंशन के साथ सहेजना होगा:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

उदाहरण देखें (केवल SVG सहायता वाले ब्राउज़रों के लिए)

यदि आप SVG स्रोत कोड देखना चाहते हैं, तो इस उदाहरण को खोलें, फिर विंडो में दायाँ क्लिक करें। 'स्रोत कोड देखें' चुनें।

कोड व्याख्या:

पहला परिचय XML घोषणा को शामिल करता है। standalone गुण का ध्यान दें! यह गुण इस SVG फ़ाइल को 'स्वतंत्र' होने या बाहरी फ़ाइलों को संदर्भित करने वाला होने का प्रतिबिंबित करता है।

standalone="no" इसका अर्थ है कि SVG दस्तावेज़ एक बाहरी फ़ाइल को संदर्भित करेगा - यहाँ, DTD फ़ाइल है।

दूसरी और तीसरी पंक्तियाँ इस बाहरी एसवीजी DTD को उदाहरण में दिखाती हैं।यह DTD “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” पर स्थित है।यह DTD डब्ल्यू3सी में स्थित है और सभी अनुमति प्राप्त एसवीजी एलिमेंट्स को शामिल करता है।

एसवीजी कोड <svg> एलिमेंट से शुरू होता है, जिसमें खुला टैग <svg> और बंद टैग </svg> शामिल हैं।यह मूल एलिमेंट है।width और height अटिवरीटी इस एसवीजी दस्तावेज़ की चौड़ाई और ऊंचाई को सेट कर सकते हैं।version अटिवरीटी से इस्तेमाल की जा रही एसवीजी संस्करण को परिभाषित कर सकते हैं, xmlns अटिवरीटी एसवीजी नामस्पेस को परिभाषित कर सकते हैं。

एसवीजी का <circle> एक गोल को बनाने के लिए उपयोग किया जाता है।cx और cy अटिवरीटी गोल के केंद्र के x और y सतह को परिभाषित करते हैं।यदि इन अटिवरीटी को अनदेखा किया जाता है, तो गोल के केंद्र को (0, 0) निर्धारित किया जाएगा।r अटिवरीटी गोल की रेखादूरी को परिभाषित करता है。

स्ट्रॉक और स्ट्रॉक-विद्धि अटिवरीटी रूपांकन को नियंत्रित करते हैं।हम गोले के रूपांकन को 2पीएक्स चौड़ा, काला किनारा सेट करते हैं。

फिल अटिवरीटी रंग भीतरी रूपांकन सेट करता है।हम भरने का रंग पीला सेट करते हैं。

बंद टैग का काम एसवीजी एलिमेंट और दस्तावेज़ को बंद करना है。

टिप्पणी:सभी खुले टैग को बंद टैग के साथ जोड़ना जरूरी है!