HTML
HTML <कैनवास> तत्व का उपयोग जावास्क्रिप्ट के माध्यम से ग्राफिक्स बनाने के लिए किया जाता है। <कैनवास> तत्व ग्राफिक्स के लिए एक कंटेनर है।
| SVG <वें शैली ="चौड़ाई:47.2437%; पाठ-संरेखण:केंद्र;">एचटीएमएल कैनवास | |
|---|---|
| SVG में बेहतर मापनीयता है। तो इसे किसी भी रिज़ॉल्यूशन पर उच्च गुणवत्ता के साथ मुद्रित किया जा सकता है | कैनवस की मापनीयता खराब है। इसलिए यह उच्च रिज़ॉल्यूशन पर मुद्रण के लिए उपयुक्त नहीं है |
| SVG कम संख्या में वस्तुओं या बड़ी सतह के साथ बेहतर प्रदर्शन देता है। | कैनवास छोटी सतह या बड़ी संख्या में वस्तुओं के साथ बेहतर प्रदर्शन देता है। |
| SVG को स्क्रिप्ट और CSS के माध्यम से संशोधित किया जा सकता है | कैनवास को केवल स्क्रिप्ट के माध्यम से संशोधित किया जा सकता है |
| एसवीजी वेक्टर आधारित है और आकृतियों से बना है। | कैनवस रास्टर आधारित है और पिक्सेल से बना है। |
उदाहरण
आप वेब पेज पर स्केलेबल वेक्टर ग्राफिक्स (SVG) जोड़ने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
</svg>
</body>
</html> उदाहरण
HTML5 कैनवास के साथ एक आयत बनाने का तरीका जानने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं -
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html> 
