ArjunKumar Posted May 22, 2020 Share Posted May 22, 2020 Hello Everyone, I am learning HTML5 for my upcoming interview and I am confuse to understand the difference between canvas and svg elements. I know in API animation, Canvas has no provision for API animation. SVG, on the contrary, is capable of API animation. I want to know about dependency and scalability between both of them. Can anyone know about it? Quote Link to comment Share on other sites More sharing options...
rohanjoshi0894 Posted May 27, 2020 Share Posted May 27, 2020 The<canvas> element is a container for graphics. SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG is vector based and composed of shapes Example of SVG Tags: <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG</title> </head> <body> <h2 align = "center">HTML5 SVG Circle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" /> </svg> </body> </html> Example of Canvas: <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script>https://hackr.io/blog/best-html5-interview-questions </body> </html> Difference between them: SVG HTML Canvas SVG has better scalability. So it can be printed with high quality at any resolution Canvas has poor scalability. Hence it is not suitable for printing on higher resolution SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG can be modified through script and CSS Canvas can be modified through script only SVG is vector based and composed of shapes. Canvas is raster based and composed of pixel. For more information you can check it out Here. ArjunKumar 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.