एचटीएमएल ग्राफिक्स

ग्राफिक्स होम

गूगल मानचित्र

मानचित्र परिचय मैप्स बेसिक मैप्स ओवरले मानचित्र घटनाक्रम मानचित्र नियंत्रण मानचित्र प्रकार मानचित्र संदर्भ

एसवीजी ट्यूटोरियल

एसवीजी परिचय एचटीएमएल में एसवीजी एसवीजी आयत एसवीजी सर्किल एसवीजी एलिप्से एसवीजी लाइन एसवीजी बहुभुज एसवीजी पॉलीलाइन एसवीजी पथ एसवीजी पाठ एसवीजी पथपाकर एसवीजी फ़िल्टर परिचय एसवीजी धुंधला प्रभाव एसवीजी ड्रॉप शैडो एसवीजी रैखिक एसवीजी रेडियल एसवीजी उदाहरण एसवीजी संदर्भ

कैनवास ट्यूटोरियल

कैनवास परिचय कैनवास ड्राइंग कैनवास निर्देशांक कैनवास ग्रेडिएंट कैनवास पाठ कैनवास छवियां कैनवास संदर्भ

कैनवास घड़ी

घड़ी परिचय घडी का मुख घड़ी संख्या हाथ घड़ी घड़ी प्रारंभ

एचटीएमएल गेम

खेल परिचय खेल कैनवास खेल के घटक खेल नियंत्रक खेल बाधाएं गेम स्कोर खेल छवियां खेल ध्वनि गेम ग्रेविटी खेल उछल खेल रोटेशन खेल आंदोलन

एचटीएमएल में एसवीजी


आप एसवीजी तत्वों को सीधे अपने एचटीएमएल पेजों में एम्बेड कर सकते हैं।


एसवीजी को सीधे एचटीएमएल पेजों में एम्बेड करें

यहाँ एक साधारण SVG ग्राफ़िक का एक उदाहरण दिया गया है:

Sorry, your browser does not support inline 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 इमेज को बंद कर देता है

नोट: चूंकि एसवीजी एक्सएमएल में लिखा गया है, सभी तत्वों को ठीक से बंद किया जाना चाहिए!