What to choose for a hexagonal map - SVG or Canvas?

Question

JavaScript

The task is this - you need to draw a map of hexagons, one or more types of coloring, with the ability to display info graphically on them (for example, filling with dots of different intensities) and respond to a click. There can be quite a large number of hexes, up to several thousand, so the ability to implement scalability and scrolling will be a plus.
I did not like the implementation on divs - the borders of the zones are square, and on the borders of hexes, inaccuracies are possible when processing a click.
At first I thought to implement on canvas, but in the process of studying the issue I came across svg and thought about which technology would be more suitable in this case. Would love to hear other people's opinions :)
Also, I found different frameworks both for one technology and for another, is it worth using them for such a map, or is it easier to use native methods?

Answer 1

In SVG, of course, it is convenient that there will be no problems with processing clicks, but for performance, in any case, you will have to do some tricks with adding and removing extra hexes when scrolling and zooming. You can get more FPS on canvas.
If you have some kind of complex interactivity inside these hexes, everything changes and jumps - SVG is better. If not, and if there are a lot of hexes, then canvas.
On frameworks, you can make prototypes and see what is more convenient, what is faster. On vanilla.js then rewrite if the performance is not enough.

Answer 2

And this and that, they should be together. Read about Yandex maps.
svg paths, canvas rendering, before 2014 was exactly the same.
A frame, this is to quickly launch a project, they are suitable for a start, and further too. You are not Yandex) In general, why not use ready-made solutions?