What's the difference between SVG and Canvas?

Answer 1

Roughly speaking, SVG graphics are vector-based, meaning that, if the browser is resized, the image itself is also resized and redrawn, meaning that there's no loss of resolution. Canvas, on the other hand, is pixel-based –if the browser is resized, the image will also resize the pixels within, making the graphics somehow with less resolution quality.
Please check this useful Wikipedia entry:
https://en.m.wikipedia.org/wiki/Canvas_element#Canvas_versus_Scalable_Vector_Graphics_.28SVG.29

Answer 2

I posted a question about this and investigated some more after asking so I was able to write my own answer in future threads, you can check them out here😊, hope it helps:
https://www.sololearn.com/discuss/347237/?ref=app
https://www.sololearn.com/discuss/328912/?ref=app

Answer 3

SVG is vector based that means that its quality isn't affected when zoomed whereas Canvas is pixel based so its quality is affected when zoomed. Also, SVG generates 2D graphics whereas Canvas can generate 3D graphics too.

Answer 4

SVG are vector based
Canvas are pixel based

Answer 5

svg and canvas are both graphics
svg are vector based and canvas are pixel based

Answer 6

Please check also the "SVG vs. Canvas" in the HTML5 course in SoloLearn:
<quote>
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)
</quote>

Answer 7

svg are easy to use compare to canvas

Answer 8

SVG - Vector based, easy for coding
Canvas - Pixel based, relatively easy ...

Answer 9

basically svg is easy to use xml syntax graphics which is based on vector and also it's 2d.. Canvas... It's fully functional by JavaScript,and its faster,better... It's pixel based,so resolution is on our hands...And importantly its 3d... Anything u can imagine could be created using canvas

Answer 10

SVG is vector-based and use XML to work while Canvas is Pixel-based and use a scripting language like JavaScript to work.

Answer 11

SVG is just for simple quick graphics, while canvas is for all sort of simple and advanced graphics.