HTML5 Canvas vs SVG vs div

Question

What is the best approach for creating elements on the fly and being able to move them around  For example  let s say I want to create a rectangle  circle and polygon and then select those objects and move them around   I understand that HTML5 provides three elements that can make this possible  svg  canvas and div  For what I want to do  which one of those elements will provide the best performance   To compare these approaches  I was thinking of creating three visually identical web pages that each have a header  footer  widget and text content in them  The widget in the first page would be created entirely with the canvas element  the second entirely with the svg element  and the third with the plain div element  HTML and CSS

User · Answer

Knowing the differences between SVG and Canvas would be helpful in selecting the right one.

Canvas

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

SVG

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

User · Answer

To add to this  I ve been doing a diagram application  and initially started out with canvas   The diagram consists of many nodes  and they can get quite big   The user can drag elements in the diagram around   What I found was that on my Mac  for very large images  SVG is superior  I have a MacBook Pro 2013 13  Retina  and it runs the fiddle below quite well   The image is 6000x6000 pixels  and has 1000 objects  A similar construction in canvas was impossible to animate for me when the user was dragging objects around in the diagram   On modern displays you also have to account for different resolutions  and here SVG gives you all of this for free     Fiddle  http   jsfiddle net knutsi PUcr8 16   Fullscreen  http   jsfiddle net knutsi PUcr8 16 embedded result   var wiggle factor   0 0  nodes           create svg  var svg   document createElementNS  http   www w3 org 2000 svg    svg    svg setAttribute  style    border  1px solid black    svg setAttribute  width    6000    svg setAttribute  height    6000     svg setAttributeNS  http   www w3 org 2000 xmlns     xmlns xlink        http   www w3 org 1999 xlink     document body appendChild svg     function makeNode wiggle        var node   document createElementNS  http   www w3 org 2000 svg    g        var node x    Math random     6000       var node y    Math random     6000       node setAttribute  transform    translate     node x          node y                circle      var circ   document createElementNS  http   www w3 org 2000 svg    circle        circ setAttribute   id   cir       circ setAttribute   cx   0    px       circ setAttribute   cy   0    px       circ setAttribute   r   100px        circ setAttribute  fill    red        circ setAttribute  pointer-events    inherit           text      var text   document createElementNS  http   www w3 org 2000 svg    text        text textContent    This is a test                node appendChild circ       node appendChild text        node x   node x      node y   node y       if wiggle          nodes push node      return node        populate with 1000 nodes  for var i   0  i  lt  1000  i          var node   makeNode true       svg appendChild node         make one mapped to mouse  var bnode   makeNode false   svg appendChild bnode    document body onmousemove function event       bnode setAttribute  transform   translate              event clientX   window pageXOffset                    event clientY   window pageYOffset             setInterval function         wiggle factor    1 60      nodes forEach function node             node setAttribute  transform    translate                                 Math sin wiggle factor    200   node x                                                                  Math sin wiggle factor    200   node y                                                      1000 60

User · Answer

While googling I find a good explanation about usage and compression of SVG and Canvas at http   teropa info blog 2016 12 12 graphics-in-angular-2 html  Hope it helps         SVG  like HTML  uses retained rendering  When we want to draw a    rectangle on the screen  we declaratively use a  element in our   DOM  The browser will then draw a rectangle  but it will also create   an in-memory SVGRectElement object that represents the rectangle  This   object is something that sticks around for us to manipulate     it is   retained  We can assign different positions and sizes to it over time    We can also attach event listeners to make it interactive    Canvas uses immediate rendering  When we draw a rectangle  the browser immediately renders a rectangle on the screen  but there is   never going to be any  rectangle object  that represents it  There s   just a bunch of pixels in the canvas buffer  We can t move the   rectangle  We can only draw another rectangle  We can t respond to   clicks or other events on the rectangle  We can only respond to events   on the whole canvas           So canvas is a more low-level  restrictive API than SVG  But there s a   flipside to that  which is that with canvas you can do more with the   same amount of resources  Because the browser does not have to create   and maintain the in-memory object graph of all the things we have   drawn  it needs less memory and computation resources to draw the same   visual scene  If you have a very large and complex visualization to   draw  Canvas may be your ticket

User · Answer

I agree with Simon Sarris s conclusions   I have compared some visualization in Protovis  SVG  to Processingjs  Canvas  which display   2000 points and processingjs is much faster than protovis    Handling events with SVG is of course much easer because you can attach them to the objects  In Canvas you have to do it manually  check mouse position  etc  but for simple interaction it shouldn t be hard    There is also the dojo gfx library of the dojo toolkit  It provides an abstraction layer and you can specify the renderer  SVG  Canvas  Silverlight   That might be also an viable choice although I don t know how much overhead the additional abstraction layer adds but it makes it easy to code interactions and animations and is renderer-agnostic    Here are some interesting benchmarks    http   svbreakaway info tp php jan21a http   www eleqtriq com 2010 02 canvas-svg-flash  http   smus com canvas-vs-svg-performance

User · Answer

While there is still some truth to most of the answers above  I think they deserve an update   Over the years the performance of SVG has improved a lot and now there is hardware-accelerated CSS transitions and animations for SVG that do not depend on JavaScript performance at all  Of course JavaScript performance has improved  too and with it the performance of Canvas  but not as much as SVG got improved  Also there is a  new kid  on the block that is available in almost all browsers today and that is WebGL  To use the same words that Simon used above  It beats both Canvas and SVG hands down  This doesn t mean it should be the go-to technology  though  since it s a beast to work with and it is only faster in very specific use-cases    IMHO for most use-cases today  SVG gives the best performance usability ratio  Visualizations need to be really complex  with respect to number of elements  and really simple at the same time  per element  so that Canvas and even more so WebGL really shine    In this answer to a similar question I am providing more details  why I think that the combination of all three technologies sometimes is the best option you have

User · Answer

For your purposes  I recommend using SVG  since you get DOM events  like mouse handling  including drag and drop  included  you don t have to implement your own redraw  and you don t have to keep track of the state of your objects  Use Canvas when you have to do bitmap image manipulation and use a regular div when you want to manipulate stuff created in HTML  As to performance  you ll find that modern browsers are now accelerating all three  but that canvas has received the most attention so far  On the other hand  how well you write your javascript is critical to getting the most performance with canvas  so I d still recommend using SVG

User · Answer

Just my 2 cents regarding the divs option   Famous Infamous and SamsaraJS  and possibly others  use absolutely positioned non-nested divs  with non-trivial HTML CSS content   combined with matrix2d matrix3d for positioning and 2D 3D transformations  and achieve a stable 60FPS on moderate mobile hardware  so I d argue against divs being a slow option   There are plenty of screen recordings on Youtube and elsewhere  of high-performance 2D 3D stuff running in the browser with everything being an DOM element which you can Inspect Element on  at 60FPS  mixed with WebGL for certain effects  but not for the main part of the rendering

User · Answer

The short answer   SVG would be easier for you  since selection and moving it around is already built in  SVG objects are DOM objects  so they have  click  handlers  etc   DIVs are okay but clunky and have awful performance loading at large numbers   Canvas has the best performance hands-down  but you have to implement all concepts of managed state  object selection  etc  yourself  or use a library     The long answer   HTML5 Canvas is simply a drawing surface for a bit-map  You set up to draw  Say with a color and line thickness   draw that thing  and then the Canvas has no knowledge of that thing  It doesn t know where it is or what it is that you ve just drawn  it s just pixels  If you want to draw rectangles and have them move around or be selectable then you have to code all of that from scratch  including the code to remember that you drew them   SVG on the other hand must maintain references to each object that it renders  Every SVG VML element you create is a real element in the DOM  By default this allows you to keep much better track of the elements you create and makes dealing with things like mouse events easier by default  but it slows down significantly when there are a large number of objects  Those SVG DOM references mean that some of the footwork of dealing with the things you draw is done for you  And SVG is faster when rendering really large objects  but slower when rendering many objects   A game would probably be faster in Canvas  A huge map program would probably be faster in SVG  If you do want to use Canvas  I have some tutorials on getting movable objects up and running here   Canvas would be better for faster things and heavy bitmap manipulation  like animation   but will take more code if you want lots of interactivity   I ve run a bunch of numbers on HTML DIV-made drawing versus Canvas-made drawing  I could make a huge post about the benefits of each  but I will give some of the relevant results of my tests to consider for your specific application   I made Canvas and HTML DIV test pages  both had movable  nodes   Canvas nodes were objects I created and kept track of in Javascript  HTML nodes were movable Divs   I added 100 000 nodes to each of my two tests  They performed quite differently   The HTML test tab took forever to load  timed at slightly under 5 minutes  chrome asked to kill the page the first time   Chrome s task manager says that tab is taking up 168MB  It takes up 12-13  CPU time when I am looking at it  0  when I am not looking   The Canvas tab loaded in one second and takes up 30MB  It also takes up 13  of CPU time all of the time  regardless of whether or not one is looking at it   2013 edit  They ve mostly fixed that   Dragging on the HTML page is smoother  which is expected by the design  since the current setup is to redraw EVERYTHING every 30 milliseconds in the Canvas test  There are plenty of optimizations to be had for Canvas for this   canvas invalidation being the easiest  also clipping regions  selective redrawing  etc   just depends on how much you feel like implementing   There is no doubt you could get Canvas to be faster at object manipulation as the divs in that simple test  and of course far faster in the load time  Drawing loading is faster in Canvas and has far more room for optimizations  too  ie  excluding things that are off-screen is very easy    Conclusion    SVG is probably better for applications and apps with few items  less than 1000  Depends really  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  HTML Divs are clunky and do not scale  making a circle is only possible with rounded corners  making complex shapes is possible but involves hundreds of tiny tiny pixel-wide divs  Madness ensues

[javascript] HTML5 Canvas vs. SVG vs. div

Examples related to javascript

Examples related to html

Examples related to svg

Examples related to html5-canvas