14 Дек SVG с растровым изображением
Эта статья расскажет об SVG с привязкой к растровому изображению (JPEG, PNG, GIF и т.д.) с точным позиционированием второго относительно первого. Возможно, вы скажете: «Но ведь расположение элементов легче прописать на CSS». Но это не всегда правильно с точки зрения оптимизации кода и не так просто. Нам необходимо будет сначала позиционировать растровое изображение относительно SVG (или наоборот), а затем оба относительно других элементов. Но и это не все: для отзывчивой верстки придется переписывать размеры и положение этих элементов во всех медиа-запросах.
Поэтому легче изначально совместить векторную и растровую графику, то есть создать SVG со встроенным растровым изображением. Для этого нам потребуется векторный графический редактор (Adobe Illustrator или Corel Draw) и рисунок в формате PNG или JPEG (возможно использование любых растровых форматов вплоть до Base64).
Для нашего примера возьмем изображение телефона. Фронтальная и задняя его стороны — это одна иллюстрация в формате PNG. Обратите внимание на кнопку — там находится наш логотип, который мы планируем сделать интерактивным. При наведении он будет подсвечиваться, а по нажатию планируется некое событие (для примера сделаем переход к началу этой статьи). Логотип безусловно векторный, а все остальное — это неактивная подложка.
Экспорт SVG с растровой подложкой из Adobe Illustrator
В параметрах экспорта необходимо сделать расположение иллюстрации связанным, а не встроенным. Остальные опции нам не потребуются, кроме адаптивности. Далее работаем с кодом SVG в следующем порядке:
- Нам потребуется только код внутри тегов <svg>… </svg>. Копируем его и вставляем в нужное место на странице.
- Загружаем на сервер растровое изображение, которое служит подложкой. Его параметры width=’…’ height=’…’ должны быть точно такими же, как в коде SVG внутри тега <image>…</image>. Далее заменяем ссылку xlink:href=’…’ на адрес изображения на сервере.
- Задаем общий класс для всей иллюстрации после тега <svg>.
- Отдельным заливкам или их группам, которые будут интерактивными, также задаем свои классы или id. Например, наш логотип состоит из двух групп заливок: скобки <g class=’brackets’> и буква Т <g class=’letter’>, которые входят в общий класс <g id=’dt-logo’>.
- Важно! Над логотипом также есть прозрачный слой (<path d=’…’/>). Он включен в группу dt-logo, но не имеет собственного класса и заливки. Он нужен для того, чтобы при расположении курсора в промежутках между другими заливками свойства при наведении также работали.
- Пишем нехитрые ховер-эффекты на CSS (ниже вы увидите развернутый пример).
- Вставляем ссылку для группы <g id=’dt-logo’> (если требуется).
Результат
Получилось как раз то, чего мы добивались. Это точное позиционирование SVG с привязкой к растровому изображению. И мы сделали иллюстрацию в формате PNG частично интерактивной — то есть работает только часть изображения. Можете скопировать этот код себе в качестве примера:
See the Pen Phone with SVG button by Alexander Webmassa (@Webmassa) on CodePen.
Но зачем это все?
Может показаться, что это неоправданно сложный путь для создания интерактивного изображения. Можно просто наложить на иллюстрацию div-блок с иконкой или текстом. А если требуется изображение со множеством векторных элементов? Например такое:
See the Pen Bec des Rosses mountain with freeride lines by Alexander Webmassa (@Webmassa) on CodePen.
И помните, при этом оно должно быть отзывчивым. Тогда для всего изображения и каждого интерактивного элемента необходимо будет задавать размеры и положение в каждом медиа-запросе, а это уже гораздо сложнее.
Привязка растрового изображения к SVG решает следующие задачи:
- Интерактивность
- Точность позиционирования
- Наследование общих свойств SVG всеми элементами внутри изображения
- Отзывчивость
- Возможность использовать JS скрипты, как и в случае с div-блоками HTML
Недостаток, пожалуй, лишь один: отсутствие возможности динамического редактирования. Отдельные элементы SVG нельзя привязать к базе данных и менять их содержимое через CMS. Но обычно такие изображения делаются в единственном экземпляре для одной страницы и редактируются нечасто.
А в заключении мы можем показать вам страницу Контакты сайта Webmassa (для дисплеев >780px по ширине), где мы использовали одновременно SVG, PNG и iFrame для создания интерактивного изображения — для красоты и привлечения внимания посетителей. И вам советуем!