SVG
An XML-based image format is the Scalable Vector Graphics (SVG) that is used to define 2D vector based graphics for the Web. We can scale up or down a vector image to any extent without losing the image quality.
- SVG is Object Model-based.
- The Document Object Model (DOM) has the subpart as multiple graphical elements.
- With markup, Visual presentation is created and by CSS it is modified or programmatically through the script.
- Accessibility is supported by SVG markup and object model directly.
- With a smaller number of objects or larger surface, it gives better performance.
- Good scalability — at any resolution it can be printed with high quality.
Drawing rectangle with SVG
<!DOCTYPE html>
<html>
<body>
<svg width="600" height="200">
<rect width="400" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Canvas
Alike other HTML elements which you can place anywhere on your page the canvas has the same flexibility.
We can accomplish drawing part using either a 2D or 3D drawing context.
- Canvas is pixel based.
- It is only HTML element which is identical to <img> in behavior.
- Through script, we can create visual presentation and modified programmatically.
- Accessibility is not supported by API ; In addition to canvas, markup-based techniques must be used.
- With a smaller number of objects or larger surface, it gives better performance.
- Worst scalability — for printing on the higher resolution it is not suitable.
Drawing rectangle with Canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="drawCanvas" width="400" height="250" style="border:1px solid #0693CA;">
</canvas>
<script>
var ca = document.getElementById("drawCanvas");
var cnt = ca.getContext("2d");
cnt.rect(22, 22, 152, 102);
cnt.stroke();
</script>
</body>
</html>
0 Comment(s)