3 ms·
I believe SVG and canvas both have strengths, and weaknesses, and should be used where it makes the most sense for each technology. When it comes to charts, SVG
by rikroots 4y ago
I believe SVG and canvas both have strengths, and weaknesses, and should be used where it makes the most sense for each technology. When it comes to charts, SVG has an obvious benefit in that it comes with responsiveness built-in, and is far easier to style (and animate) via CSS. More importantly, but rarely mentioned, SVG is far more accessibility-friendly than the canvas element[1].
That said, I was also surprised by the assertion "use the wrong technologies for illustration (canvas)". It takes a lot more work, but canvas based charts can be made to be responsive, interactive and accessible[2][3].
[1] - CSS-tricks article on SVG and accessibility - https://css-tricks.com/accessible-svgs/ https://css-tricks.com/accessible-svgs/
[2] - I outlined how someone could build a charting library based on my JS canvas library in a couple of lessons starting here - https://scrawl-v8.rikweb.org.uk/learn/eighth-lesson/ https://scrawl-v8.rikweb.org.uk/learn/eighth-lesson/
[3] - The final result from the above lessons can be seen here - https://codepen.io/kaliedarik/project/editor/AMVKPx https://codepen.io/kaliedarik/project/editor/AMVKPx - suggested improvements to the lessons, and the UX of the result, are always welcome.
- adrianba 4y agoI've been using Chartist for the last couple of years for line charts. The ability to style with CSS has been a useful benefit. For example, I have dark/light mode just by setting a class on the body element of the page and this flows throughout the site including the graphs with no extra effort.