Difference between SVG and HTML 5 Canvas

SVG: The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector-based graphics for the web. Unlike raster image (Ex .jpg, .gif, .png, etc.), a vector image can be scaled up or down to any extent without losing the image quality.

An SVG image is drawn out using a series of statements that follow the XML schema — that means SVG images can be created and edited with any text editor, such as Notepad. There are several other advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
        SVG Circle(Geeks For Geeks)
    </h2>
  
    <svg id="svgelem" height="200">
        <circle id="greencircle" cx="60"
            cy="60" r="50" fill="green" />
    </svg>
</body>
  
</html>

chevron_right


Output:

Canvas: The HTML element is used to draw graphics on the fly, via scripting (usually JavaScript). The element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML5 Canvas Tag</title>
</head>
  
<body>
    <h2>Canvas Square(Geeks For Geeks)</h2>
  
    <canvas id="newCanvas" width="100" 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, 100, 100);
    </script>
</body>
  
</html>

chevron_right


Output:

Difference between SVG and HTML5 Canvas:

SVG Canvas
Vector based (composed of shapes) Raster based (composed of pixel)
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.
Multiple graphical elements, which become the part of the page’s DOM tree. Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.