Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изображения появляется в удивительных контекстах на многих различных веб-страницах. Но несмотря на то, что в течение почти двух десятилетий он был стандартом, SVG остается несколько новым форматом для некоторых дизайнеров и разработчиков, оставляя их в замешательстве относительно того, как он должен использоваться на сайте. Вот, некоторые причины, почему вы должны использовать SVG:
Крошечный размер файла
Хорошо спроектированный, типичный SVG намного меньше, чем эквивалентный PNG, а это означает, что страницы, которые используют их, загружаются быстрее для пользователей.
Масштабируемость
Поскольку SVG построен из математических формул, а не фиксированных пикселей растровой графики, изображения SVG можно масштабировать вверх и вниз без потери качества, что делает их идеальными для современных отзывчивых сайтов.
Взаимодействует с DOM
SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.
Легко модифицировать и адаптировать
Качество компонентов SVG означает, что хорошо сформированные документы SVG можно легко модифицировать в любом текстовом редакторе без необходимости использования специализированных программ, требуемых для растровых изображений. И поскольку SVG взаимодействует с DOM, его элементы могут быть изменены с помощью CSS. Формат SVG отлично подойдет для отображения:
логотипов
иллюстраций и чертежей
Инструменты для работы с SVG
Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).
Независимо от того, что вы используете, вы должны знать, что создание SVG из приложений по-прежнему иногда оставляет желать лучшего: результирующий документ часто перекодирован и иногда плохо отформатирован. Файл.svg можно сделать меньшим, более компактным, обработав его с помощью оптимизатора, такого как SVGOMG . Иногда передача неверного документа.svg через валидатор W3C может помочь вам выявить проблемы.
Интеграция SVG
Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:
Поскольку SVG основан на XML, его можно напрямую интегрировать в код на вашу страницу. SVG-код уменьшает время ожидания и общее время загрузки вашей страницы.
Подобно растровым изображениям, файл SVG можно ссылаться на тег или через CSS в качестве фонового изображения. Это часто лучший способ, если SVG не нуждаются в индивидуальном внимании CSS и JavaScript.
Вставляется как
Адаптивный SVG
Как я уже упоминал, отдельные компоненты SVG могут быть помечены идентификатором или классом, что означает, что им можно манипулировать в рамках медиа-запросов. Это означает, что вы можете использовать различные функции SVG-иллюстраций при разных размерах экранов, создавая возможности для адаптивных логотипов или иллюстрации, которые показывают большую или маленькую детализацию, когда окно просмотра сжимается и расширяется..., что полностью подходит для отзывчивого дизайна, который заключается в том, чтобы показать посетителям сайта соответствующий контент на соответствующем уровне детализации, на том устройстве с которого они просматривают в данный момент сайт.
Вот несколько примеров адаптивных логотипов:
Интерактивные SVG
SVG идеально подходят для отображения реальных форм, это означает, что они отлично подходят для интерактивных карт:
Узоры
Есть два особенно недооцененных аспекта SVG: И .
Подготовил: Евгений Рыжков
Дата публикации: 27.08.2010
Последнее обновление: 17.11.2010
Задача
Отобразить SVG-изображение на HTML-странице.
Существует несколько способов это сделать, но не все из них кроссбраузерны.
SVG через iframe
Наличие фрейма для многих уже ставит крест на данном способе. Нынче есть более совершенные способы решения данной задачи. К тому же в таком виде не получится реализовать прозрачные изображения (фрейм имеет фон), а так же нет доступа из внешних скриптов к элементам рисунка.
SVG через object
Имеем: валидный чистый код, альтернативный текст, где можно снабдить пользователя инструкцией, что делать, если он не видит картинки (например, отправить на сайт нормального браузера или дать ссылку на плагин, установка которого ему поможет). Такое внедрение поддерживает прозрачность в SVG изображении (правда в IE тут проблема: прозрачные участки будут залиты белым). Из минусов: нет возможности влиять на изображения внешними скриптами (из HTML), только теми, которые находятся в самом SVG-файле.
Метод хорош для фоновых изображений или каких либо статичных картинок.
SVG через embed
Такой способ якобы позволяет взаимодействовать скриптам в HTML с содержимым SVG-файла (мне пока такого добиться не удалось). Для IE имеет атрибут wmode (
Этот способ сейчас пользуется большой популярностью.
SVG в HTML коде
XHTML + SVG
следует обратить внимание на используемое пространство имен: xmlns:svg="http://www.w3.org/2000/svg">
;
документ должен быть именно в xhtml формате (локально — это файл с расширением.xhtml)
с кроссбраузерностью у этого метода плохо. Особенно плоха реакция IE;
html код становится нереально грязным.
Сейчас этот метод лучше не использовать.
Заметка
IE, включая версии 8, не поддерживает SVG. В то время Microsoft активно продвигал свой формат — VML. Потому с этим браузером придется повозиться, чтобы увидеть и там SVG-изображение (об этом подробней в следующих статьях).
Светлое будущее
По видимому в скором будущем формат SVG основательно войдет в жизнь веб разработчиков. В подтверждение этому уже сейчас можно встретить описания интересных способов внедрения SVG. По заявлениям разработчиков браузеров, новые версии их творений будут поддерживать часть или все из ниже приведенных способов интеграции 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 для иконок имплементацию их доступности. В смысле, могут ли браузеры поддерживать