Choosing Canvas or SVG
You have already seen some benefits and some challenges to overcome when working with either of the two rendering methods. This section is supposed to summarize the most important differences. As such, it should give you a good understanding of what to use in which circumstance. Note, that I am juxtaposing SVG and Canvas rather than HTML and SVG with Canvas. It seems appropriate to focus on SVG as it is D3's main building block due to its visualization advantages. However, the same logic applies to the equally retained HTML.
Reasons to choose SVG
Let's first look at the SVG benefits:
- SVG is a vector-based graphics system. It allows resolution independent drawings you can scale without affecting quality.
- You can easily access elements in the DOM to move, change, or add interactivity.
- You can style with CSS.
- D3 works closely with the DOM, allowing for concise operations such as element selection and styling in a single pass and declarative animations with SVG.
- SVG is accessible...
