एचटीएमएल में एसवीजी
आप एसवीजी तत्वों को सीधे अपने एचटीएमएल पेजों में एम्बेड कर सकते हैं।
एसवीजी को सीधे एचटीएमएल पेजों में एम्बेड करें
यहाँ एक साधारण SVG ग्राफ़िक का एक उदाहरण दिया गया है:
और यहां एचटीएमएल कोड है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
एसवीजी कोड स्पष्टीकरण:
- एक एसवीजी छवि एक <svg> तत्व से शुरू होती है
- <svg> तत्व की चौड़ाई और ऊँचाई विशेषताएँ SVG छवि की चौड़ाई और ऊँचाई को परिभाषित करती हैं
- <वृत्त> तत्व का उपयोग वृत्त बनाने के लिए किया जाता है
- cx और cy विशेषताएँ वृत्त के केंद्र के x और y निर्देशांक को परिभाषित करती हैं। यदि cx और cy सेट नहीं हैं, तो वृत्त का केंद्र (0, 0) पर सेट है
- r विशेषता वृत्त की त्रिज्या को परिभाषित करती है
- स्ट्रोक और स्ट्रोक-चौड़ाई विशेषताएँ नियंत्रित करती हैं कि किसी आकृति की रूपरेखा कैसी दिखाई देती है। हम सर्कल की रूपरेखा को 4px हरे "बॉर्डर" पर सेट करते हैं
- भरण विशेषता सर्कल के अंदर के रंग को संदर्भित करती है। हम भरण रंग को पीले पर सेट करते हैं
- क्लोजिंग </svg> टैग SVG इमेज को बंद कर देता है
नोट: चूंकि एसवीजी एक्सएमएल में लिखा गया है, सभी तत्वों को ठीक से बंद किया जाना चाहिए!