Дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
Я вам больше скажу: SVG - это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу - становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого - особенности.
Первый и самый простой - элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку - браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ - фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите - результат будет таким же, как с : за стеклом, но внутри что-то работает.
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ, через
На самом деле, вместо
Используя нашего моргающего кота из последнего примера, нам надо заменить role="img" на role="group" .
И с этого момента все становится хуже.
Добавьте элемент в SVG
Иконки со смысловой нагрузкой требуют альтернативного текста. Этот метод похож на инлайнирование SVG.
Еще раз, нам нужно смотреть статистику браузеров, чтобы узнать, надо ли нам сделать что-то еще. Если у пользователей сайта Chrome 49.1 или новее, мы можем на этом остановиться.
Однако, если у большинства пользователей более старые версии Chrome, то нам надо добавить id="xxxx" к
Для иконок-ссылок без текста, мы можем использовать aria-label в элементе , чтобы добавить описательный альтернативный текст. В нашем случае к ссылке добавлен aria-label="See Picked Pens" .
Для иконок-ссылок с текстом надо использовать aria-label в ссылке, добавляя альтернативный текст с описанием.
С aria-label в теге a скринридер не читает текст внутри ссылки, поэтому мы добавили aria-label="See Picked Pens" в a .
CodePen
Итак, предположим в ссылке у нас динамическое значение текст + иконка. В таком случае мы не должны использовать aria-label в ссылке, так как значение динамического текста будет утрачено. В таком случае мы можем использовать тег span и текст, спрятанный за экраном. Числовым значением в id="itemsInCart" тега span является динамически добавляемый элемент.
Все образцы иконок:
Замечательно, что мы можем использовать SVG вместо PNG и JPG, особенно при отображении сложного контента типа графиков. Было бы чрезмерным передавать всю информацию с графика в атрибуте alt , поэтому задание альтернативного текста в изображении будет непростым. Но, используя SVG, мы можем сделать весь текст доступным непосредственно.
Порядок слоев - в Adobe Illustrator слои SVg экспортируются снизу вверх. Это важно, потому что мы хотим настроить слои так, чтобы они могли логично переключаться с клавиатуры в ходе чтения. Группа “Jaws” должна быть в коде сначала, поэтому в иллюстраторе слой “Jaws” находится в самом низу.
Именование слоев - это хорошая практика, тем более что названия слоев будут добавляться как id при экспорте SVG. Не волнуйтесь насчет одинаковых имен, в таком случае, к id будет добавляться число.
Группирование слоев - важно обратить внимание на то, как сгруппированы элементы. Текстовая метка + ключ элемента вместе со столбиком графика объединяются в одну группу для каждого варианта графика (Jaws, NVDA и т.д.). Это сделано для понимания прочитанного при использовании скринридеров. В некоторых браузерах пользователь может нажать на столбик и соответствующий текст будет зачитан и/или выделен.
Сохранение/экспорт - для гарантии я держу две версии своего SVG, одну для редактирования в Illustrator, а вторую для редактирования кода. Версию для работы в Illustrator я сохраняю через меню “сохранить как”, а более чистую версию для веба через “файл → экспорт → svg”.
Оптимизация - это последнее, что нужно сделать перед ручным редактированием SVG. Инструмент от Джейка Арчибальда SVGOMG отлично справляется с этим. Добавьте SVG, затем переключитесь в режим просмотра “CODE”, чтобы увидеть именно то, что переключает каждая функция. Не забудьте про опцию “prettify”, ведь мы еще будем редактировать код вручную и он должен быть читаемым.
Лучше всего воздержаться от ручного редактирования SVG (добавления доступности) до полной уверенности в его готовности. Потому как после начала ручного редактирования, работа с SVG в редакторе (Inkscape/Illustrator/и т.д.) может случайно изменить что-либо из добавленного вручную.
Контроль за исходниками - если вы используете контроль версий на основе git (git, SourceTree и т.д.), добавляйте SVG в коммит. Управление файлом в одной из систем версий поможет решить проблемы с неудачными изменениями в нем, особенно если он был открыт и сохранен в редакторе после ручного исправления, так как Illustrator не понимает любой код для доступности (aria-*) и удаляет его.
SVG делается проходимым во всех браузерах после добавления role="group" в
Название и описание - так как у нас есть текстовые элементы в SVG, работающие как название и описание, мы привяжем их к элементу
Очистка разметки SVG
- удалите все странности, создаваемые Illustrator. Например, к нашему элементу
Плохой пример:
Исправленный пример
К группам, содержащим столбцы графика, метку и ключ. Сделаем группу, содержащую список всех столбцов, так как большинство скринридеров зачитывают общее число и позицию каждого элемента списка:
Отдельные группы будут размещаться внутри этой группы-списка:
Добавление метки к списку - это даст пользователям вспомогательных технологий больше информации о графике, с которым они взаимодействуют. Метка добавляется к группе, содержащей список aria-label="bar graph" .
Тестирование и исправление - тестировать надо скринридером . Как и ожидалось, скринридер считывает название, описание и ключи элементов списка. Но он также проходит через процентные значения на y-осях, каждом прямоугольнике и каждой линии.
Небольшое замечание по скрытию элементов (прямоугольников, кругов) от вспомогательных технологий в SVG. Единственный способ для этого - добавить им role="presentation" . Таким образом вы отключаете нативную семантику для accessibility API. Если вам надо спрятать много элементов, то, к сожалению, вы не можете просто обернуть их тегом
Скрытие форм/линий - все элементы с геометрическими формами прячутся путем добавления role="presentation" .
Скрытие текстовых элементов - мешающие текстовые элементы надо спрятать от скринридера (на рисунке выше они подсвечены желтым цветом, это процентные значения у вертикальной оси, линия горизонтальной оси и столбцы в графике) путем добавления role="presentation" и aria-hidden="true" .
Демо-видео использования скринридеров:
Еще лучше, в сравнении с диаграммами и графиками, обстоят дела с доступностью интерактивных изображений. Рассмотрим простую хронологическую инфографику. Она разбивается на верхнюю часть с заголовком и раздел хронологии, который в свою очередь разбивается на сегменты, каждый из которых содержит заголовок, изображение и описание.
Добавим этой инфографике немного жизни и анимируем временные сегменты. Вместо того, чтобы показывать всю информацию сразу, мы выведем только время и круг с названием кошачьей активности. При взаимодействии пользователя с временем или названием будет выводиться остальная информация.
Все то же самое, что и в секции предыдущего раздела. Но после описания оптимизации для веба можете смело пропускать все об анимации CSS и переходить непосредственно к доступности.
Стили удалены из следующих примеров для упрощения кода, но они, разумеется, есть в работающем демо.
Проходимость для скринридеров - чтобы SVG был проходимым во всех браузерах, добавьте к SVG role="group" /
Название и описание
- в нашем примере мы можем использовать текст в верхней части SVG (
Затем добавим id к
Добавление семантических ролей
- добавьте семантические роли к группам, содержащим хронологию и ее отдельные сегменты. Вот группа с полным списком:
Добавьте метку к списку:
Отдельные временные сегменты будут элементами списка:
Взаимодействие/доступность с клавиатуры
- сразу после каждого элемента
Добавьте туда же tabindex="0" , чтобы обеспечить фокусируемость во всех браузерах.
Исправление семантики ссылок - обратите внимание, что ссылки указывают сами на себя. Это не семантичные ссылки, так как они не ведут к чему-либо и могут смутить пользователей скринридеров. Поэтому добавим role="img" , чтобы обозначить, что это изображение, а не ссылка.
Доступность текста внутри временных сегментов - добавление роли изображения прекращает проход элементов вспомогательными технологиями, поэтому нам надо добавить aria-labelledby с идентификаторами текстовых элементов в том порядке, в котором они читаются.
Добавление скрытого описания для изображений
- используйте
Добавление идентификатора к атрибуту aria-labelledby в xlink так, чтобы он стал читаемым.
Добавление стилей для фокуса - настройка стилей для фокуса необходима пользователям, осуществляющим навигацию в браузере с помощью клавиатуры. Мне нравятся эти стили, поэтому я добавила их и для наведенного состояния.
A:focus , a:hover { stroke: black; stroke-width: 5; paint-order: stroke; }
Добавление JavaScript для фокуса окна - в SVG при навигации по ссылкам окно не всегда сдвигается так, чтобы элемент оказался в области видимости. Причина этого в том, что некоторые браузеры (баг-репорт добавлен
Хорошая новость: у нас есть специальные медиа-запросы для решения этой проблемы.
Вот пример исправлений для раздела с иконками в этой статье:
@media screen and (-ms-high-contrast: active) { .icon svg { /* select a color that will contrast well on black or white because other color modes can be chosen and you need a color that will work with either */ fill: green; } } /* black text on white background *. @media screen and (-ms-high-contrast: black-on-white) { .icon svg { /* select a dark color that will contrast on black (#fff is too much contrast) */ fill: #333; } } /* black text on white background */ @media screen and (-ms-high-contrast: white-on-black) { .icon svg { /* select a light color that will contrast on white (#000 is too much contrast) */ fill: #efefef; } }
Задавайте при необходимости альтернативный текст:
Для интерактивных SVG:
Тестируйте с разными скринридерами и браузерами. Тестируйте в различных режимах контрастности. Тестируйте навигацию с клавиатуры.
Огромное спасибо Амелии Беллами-Ройдс и Леони Уотсон за проверку примеров и выявление проблем. Я бы не смогла написать эту статью без их помощи.
Баги, сообщения о которых были отправлены в ходе работы над статьей:
Microsoft:
Mozilla:
Подготовил: Евгений Рыжков Дата публикации: 27.08.2010
Последнее обновление: 17.11.2010
Отобразить SVG-изображение на HTML-странице.
Существует несколько способов это сделать, но не все из них кроссбраузерны.
Наличие фрейма для многих уже ставит крест на данном способе. Нынче есть более совершенные способы решения данной задачи. К тому же в таком виде не получится реализовать прозрачные изображения (фрейм имеет фон), а так же нет доступа из внешних скриптов к элементам рисунка.
Имеем: валидный чистый код, альтернативный текст, где можно снабдить пользователя инструкцией, что делать, если он не видит картинки (например, отправить на сайт нормального браузера или дать ссылку на плагин, установка которого ему поможет). Такое внедрение поддерживает прозрачность в SVG изображении (правда в IE тут проблема: прозрачные участки будут залиты белым). Из минусов: нет возможности влиять на изображения внешними скриптами (из HTML), только теми, которые находятся в самом SVG-файле.
Метод хорош для фоновых изображений или каких либо статичных картинок.
Такой способ якобы позволяет взаимодействовать скриптам в HTML с содержимым SVG-файла (мне пока такого добиться не удалось). Для IE имеет атрибут wmode (
Этот способ сейчас пользуется большой популярностью.
Сейчас этот метод лучше не использовать.
IE, включая версии 8, не поддерживает SVG. В то время Microsoft активно продвигал свой формат — VML. Потому с этим браузером придется повозиться, чтобы увидеть и там SVG-изображение (об этом подробней в следующих статьях).
По видимому в скором будущем формат SVG основательно войдет в жизнь веб разработчиков. В подтверждение этому уже сейчас можно встретить описания интересных способов внедрения SVG. По заявлениям разработчиков браузеров, новые версии их творений будут поддерживать часть или все из ниже приведенных способов интеграции SVG.
Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изображения появляется в удивительных контекстах на многих различных веб-страницах. Но несмотря на то, что в течение почти двух десятилетий он был стандартом, SVG остается несколько новым форматом для некоторых дизайнеров и разработчиков, оставляя их в замешательстве относительно того, как он должен использоваться на сайте. Вот, некоторые причины, почему вы должны использовать SVG:
Хорошо спроектированный, типичный SVG намного меньше, чем эквивалентный PNG, а это означает, что страницы, которые используют их, загружаются быстрее для пользователей.
Поскольку SVG построен из математических формул, а не фиксированных пикселей растровой графики, изображения SVG можно масштабировать вверх и вниз без потери качества, что делает их идеальными для современных отзывчивых сайтов.
SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.
Качество компонентов SVG означает, что хорошо сформированные документы SVG можно легко модифицировать в любом текстовом редакторе без необходимости использования специализированных программ, требуемых для растровых изображений. И поскольку SVG взаимодействует с DOM, его элементы могут быть изменены с помощью CSS. Формат SVG отлично подойдет для отображения:
логотипов
иллюстраций и чертежей
Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).
Независимо от того, что вы используете, вы должны знать, что создание SVG из приложений по-прежнему иногда оставляет желать лучшего: результирующий документ часто перекодирован и иногда плохо отформатирован. Файл.svg можно сделать меньшим, более компактным, обработав его с помощью оптимизатора, такого как SVGOMG . Иногда передача неверного документа.svg через валидатор W3C может помочь вам выявить проблемы.
Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:
Поскольку SVG основан на XML, его можно напрямую интегрировать в код на вашу страницу. SVG-код уменьшает время ожидания и общее время загрузки вашей страницы.
Подобно растровым изображениям, файл SVG можно ссылаться на тег или через CSS в качестве фонового изображения. Это часто лучший способ, если SVG не нуждаются в индивидуальном внимании CSS и JavaScript.
Вставляется как
Как я уже упоминал, отдельные компоненты SVG могут быть помечены идентификатором или классом, что означает, что им можно манипулировать в рамках медиа-запросов. Это означает, что вы можете использовать различные функции SVG-иллюстраций при разных размерах экранов, создавая возможности для адаптивных логотипов или иллюстрации, которые показывают большую или маленькую детализацию, когда окно просмотра сжимается и расширяется..., что полностью подходит для отзывчивого дизайна, который заключается в том, чтобы показать посетителям сайта соответствующий контент на соответствующем уровне детализации, на том устройстве с которого они просматривают в данный момент сайт.
Вот несколько примеров адаптивных логотипов:
SVG идеально подходят для отображения реальных форм, это означает, что они отлично подходят для интерактивных карт:
Есть два особенно недооцененных аспекта SVG:
SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.
Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:
Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.
После того, как вы сохраните файл, появится еще одно диалоговое окно с опциями SVG. Честно говоря, я не очень много знаю о всех представленных в этом окне настройках. Существует спецификация SVG профилей, так что, если вам интересно можете почитать. Я считаю, что SVG 1.1 работает отлично.
Оба способа могут оказаться полезными.
В Illustrator наш холст получился 612px ✕ 502px.
Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:
Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.
Если вам необходимо использовать SVG, но также нужна поддержка вышеперечисленных браузеров, есть несколько вариантов решения проблемы. Я использовал несколько техник в различных проектах для решения этой проблемы.
Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:
if (!Modernizr.svg) { $(".logo img").attr("src" , "images/logo.png"); |
David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:
< img src = "image.svg" onerror = "this.onerror=null; this.src="image.png"" > |
Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.
< ellipse class = "ground" > < path class = "kiwi" > |
Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.
В SVG имеются забавные фильтры. Например размытие:
< svg ... = "" > < filter id = "pictureFilter" > < feGaussianBlur stdDeviation = "5" > |
Затем вы можете при необходимости применить это в css:
filter: url (#pictureFilter); |
Вот, что получилось:
Один из вариантов фолбэка для такого типа SVG:
< svg > ... < div class = "fallback" > |
Затем снова используем Modernizr:
Logo-fallback { /* Make sure it"s the same size as the SVG takes up */ No-svg .logo-fallback { background-image: url (logo.png); |
Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:
