Charts that use will have a hard dependency on JS, but it's necessary in cases where you have more data than can be rendered with SVG in a performant way.
I'm curious to what point we can push things with SVG. I recently needed to embed multiple animated SVGs into components in an Angular project. (A single canvas wasn't a straightforward option; unless I treated it as a spritesheet perhaps?) There was a noticeable performance impact on load; and significant CPU load caused by simple animations in the SVGs themselves.
TBH I'm not sure how much of the load slowdown was the data processing + angular rendering the dynamic SVGs and how much was the browser having to parse/render the generated SVG markup; but it felt like both contributed to the delay (I suppose this should actually be obvious from the performance data). From what I could find, the CPU load caused by animation seems to be a known issue: not all browsers optimise for animation in SVG (whether it's SMIL or CSS-based) - Chrome being a notable culprit...
I'm now looking at D3 for another project and much prefer the approach you've taken here: passing attributes into a dynamically created SVG via JS feels really verbose in comparison to writing them directly in the markup.
Anyway - thanks for the article and thanks for Svelte!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm curious to what point we can push things with SVG. I recently needed to embed multiple animated SVGs into components in an Angular project. (A single canvas wasn't a straightforward option; unless I treated it as a spritesheet perhaps?) There was a noticeable performance impact on load; and significant CPU load caused by simple animations in the SVGs themselves.
TBH I'm not sure how much of the load slowdown was the data processing + angular rendering the dynamic SVGs and how much was the browser having to parse/render the generated SVG markup; but it felt like both contributed to the delay (I suppose this should actually be obvious from the performance data). From what I could find, the CPU load caused by animation seems to be a known issue: not all browsers optimise for animation in SVG (whether it's SMIL or CSS-based) - Chrome being a notable culprit...
I'm now looking at D3 for another project and much prefer the approach you've taken here: passing attributes into a dynamically created SVG via JS feels really verbose in comparison to writing them directly in the markup.
Anyway - thanks for the article and thanks for Svelte!