I need to create some sort of interactive map. So I did a quick investigation of canvas and svg stuff and thought I’d document my findings. I am by no means an authority on these matters, and my knowledge is based on an evening on reading/trying stuff out. Mostly I’m summarizing stuff I read elsewhere.
Hey what’s Canvas?
Canvas is just a bitmap drawing surface. In the DOM it’ll just be one element.
Canvas is usable since ie9, most other moderns browsers seem to support it:
For ie<9 you may try excanvas: http://code.google.com/p/explorercanvas/
Supposedly it can’t simulate the api 100%.
Most canvas libraries give you some svg-like features, like a display hierarchy and easy to use event listeners. I.e. you can draw shapes and retain references to them, add listeners to the references and so on. Most of these libararies offer animation support too, so you can tween your heart out.
@kangax has made a comparison of libraries:
The top five canvas libraries according to github watchers are:
Hey what’s SVG?
SVG is vector graphics format. Each element (shape) in an svg will be part of the DOM.
SVG is usable since ie9, most other moderns browsers seem to support it, besides the android stock browser before 3.0: http://caniuse.com/svg
ie<9 supports vml which is similar in functionality (although removed in ie10).
- d3.js – Consider this for diagrams/graphs/etc. It’s geared towards data visualization and based on svg.
- Raphael – Provides an it’s own api for producing svg (or vml if ie<9). You can do animations etc.
It can’t read in svg though, which kind of sucks if you have a neat svg file. There are conversion tools (svg to raphael js-code) in existence, but it’s still manual work.
- jQuery-SVG – jQuery plugin for dealing with SVG, but provides no fallback to vml.
When should I use Canvas and when should I use SVG?
Use svg for:
- Static images (svgs are great for responsive/fluid layouts)
- Vector graphics (e.g. produced in illustrator/inkscape, exported as svg)
- Stuff which benefits from DOM integration (fancy UI-components?)
- Easier debugging since you can view that stuff in a dom-inspector
Use canvas for:
- Mutable bitmaps
- Your fancy graphically intense demos
- Stuff for which svg performance won’t cut it. (Thousands of rendered elements and a lot of real-time updates)
Of course the case might be you happen to know one of those canvas libraries really well, in such a case you’d be more productive using canvas vs. svg, if it meets all your needs.
So which one will you use for your interactive map?
Well I’m not done yet but it looks like none of the above.
I should be just fine with basic html/css with some creative positioning.
It has the best browser support and I won’t really need any of those fancy features.
According to some quick tests, pixel based scaling will look good enough for my use case.
Given some neat svg map and better browser support the svg stuff would probably be a cleaner implementation choice.