HTML में SVG

आप SVG एलिमेंट को सीधे HTML पृष्ठ में अंतर्निहित कर सकते हैं

SVG को सीधे HTML पृष्ठ में अंतर्निहित करें

नीचे एक साधारण SVG ग्राफिक्स उदाहरण है:

बड़ी माफी, आपका ब्राउज़र इंलाइन SVG को समर्थित नहीं करता

यह HTML कोड है:

<!DOCTYPE html>
<html>
<body>
<h1>मेरा पहला 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> एलिमेंट से शुरू होती है
  • <svg> एलिमेंट के width और height गुण SVG इमेज के चौड़ाई और ऊंचाई को परिभाषित करते हैं
  • <circle> एलिमेंट वृत्त को आरेखित करने के लिए उपयोग किया जाता है
  • cx और cy गुण वृत्त के केंद्र के x और y सत्रक को परिभाषित करते हैं। यदि cx और cy को सेट नहीं किया गया है, तो वृत्त का केंद्र (0, 0) सेट किया जाता है
  • r गुण वृत्त के व्यास को परिभाषित करता है
  • stroke और stroke-width गुण रूपरेखा के प्रदर्शन को नियंत्रित करते हैं। हमने वृत्त की रूपरेखा को 4 पिक्सल का हरा 'किनारा' सेट किया है
  • fill गुण वृत्त के भीतर का रंग सेट करता है। हमने फिल्लिंग को पीला रंग सेट किया है
  • </svg> टैग SVG इमेज बंद

ध्यान: चूंकि SVG XML से लिखा है, इसलिए सभी एलीमेंट को सही तरीके से बंद करना चाहिए!