Can we use both SVG and canvas tag on same page?

Answer 1

Yes, you can.

Answer 2

Yeah Sure

Answer 3

Yeah, totally. There are appropriate scenarios to use each, sometimes it is best to use Canvas, sometimes SVG and sometimes both.

- Canvas is a tag in HTML you can paint on, you can tell it to paint shapes, to spray pixels and it becomes a bitmap, these pixels are manipulated with code. Once you've done that it forgets about it, that's why they call it an "immediate mode" graphics, a "fire and forget model" meaning it has no context as to what was done.

USE CASES: When there are too many objects to put in the screen, with Canvas you can easily spray them all.

- SVG on the other hand is part of the document, they call it a "retained mode" meaning all the shapes and paths are retained in memory, they also benefit from the ability to style them with CSS, you can target individual elements for events. One cool thing is that if you zoom in or if you are in a large monitor it will not rasterize (like Canvas does)

USE CASES: As full documents, as images, logos, for rich, static or animated filter effects, as CSS images, visualizing data (charts, maps, graphs), specially if the user is manipulating data, so interactivity is key.

- Both SVG and Canvas. For example, if you want to create a world map and you want to put interactivity to it, you can create it with SVG, this way you can specify some hover effects on each country so they get highlighted individually, SVG comes in handy if you wanted to change a small part of the world map. Using Canvas at the same time will help you add/layer a weather map made of lots of clouds on top of the SVG world map and animate it.

Answer 4

@Tim aww, I'm glad you find them useful 😊 I think the "why" is always the juicy part of an answer, and examples are key too ☺

Answer 5

@Paola, you always explain everything in so much detail.. It's very helpful! Thank you.(:

Answer 6

very nice explanation paola

Answer 7

yes