SVG's retained mode graphic display system allows you to create all the map details in HTML-like tags in the body and modify them in script by changing shape attributes.  By using a "retained mode" approach, client calls do not directly cause actual rendering, but instead update an internal model (typically a list of objects) which is maintained within the library's data space. This allows the library to optimize when actual rendering takes place along with the processing of related objects.  It is supported since IE9.
Canvas requires more code to accomplish the same task, because the shapes must be drawn in script and the body only contains the basic Canvas tag.  It is supported by most of the browsers.
SVG is strong and robust with built-in shape handling, while Canvas is fast and efficient for pixel manipulation. 
Combining two techniques 
Canvas to SVG
- Including Canvas as foreignObject into SVG
- Import Canvas bitmap data as image element into SVG using Canvas.toDataURL