How to make an SVG map?

Question

css

Good evening!
They gave me this SVG map and told me to animate hovering over certain areas.
(There is no code, just a drawn map)
The problem is that when it appears on the page, it just starts to lag. What can be wrong?
Is it possible to do something with this card so that it starts working like this one ?
1) Everything is described very intelligibly there, you are right. But that's not the point. Why is this card causing problems?
Could this be because it's too detailed? Her code is 26t. lines in its original form. By reference, I left only 14.
2) Starts to slow down when scrolling to the map level on the page (any browser). To see the slowdown, drag the editor windows to jsfiddle.

Answer 1

The picture itself was not made by hand. The map is not drawn with so many points - everything could fly.
But. Take a closer look at those regions that have small polka dots. Each of these peas is a graphic circle. Of course, the picture is overloaded with elements. It is enough to make a fill of a different color or a picture with polka dots - and everything will become much more sane.

Answer 2

It is necessary to optimize, as Adamos already advised . Illustrator has the necessary functionality to simplify curves. But the result will need to be monitored - most often ugliness is obtained. And, sometimes, it will be faster to carefully redraw everything with pens.
26 thousand lines is a pipets) How much is it in kilobytes? In general, the vector, with its advantage as a much slower raster. I speak from experience. It is much easier to move a bitmap layout per gigabyte than a 20-30 megabyte vector.

Answer 3

It is necessary to thin out among the points of the polyline of the borders in order to lighten the weight of the object. Simplify.js to the rescue.