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

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

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

1) Там все описано очень доходчиво, вы правы. Но дело не в том. Почему эта карта вызывает проблемы?
Может ли это быть из-за того, что она слишком детализирована? Ее код составляет 26т. строк в начальном виде. По ссылке я оставил только 14.
2) Начинает тормозить при прокрутке до уровня карты на странице (любой браузер). Что бы увидеть торможение - перетягивайте окна редактора в jsfiddle.
  • Вопрос задан
  • 946 просмотров
Решения вопроса 1
Adamos
@Adamos
Сама картинка сделана не руками. Карта нарисована не таким большим количеством точек - все могло бы летать.
Но. Приглядитесь к тем регионам, которые в мелкий горошек. Каждая эта горошина - графическая окружность. Конечно, рисунок получается перегруженным элементами. Достаточно сделать заливку другого цвета или картинкой в горошек - и все станет куда вменяемее.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Оптимизировать надо, как уже посоветовал Adamos. В иллюстраторе есть необходимый функционал для упрощения кривых. Но за результатом нужно будет следить - чаще всего уродство получается. И, порой, быстрее будет ручками аккуратно всё перерисовать.
26 тысяч строк - это пипец) Сколько там в килобайтах получается? А вообще вектор при своем преимуществе в качестве гораздо тормознутей растра. По опыту говорю. Ворочать растровый макет на гигабайт гораздо легче, чем вектор на 20-30 мегабайт.
Ответ написан
2ord
@2ord
продвинутый чайник
Нужно прореживать среди точек ломаной линии границ, чтобы облегчить вес объекта. Simplify.js в помощь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы