Вставка svg в html5. Зачем вообще нужен SVG? Оформление содержимого с помощью свойства CSS all
03.05.2019
Дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
Я вам больше скажу: SVG - это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу - становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого - особенности.
Первый и самый простой - элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку - браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ - фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите - результат будет таким же, как с : за стеклом, но внутри что-то работает.
.picture {
background-image: url(picture.svg);
}
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ, через
На самом деле, вместо можно даже использовать
За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.
Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное . Достаточно вспомнить, что когда-то через вставлялись Flash-ролики. Спросите у родителей, что это такое.
Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.
Квадрат
С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты - ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях .
Минус в том, что такие картинки не кэшируются отдельно от страницы - хотя это можно обойти через символы и юзы, но это длинная история, мы об этом ещё поговорим отдельно.
SVG гораздо больше, чем просто формат графики - это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан , это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.
В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: и фона, а потом уже усложняйте - если не хватает.
Видеоверсия
Масштабируемая векторная графика (SVG, Scalable Vector Graphic) все чаще становится предпочитаемым форматом графики в интернете сегодня. Возможно, вы тоже уже использовали SVG вместо иконочного шрифта или графики в форматах jpg, gif и png. Рассмотрим, как это влияет на пользователей вспомогательных технологий и что нужно, чтобы обеспечить благополучный пользовательский опыт для всех.
Графика и альтернативный текст
Перед тем как перейти к собственно доступным SVG, разберемся с несколькими основными вопросами о графике, доступности и альтернативном тексте.
1. Нуждается ли графика в альтернативном тексте?
Если графика выполняет чисто декоративную роль, альтернативный текст не нужен.
В тегах должен быть атрибут alt для валидности, но его можно оставить пустым (без пробелов), разметка будет по прежнему валидной.
2. Какой контекст у графики и окружающего ее текста?
Если графика окружена текстом или содержимым, в котором есть альтернативный текст, то дополнительный альтернативный текст в атрибуте alt не нужен. Например:
Какой альтернативный текст наиболее оптимален для графики, которой необходим атрибут alt (см. пример 4 для подробной информации)? В зависимости от содержимого изображения, он может быть разным:
3. Есть ли у графики функция? Если так, то она должна быть донесена до пользователя.
Например, вместо точного описания того, что представлено на иконках…
Пример плохого кода:
…передайте пользователю контекст иконки.
Пример хорошего кода:
Для более полного понимания ознакомьтесь со статьей WebAIM “Alternative Text” и руководством W3C по доступности изображений .
Примеры в статье работают с браузерами, поддерживающими SVG (IE 10+, FF, Chrome и Safari) и наиболее распространенными скринридерами : Jaws, NVDA, VoiceOver (VO) и Narrator.
Способы подключения SVG на страницу
Для самой базовой имплементации SVG у нас есть следующие варианты:
1. SVG в img src
Перед тем, как продолжить, проверьте статистику браузеров посетителей вашего сайта. Если используется версия Safari Desktop 9.1.1 или iOS Version 9.3.2, а также более поздняя версия, то этого кода достаточно.
Однако многие пользователи по прежнему используют более старые версии Safari или IOS, поэтому нам надо добавить role="img" , вот так: .
И спасибо разработчикам, пофиксившим этот баг Safari/WebKit .
Этот пример хорош в качестве самого простого способа подключения SVG, но он не дает нам доступа к содержимому SVG с помощью AT (Assistive technology) или CSS/JS. Поэтому, если нам нужно больше контроля над SVG, мы инлайнируем его непосредственно в HTML.
2. Инлайновый SVG
Инлайновый SVG дает более полный контроль и более предсказуемые результаты, чем при использовании с
Возьмем тот же базовый SVG из примера с и попробуем добавить движение глаз. Мы можем сделать это с помощью JavaScript, если мы вложим SVG непосредственно в HTML.
Так как в SVG нет никакого видимого текста, описывающего графику, нам надо добавить альтернативный текст:
внутри
описание, при необходимости (оно не будет зачитываться).
Чтобы гарантировать доступ AT к
и :
Добавьте соответствующий ID к
и :
Название SVG
Более длинное и полное описание сложной графики.
В теге
aria-labelledby="uniqueTitleID uniqueDescID" используйте ID названия и описания; подключение и названия, и описания обеспечивает лучшую поддержку в скринридерах, чем aria-describedby .
Еще один момент:
в теге
Итак, добавляем анимацию (моргание глаз):
SetInterval(function blinkeyes() {
var tl = new TimelineLite();
tl.to(".eye", .4, {scaleY:.01, repeat:3, repeatDelay:.4, yoyo:true, transformOrigin: "50% 70%", ease:Power2.easeInOut});
return tl;
}, 5000);
var master = new TimelineLite();
master.add(blinkeyes());
Обновите название/описание так, чтобы оно точно описывало изображение:
An illustrated gray cat with bright green blinking eyes.
3. Вложение SVG с помощью object или iframe
Вот как это было у меня.
Итак, выбираем метод вложения SVG и добавляем tabindex="0" :
Используя нашего моргающего кота из последнего примера, нам надо заменить role="img" на role="group" .
И с этого момента все становится хуже.
Добавьте элемент в SVG , в котором будет находится содержимое и, возможно, (для NVDA):
A cute, gray cat with green eyes. Cat illustration by Heather Migliorisi.
Затем добавьте класс, чтобы спрятать текст визуально, оставив содержимое доступным для скринридеров. Мы можем сделать это, задав font-size: 0 .
Sr-only { font-size: 0; }
Итак, мы пришли к тому, что
(а, по возможности, и ) и содержат одинаковый контент, для поддержки JAWS и NVDA.
Примечания:
и
JAWS не читает содержимое (кроме отмеченного aria-labelledby / describedby)
Я рекомендую (исходя из поддержки браузерами и скринридерами) использовать, где возможно . Но это доступно не всегда, ведь изображения не обладают интерактивностью и анимациями object и iframe , а запасные варианты достаточно сложны.
Иконки
Есть несколько статей на тему замены иконочных шрифтов SVG. Мне было любопытно, облегчит ли использование SVG для иконок имплементацию их доступности. В смысле, могут ли браузеры поддерживать