Jump to content

Difference Between Canvas and SVG Elements.


Recommended Posts

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? 

Link to comment
Share on other sites

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>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
      <title>HTML5 SVG</title>
      <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" />

Example of Canvas:

<!DOCTYPE html>
      <title>HTML5 Canvas Tag</title>
      <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';

Difference between them:


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.


Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...