Menu
Why do we need the html5 canvas element, when the same can be achieved through embedded svg?
874
SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
To draw SVG onto canvas, you need to use SVG image. Firstly, use the <foreignObject> element which contains the HTML. After that, you need to draw the SVG image into the canvas.
<svg> elementIn HTML5, svg is a tag to produce svg elements. SVG is an inline-block level element. Inside svg element, number of methods for drawing text, circle, boxes, paths, and graphics images are created. SVG element of default height is 150 and the default width is 300.
SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
