At some point in your wild-tech-y life, you had to use an animation. According to the complexity of it, you would end up using simple CSS or JS animations either complex SVG or CANVAS animations. A decision has been made, was it the right one? Well, let’s see.


First of all, if you want a simple yet a bit complex animation, the performance of SVG or CANVAS is not that relevant, therefore, it’s a matter of preference.




Canvas was added in the glorious HTML5. As we know, Canvas is restricted as it only can be manipulated through JS.




It can be used to literally draw shapes and graphs, make ridiculously complex photo compositions, obviously, you can create animations and the best out of best you can develop live video processing and rendering.


As Thor has his hammer, canvas has WebGL. WebGL (web graphic library) is a powerful JS API which can be used for rendering interactive 3D and 2D graphics and elements.  The canvas element is used by the API to draw/create hardware-accelerated graphics.



To be honest, the syntax is quite straightforward and easy to read. Let’s have a look:



"<canvas id="canvas"></canvas>"


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

The output will be a green box. Easy.

Canvas provides a high-performance element best suited to rendering raster graphics for interactive embeds or games such as sprites, image editing and applications that require per-pixel manipulation abilities. Unfortunately, the performance of canvas apps degrades as resolutions increase and wouldn’t be recommended for use in full-screen user interfaces.





SVG(scalable vector graphics) is used as a tool to define graphics for the Web.  The SVG element has its own viewport and coordinate system. The SVG only permites specific content elements such as:< a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> and its graphic elements <animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard>, <mpath>, <set>, <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>.




SVG is resolution-independent, thereby the word vector, making it ideal for rendering cross-platform UI /UX components, animations and applications where each element needs to be accessible via the DOM.

SVG is truly powerful in-browser, as it is vector based which provides a high-quality experience but it can also be paired with other multimedia elements, audio tags and video.

The viewBox attribute establishes a logical coordinate system which the SVG picture’s coordinates are relative to. In this case, our picture is laid out in a 100 by 100 viewport.

The preserveAspectRatio attribute specifies that the aspect ratio must be preserved by centring the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.


The syntax is easy-to-read as well:

<svg id="SearchIcon" viewBox="0 0 3000.29 592.05" xmlns="">   

The output is gonna be a search-icon like this.

But it’s an SVG element. Not an image! Which can be used for some sick UI interactivity like this example:


There are some disadvantages. First of all, the file size could grow very fast, if the object has a large number of small elements. Second of all, as you can see above, it’s impossible to read the graphics object.


Let’s compare them.




As we know now, visually talking SVGs are proper sharp even if you use them as a file or code.


For example:

<img src="image.svg" alt="image">
.element {
background-image: url(/images/image.svg);
<svg id="SearchIcon" viewBox="0 0 3000.29 592.05" xmlns="">    <path d="M2409,211.5c0,116.25,94.24,210.5,210.5,210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0,1,0,2908.47,440L2797.24,328.73c-.59-.59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24,2409,211.5M2482,211.5A137.53,137.53,0,1,1,2619.5,349,137.53,137.53,0,0,1,2482,211.5"></path>    </svg>


No matter what size you resize the browser/window the quality will remain the same. What makes SVGs truly flexible you can increase their size beyond their natural.

There are three ways to animate SVGs. CSS and SMIL are the “declarative” methods, and of course JavaScript.


Loading Time


Based on this well-researched article we can simply understand that whether or not you use Canvas or SVG mostly depends on your specific application.

A graphics-intensive game, where many objects are redrawn all the time is probably best implemented in Canvas. On the other hand, applications like map viewers may involve large rendering areas and might lend themselves better to SVG.


Key differences



  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games



  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game application




Here are some personal examples:






  • SVG is probably better for applications and apps with few items
  • Canvas is better for thousands of objects and careful manipulation, but a lot more code (or a library) is needed to get it off the ground


Please share if you find it useful!