Как сделать SVG карту?

Question

[Абра Кадабра]

Добрый вечер!
Дали мне вот такую карту на SVG и сказали анимировать наведения на определенные области.
(Там никакого кода, просто нарисованная карта)

Проблема в том, что при появлении на странице она просто начинает лагать. В чем может быть дело?
Можно ли сделать что-то с этой картой, что бы она начала работать по подобию этой?

1) Там все описано очень доходчиво, вы правы. Но дело не в том. Почему эта карта вызывает проблемы?
Может ли это быть из-за того, что она слишком детализирована? Ее код составляет 26т. строк в начальном виде. По ссылке я оставил только 14.
2) Начинает тормозить при прокрутке до уровня карты на странице (любой браузер). Что бы увидеть торможение - перетягивайте окна редактора в jsfiddle.

Comments

[d'Ivan]

Там ведь пример кода дан: codepen.io/dudleystorey/pen/vNoeyW Пробовал ли разобраться в нём?

[d'Ivan]

Не указано при каких условиях "лагает".

Answer 1

[Adamos]

Сама картинка сделана не руками. Карта нарисована не таким большим количеством точек - все могло бы летать.
Но. Приглядитесь к тем регионам, которые в мелкий горошек. Каждая эта горошина - графическая окружность. Конечно, рисунок получается перегруженным элементами. Достаточно сделать заливку другого цвета или картинкой в горошек - и все станет куда вменяемее.

Comments

[Абра Кадабра]

Спасибо, действительно, просто убрал точки.

Answer 2

[Нерон Лордов]

Оптимизировать надо, как уже посоветовал Adamos. В иллюстраторе есть необходимый функционал для упрощения кривых. Но за результатом нужно будет следить - чаще всего уродство получается. И, порой, быстрее будет ручками аккуратно всё перерисовать.
26 тысяч строк - это пипец) Сколько там в килобайтах получается? А вообще вектор при своем преимуществе в качестве гораздо тормознутей растра. По опыту говорю. Ворочать растровый макет на гигабайт гораздо легче, чем вектор на 20-30 мегабайт.

Comments

[Абра Кадабра]

Получилось почти 2мб.
Да, вы правы. Но если такую карту делать пнгшками, то нужно будет юзать "map", а это уже лет 10 как не круто. Или вы не это имели ввиду?

Макет я почистил - все помогло.
Сократил до 1к строк.

[Нерон Лордов]

Да это я просто к слову. К тому, что за вектором надо следить. Растр ведь сохранил в нужном качестве, шлепнул на сайт и всё, больше головняка нет - у всех всё будет летать. А 1000 строк сколько теперь весят, ради интереса?

[Абра Кадабра]

Сейчас 77кб.
И, конечно, никаких проблем :).
Да, я согласен с простотой растра. Но такие яркие анимации с ним не сделаешь.
+ Использовали непонятную версию Илюстратора, при создании карты. Там было CDATA на половину файла.

Answer 3

[d'Ivan]

Нужно прореживать среди точек ломаной линии границ, чтобы облегчить вес объекта. Simplify.js в помощь.

Comments

[Абра Кадабра]

Спасибо, я, так же, попробую этот вариант.
Но убрать круги было достаточно.