I’ve been looking into SVG rendering on canvas and a lot of people recommend using canvg. I’m not trying to dynamically generate the SVG, manipulate it in any special way, or use any advanced SVG features. So, as far as I can tell for basic rendering in modern browsers you can just render the SVG as an image.
You should probably prefetch or inline the SVG assets, but that’s beyond the scope here.
If you’re on a retina screen the first thing you’ll notice is that it’s blurry. Luckily it’s an easy fix with three simple steps.
An added benefit with the scaling is that you can apply a multiplier for user-specified scaling, via zoom or mousewheel events. And since it’s using SVG it stays incredibly clear.