• Как сделать интерактивную карту?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    SVG и только SVG.

    Ну, можно, конечно, делать всякие абсолютно позиционированные прозрачные блоки на HTML, но там это сложнее позиционировать в силу отсутствия viewBox, как у SVG.

    Кроме того, блоки на HTML не могут иметь произвольную форму, а только прямоугольную (clip-path не в счёт, с ним ещё сложнее будет реализовать), что вызовет проблемы при совмещении нескольких объектов произвольной формы вместе. Точнее, будет проблема с зоной взаимодействия этих объектов при наведении мышки из-за наложения прямоугольников.

    Все такие интерактивные карты делают с помощью SVG, что как бы намекает.

    https://medium.com/@mattcroak718/creating-an-inter...

    Я делал такую карту с помощью Boxy SVG:
    https://boxy-svg.com

    Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.
    Ответ написан
    Комментировать
  • Качество специально уменьшеной картинки — самообман?

    Попробуйте уменьшать шагами (сперва до 350х350, потом до 300х300 и т.п.). Дело в том, что при уменьшении неизбежно появляются искажения, т.к. изображение растровое. Если уменьшать пошагово, количество искажений можно свести к минимуму (связано с алгоритмом масштабирования изображений, причем чем меньше шаг, тем качественнее в итоге будет уменьшенный вариант). А в браузере механизм рендеринга (в первом случае, когда изображение 400х400) работает с не уменьшенной картинкой, что и обеспечивает более высокое качество.

    P.S. Также существуют специализированные программы для уменьшения изображений
    Ответ написан
    Комментировать