+ 5

What's the difference between SVG and Canvas?

17th May 2017, 12:21 AM
Tom keen
Tom keen - avatar
11 Respostas
+ 12
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
17th May 2017, 5:23 AM
Álvaro
+ 14
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
17th May 2017, 8:21 PM
Pao
Pao - avatar
+ 14
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.
21st May 2017, 6:22 AM
Biraj Patel
+ 7
SVG are vector based Canvas are pixel based
17th May 2017, 6:22 AM
NimWing Yuan
NimWing Yuan - avatar
+ 6
svg and canvas are both graphics svg are vector based and canvas are pixel based
18th May 2017, 11:00 AM
Ramanpreet Singh
Ramanpreet Singh - avatar
+ 3
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>
17th May 2017, 5:25 AM
Álvaro
+ 2
svg are easy to use compare to canvas
18th May 2017, 2:23 AM
Raz
Raz - avatar
+ 2
SVG - Vector based, easy for coding Canvas - Pixel based, relatively easy ...
22nd May 2017, 11:34 AM
Aditya Sutar
Aditya Sutar - avatar
+ 1
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
18th May 2017, 8:18 AM
Vikaash
Vikaash - avatar
+ 1
SVG is vector-based and use XML to work while Canvas is Pixel-based and use a scripting language like JavaScript to work.
22nd May 2017, 3:59 AM
Erick Mwenda Njagi
Erick Mwenda Njagi - avatar
+ 1
SVG is just for simple quick graphics, while canvas is for all sort of simple and advanced graphics.
23rd May 2017, 12:08 PM
rAsHtElL
rAsHtElL - avatar