cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv headernumbered-list123split-screen
user profile image

A quick and dirty demo comparing the time taken to render an identical image in SVG and canvas. Both using the same dataset of lat/long coordinates loaded via a separate pen. 1 canvas element vs 14,000 SVG rects. Hmmm....


  1. I'm not sure it's a good comparison example, SVG is of course not adapted to render pixels.

  2. @yukulele Thanks for the comment. I wasn't trying represent individual pixels with the SVG rects - I just made them tiny so they'd fit on the screen.

    What I've learnt is that each SVG rect creates a dom node which uses a fragment of memory. So in cases like this where there are thousands of 'data points' to represent rendering an SVG be will very processor intensive compared to canvas.

    However, it's a lot harder to assign data to and get data back from specific sections of a canvas element.

    This is the project I was working on at the time. I ended up using canvas to draw the map and SVG rects with zero opacity to trigger the tool-tips on hover.

    It turns out that invisible SVGs render super quick - so I guess it's painting the screen, rather that building the dom that takes the time. Interesting!

  3. @chris-creditdesign I've also found canvas to be faster than svg where there's a significant amount of dom elements. Unfortunately, using canvas pretty much negates all the benefits of using d3. As you know, one of the core ideas of d3 is each datum is bound to a dom element. One trick I've used is before transitioning a dom heavy svg graph, i'd set certain elements invisible, and fade them back in after the transition is finished.

  4. @lukezhang Thanks very much for the tip. I just found this discussion on Canvas vs. svg in Rotating world maps. Mike Bostock points out that SVG is a lot easier to debug than canvas too.

  5. svg element is dom element, if only you have big amount of dom in your page, it will be slow. So in this test, canvas is winner.
    The advantage of svg is, you can do operation on it easily, like adding event, animation. If you do another test to move the elements created by canvas and svg. I think svg will be winner.

  6. This is a concern and I just noticed the comment made yesterday on stackoverflow under the topic, Are there any HTML5 UI frameworks that render to canvas instead of using HTML elements?

  7. @zoomclub Wow. That's very interesting. I've often wondered about this since conceptually everything we build renders as images on the screen anyway. I'm looking forward to giving Zebra a try.

    Fast forward to 2015: Adobe release FlashCanvas and we're all back building zippy intro sequences in the timeline.

  8. Nice to see the difference. But I wonder how you manged to upload the latlong_2.js asset?

  9. @pimskie Hi, because I'm a pro member I can upload script files as assets. It can also be done by placing the javascript in an empty pen and then linking to the pen with '.js' added to the URL. For instance http://codepen.io/chris-creditdesign/pen/BIADJ.js will load just the javascript from this pen.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.