Сделать SVG образ в HTML кликабельной ссылкой: решение

Быстрый ответ

Если вам необходимо преобразовать SVG в кликабельную ссылку, оберните его в тег <a>:

<a href="https://www.example.com">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</a>

Теперь, при клике на SVG, вы будете перенаправлены на страницу https://www.example.com. Именно к этому мы и стремились!

Взаимодействие с SVG: указатели и события

В первую очередь, чтобы SVG не мешал обработке кликов, установите для его элементов свойство pointer-events: none;. Это обеспечит корректность работы SVG-ссылки.

SVG обязательно внутри ссылки

SVG должен быть вложен в тег <a>. Не забудьте задать для данного тега display: block;, чтобы гарантировать корректность обработки кликов. Например:

<a href="https://your-chosen-site.com" style="display: block; position: relative;">
  <svg height="100" width="100" style="pointer-events: none;">
    <!-- SVG оставляет ощущение летнего дня -->
  </svg>
</a>

Таким образом, вся площадь SVG становится кликабельной, и вы все делаете правильно!

Подробнее об этом расскажет наш спикер на видео

Совместимость с устаревшими браузерами: проблемы с IE

Пользователи старых версий Internet Explorer могут столкнуться с проблемами при работе с SVG. В этом случае рекомендуется разместить ссылку поверх изображения, используя приведенную ниже конструкцию:

<div style="position: relative;">
  <svg height="100" width="100">
    <!-- SVG, словно приглашающий в путешествие в прошлое -->
  </svg>
  <a href="https://www.timetravel-tours.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;"></a>
</div>

Расширения браузера для блокировки рекламы

Обратите внимание на такие инструменты, как AdBlock, которые могут влиять на функционирование ваших ссылок. Для проверки убедитесь, что ваш SVG корректно отображается даже при активном блокировщике рекламы.

Совместимость: не забывайте об альтернативах

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

<object data="your-svg-image.svg" type="image/svg+xml">
  <img src="your-plan-b-image.png" alt="Запасной вариант" />
</object>

Настройки ссылок и SEO

Параметры URL в ссылках

Когда SVG выступает кликабельной ссылкой, обратите внимание на передачу URL-параметров. Пример:

<a href="https://www.yachting-world.com/yacht?name=titanic">
  <svg height="100" width="100">
    <!-- SVG покоряет глубины океана -->
  </svg>
</a>

Сервер должен быть настроен для обработки подобных запросов.

Доступность: SVG для всех

SVG должен быть доступен для всех категорий пользователей. Для этого используйте атрибуты aria-label или title.

Визуализация

Рассмотрим пример SVG, служащего кликабельной ссылкой:

<a href="http://www.example.com">
  <svg width="100" height="100">
    <rect width="100" height="100" style="fill: blue;"/>
    <!-- Не забывайте о веселых надписях! 😉 -->
    <text x="10" y="50" fill="white">НАЖМИ</text>
  </svg>
</a>

Отлично! Теперь перед вами SVG, готовый к использованию в качестве кликабельного элемента "приветствия", замкнутый в тег <a>.

Полезные материалы

1. <a>: Элемент-ссылка – HTML: Гипертекстовый язык разметки | MDN — Полное руководство по элементам-ссылкам в HTML.
2. <a> – SVG: Масштабируемая векторная графика | MDN — Документация по кликабельным элементам в SVG.
3. Использование SVG | CSS-Tricks — Узнайте, насколько гибок SVG.
4. SVG с поддержкой режима высокой контрастности | CSS-Tricks — Обеспечиваем доступность SVG в режиме высокой контрастности.
5. Новые вопросы по тегу 'svg+hyperlink' – Stack Overflow — Советы сообщества по использованию SVG как ссылки.
6. Как масштабировать SVG | CSS-Tricks — Все о масштабировании SVG.