HTML <svg> टैग

  • पिछला पृष्ठ <sup>
  • अगला पृष्ठ <table>

परिभाषा और उपयोग

<svg> टैग SVG ग्राफिक्स के कंटेनर को परिभाषित करता है。

SVG कई ड्रा करने, बॉक्स, गोल, टेक्स्ट और ग्राफिक्स इमेजेज के ड्रा करने के तरीके हैं。

SVG के बारे में अधिक जानने के लिए हमारे SVG शिक्षण。

अन्य संदर्भ:

HTML शिक्षा:HTML SVG

SVG शिक्षा:SVG शिक्षण

उदाहरण

उदाहरण 1

गोल ड्रा करना:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

स्वयं एक प्रयास कीजिए

उदाहरण 2

वर्गाकार ड्रा करना:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

स्वयं एक प्रयास कीजिए

उदाहरण 3

गोलाकार वर्गाकार ड्रा करना:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

स्वयं एक प्रयास कीजिए

उदाहरण 4

सितारा ड्रा करना:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

स्वयं एक प्रयास कीजिए

उदाहरण 5

SVG लोगो ड्रा करना:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

स्वयं एक प्रयास कीजिए

ब्राउज़र समर्थन

तालिका में वाले नंबर इस अभियोग्यता को पहली बार सहारा देने वाले ब्राउज़र का संस्करण को सूचित करते हैं。

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
4.0 9.0 3.0 3.2 10.1
  • पिछला पृष्ठ <sup>
  • अगला पृष्ठ <table>