Which is best method to draw the graphics on the Web page (canvas or svg)?

Question

Canvas and svg both methods are used to draw the graphics on the Web page but i confused which i choose the method.

Answer 1

Canvas
- Elements are drawn programmatically
- Drawing is done with pixels
- Animations are not built in
- High performance for pixels-based drawing operations
- Resolution dependent
- No support for event handlers
- You can save the resulting image as .png or .jpg
- Well suited for graphic-intensive games

SVG
- Elements are part of the page's DOM (Document object model)
- Drawing is done with vectors
- Effects, such as animations are built in
- Based on standard XML syntax, which provides better accessibility
- Resolution independent
- Support for event handlers
- Not suited for game applications
- Best suited for applications with large rendering areas (for example, Google Maps)

Answer 2

Svg is scalable and perfect for icon ans logo images.

Answer 3

Svg builds a lot of interesting graphics, with the scalable graphics, you can build all kind of charts for data analysis on all medias. Study d3.js to know more.

Answer 4

I, personally prefer canvas, but it depends of your purposes.
Also, it's possible to remake SVG with a canvas but not the opposite, you just need a bit of programming and trigonometry knowledge ;)
But anyway, this is probably due to the fact I prefer making games and dislike both built in stuff and markup languages! ^^;

Answer 5

it's really depends what you want to do

Answer 6

SVG

Answer 7

Definitely SVG

Answer 8

IF you want to design logos or some shapes then svg is good
but for making games or stuff like that use canvas

Answer 9

This is very subjective and also out of topic (!), but :
My favorite kind of design is when drawings are made with pencils and papers on a table, then scanned and photoshoped to be integrated to the web page. It has many disadvantages, of course, but it's so crazy nice and alive compared to svg or canvas ...

Answer 10

when compared to canvas, SVG has better scalability i.e,printed with high quality resolution.,
but not suitable for game applications.

Answer 11

canvas and it is more powerful and faster

Answer 12

but the game need more options like touch things...
and with svg is hard to make

Answer 13

I'm preferring svg, because it doesn't work with pixels so you can make it small or big. it keeps its look on certain things when you wanna make a image.

Answer 14

depends on requirements
if you need to zoom an element than go for svg because it draw by vector so it can zoom for large scale
but if you don't need to zoom than you can go for canvas

Answer 15

SVG

Answer 16

what about webGL

Answer 17

i am sorry
you are right
svg is better

Answer 18

Yes;)

Answer 19

In my opinion canvas

Answer 20

svg is better than canvas