SVG для устройств


Содержание
Цукерберг рекомендует:  3D слайдшоу CSS

Доступные 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

See the Pen SVG as img src by Heather Migliorisi (@hmig) on CodePen.

Перед тем, как продолжить, проверьте статистику браузеров посетителей вашего сайта. Если используется версия 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 непосредственно доступны в DOM, а DOM полностью открыт для API вспомогательных технологий.

Возьмем тот же базовый SVG из примера с и попробуем добавить движение глаз. Мы можем сделать это с помощью JavaScript, если мы вложим SVG непосредственно в HTML.

See the Pen Basic SVG — Cat by Heather Migliorisi (@hmig) on CodePen.

Так как в SVG нет никакого видимого текста, описывающего графику, нам надо добавить альтернативный текст:

  • внутри , добавив A short title of the SVG , который должен быть первым потомком родительского элемента — это будет использоваться как подсказка при наведении курсора.
  • описание, при необходимости (оно не будет зачитываться).

В соответствии со спецификацией W3C, нам не надо делать ничего дополнительно, кроме добавления и, возможно, так как они доступны Accessibility API. К сожалению, поддержка в браузерах пока недостаточна (см. Chrome и Firefox).

Чтобы гарантировать доступ AT к и :

Добавьте соответствующий ID к и :

  • Название SVG
  • Более длинное и полное описание сложной графики.

В теге добавьте:

  • aria-labelledby=»uniqueTitleID uniqueDescID» используйте ID названия и описания; подключение и названия, и описания обеспечивает лучшую поддержку в скринридерах, чем aria-describedby .

Еще один момент:

  • в теге добавьте role=»img» (таким образом, SVG не будет проходиться браузерами, которые добавляют SVG роль группы).

Итак, добавляем анимацию (моргание глаз):

Обновите название/описание так, чтобы оно точно описывало изображение:

3. Вложение SVG с помощью object или iframe

Сейчас я стараюсь держаться подальше от использования

Используя нашего моргающего кота из последнего примера, нам надо заменить role=»img» на role=»group» .

И с этого момента все становится хуже.

Добавьте элемент в SVG

, в котором будет находится содержимое и, возможно, (для NVDA):

Затем добавьте класс, чтобы спрятать текст визуально, оставив содержимое доступным для скринридеров. Мы можем сделать это, задав font-size: 0 .

Итак, мы пришли к тому, что (а, по возможности, и ) и

содержат одинаковый контент, для поддержки JAWS и NVDA.

Примечания:

  • и не работают в Chrome. Chrome видит содержимое запасного варианта ( img src ), поэтому вы можете скинуть весь текст туда, скопировав его в третий (или в четвертый) раз.
  • JAWS не читает содержимое

(кроме отмеченного aria-labelledby / describedby )

Я рекомендую (исходя из поддержки браузерами и скринридерами) использовать, где возможно . Но это доступно не всегда, ведь изображения не обладают интерактивностью и анимациями object и iframe , а запасные варианты достаточно сложны.

Иконки

Есть несколько статей на тему замены иконочных шрифтов SVG. Мне было любопытно, облегчит ли использование SVG для иконок имплементацию их доступности. В смысле, могут ли браузеры поддерживать , заданный в основном SVG, при использовании . Увы, не могут. Но это можно сделать с самой иконкой и я сейчас покажу как.

После создания файла SVG, содержащего иконки (я люблю использовать для этого icomoon) и подключения его в документ, нам нужно определить паттерны, необходимые для сайта (иконка+ссылка, иконка+текст, просто иконка). Исходя из этих паттернов, мы можем разработать соответствующий метод применения альтернативного текста.

В начале код иконки обычно выглядит как вот этот из генератора иконок:

Пример №1: отдельная иконка со смыслом

Иконки со смысловой нагрузкой требуют альтернативного текста. Этот метод похож на инлайнирование SVG.

  • обновите текст названия так, чтобы он отражал предназначение иконки, допустим, это сервисная поддержка мобильных устройств.
  • добавьте role=»img» в (так как SVG не подключается последовательно, он не всегда распознается AT. Например, следующие варианты не работают Mac — VoiceOver + Chrome или Safari, Windows — NVDA + FF).

Еще раз, нам нужно смотреть статистику браузеров, чтобы узнать, надо ли нам сделать что-то еще. Если у пользователей сайта Chrome 49.1 или новее, мы можем на этом остановиться.

Однако, если у большинства пользователей более старые версии Chrome, то нам надо добавить к и aria-labelledby=»xxxx» к .

Здесь стоит в очередной раз поблагодарить разработчиков Chrome за исправленный баг.

Пример №2: отдельная декоративная иконка

Декоративные иконки (то есть иконки, дублирующие информацию, переданную текстом или не имеющие особого значения) не нуждаются в альтернативном тексте, их надо прятать от скринридера. В следующем примере мы прячем SVG с помощью aria-h .

See the Pen yJYVpa by Heather Migliorisi (@hmig) on CodePen.

Пример №3: иконка-ссылка без текста

Пример №4: иконка-ссылка со статическим текстом

Для иконок-ссылок с текстом надо использовать aria-label в ссылке, добавляя альтернативный текст с описанием.

С aria-label в теге a скринридер не читает текст внутри ссылки, поэтому мы добавили aria-label=»See Picked Pens» в a .

Пример №5: иконка-ссылка с динамическим текстом

Итак, предположим в ссылке у нас динамическое значение текст + иконка. В таком случае мы не должны использовать aria-label в ссылке, так как значение динамического текста будет утрачено. В таком случае мы можем использовать тег span и текст, спрятанный за экраном. Числовым значением в тега span является динамически добавляемый элемент.

  • добавьте дополнительный span с остальным альтернативным текстом (типа “предметов в вашей корзине”);
  • добавьте этому span класс , чтобы визуально прятать его;
  • добавьте aria-h в svg .

Все образцы иконок:

See the Pen Accessible SVG Icons by Heather Migliorisi (@hmig) on CodePen.

Сложные изображения: доступные графики

Замечательно, что мы можем использовать SVG вместо PNG и JPG, особенно при отображении сложного контента типа графиков. Было бы чрезмерным передавать всю информацию с графика в атрибуте alt , поэтому задание альтернативного текста в изображении будет непростым. Но, используя SVG, мы можем сделать весь текст доступным непосредственно.

1. Настройка файла

Порядок слоев — в 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-* ) и удаляет его.

2. Добавление доступности к SVG

Проходимость для скринридеров — SVG делается проходимым во всех браузерах после добавления role=»group» в . В соответствии с новой спецификацией SVG, это должно указывать на роль графического документа. Однако, спецификация по прежнему находиться в режиме разработки и в браузерах еще не реализована.

Название и описание — так как у нас есть текстовые элементы в SVG, работающие как название и описание, мы привяжем их к элементу с помощью aria-labelledby=»graph-title» и aria-describedby=»graph-desc» .

Очистка разметки SVG — удалите все странности, создаваемые Illustrator. Например, к нашему элементу

добавлено несколько . Скрин ридер может зачитать отдельные буквы вместо слова целиком (“J” “a” “w” “s” “- 44%” вместо “Jaws — 44%”). Поэтому надо удалить необязательные , оборачивающие отдельные буквы.

Плохой пример:

Исправленный пример

Добавление ссылки на опрос — это разумное решение, так как график основан на результатах опроса. В SVG 2 это не обязательно, но пока мы добавим xlink: к href .

Больше об использовании xlink вы можете узнать из статьи Дадли Стори “We’ll Always Have Paris: Using SVG Namespacing and XLink”.

Добавление семантических ролей — к группам, содержащим столбцы графика, метку и ключ. Сделаем группу, содержащую список всех столбцов, так как большинство скринридеров зачитывают общее число и позицию каждого элемента списка:

Отдельные группы будут размещаться внутри этой группы-списка:

Добавление метки к списку — это даст пользователям вспомогательных технологий больше информации о графике, с которым они взаимодействуют. Метка добавляется к группе, содержащей список aria-label=»bar graph» .

Тестирование и исправление — тестировать надо скринридером. Как и ожидалось, скринридер считывает название, описание и ключи элементов списка. Но он также проходит через процентные значения на y-осях, каждом прямоугольнике и каждой линии.

Небольшое замечание по скрытию элементов (прямоугольников, кругов) от вспомогательных технологий в SVG. Единственный способ для этого — добавить им role=»presentation» . Таким образом вы отключаете нативную семантику для accessibility API. Если вам надо спрятать много элементов, то, к сожалению, вы не можете просто обернуть их тегом и добавить role=»presentation» . Хорошая новость состоит в том, что новая спецификация SVG Accessibility решает большую часть этих проблем. Элементы, такие как формы без альтернативного текста, будут рассматриваться так, как если бы у них была роль none или presentation .

Скрытие форм/линий — все элементы с геометрическими формами прячутся путем добавления role=»presentation» .

Скрытие текстовых элементов — мешающие текстовые элементы надо спрятать от скринридера (на рисунке выше они подсвечены желтым цветом, это процентные значения у вертикальной оси, линия горизонтальной оси и столбцы в графике) путем добавления role=»presentation» и aria-h .

Демо-видео использования скринридеров:

Интерактивные изображения

Еще лучше, в сравнении с диаграммами и графиками, обстоят дела с доступностью интерактивных изображений. Рассмотрим простую хронологическую инфографику. Она разбивается на верхнюю часть с заголовком и раздел хронологии, который в свою очередь разбивается на сегменты, каждый из которых содержит заголовок, изображение и описание.

Добавим этой инфографике немного жизни и анимируем временные сегменты. Вместо того, чтобы показывать всю информацию сразу, мы выведем только время и круг с названием кошачьей активности. При взаимодействии пользователя с временем или названием будет выводиться остальная информация.

1. Настройка файла

Все то же самое, что и в секции настройка файла предыдущего раздела. Но после описания оптимизации для веба можете смело пропускать все об анимации CSS и переходить непосредственно к доступности.

2. Доступность

Стили удалены из следующих примеров для упрощения кода, но они, разумеется, есть в работающем демо.

Проходимость для скринридеров — чтобы SVG был проходимым во всех браузерах, добавьте к SVG role=»group» /

Название и описание — в нашем примере мы можем использовать текст в верхней части SVG ( ) в качестве названия и ссылаясь на него с помощью aria-labelledby в .

Затем добавим id к и привяжем его к с помощью aria-describedby .

Добавление семантических ролей — добавьте семантические роли к группам, содержащим хронологию и ее отдельные сегменты. Вот группа с полным списком: .

Добавьте метку к списку: .

Отдельные временные сегменты будут элементами списка: .

Взаимодействие/доступность с клавиатуры — сразу после каждого элемента с role=»listitem» добавьте так, чтобы он охватывал все содержимое группы. На данный момент это единственный способ добавить интерактивность к SVG.

Добавьте туда же tabindex=»0″ , чтобы обеспечить фокусируемость во всех браузерах.

Исправление семантики ссылок — обратите внимание, что ссылки указывают сами на себя. Это не семантичные ссылки, так как они не ведут к чему-либо и могут смутить пользователей скринридеров. Поэтому добавим role=»img» , чтобы обозначить, что это изображение, а не ссылка.

Доступность текста внутри временных сегментов — добавление роли изображения прекращает проход элементов вспомогательными технологиями, поэтому нам надо добавить aria-labelledby с идентификаторами текстовых элементов в том порядке, в котором они читаются.

Добавление скрытого описания для изображений — используйте с классом для скрытия элемента так, что визуально он скрыт, но остается в DOM.

Добавление идентификатора к атрибуту aria-labelledby в xlink так, чтобы он стал читаемым.

Добавление стилей для фокуса — настройка стилей для фокуса необходима пользователям, осуществляющим навигацию в браузере с помощью клавиатуры. Мне нравятся эти стили, поэтому я добавила их и для наведенного состояния.

Добавление JavaScript для фокуса окна — в SVG при навигации по ссылкам окно не всегда сдвигается так, чтобы элемент оказался в области видимости. Причина этого в том, что некоторые браузеры (баг-репорт добавлен и, надеюсь, скоро будет исправление) прокручивают элемент целиком, не учитывая, что некоторые дочерние элементы могут оказаться за экраном. Поэтому мы добавим немного JavaScript к прокрутке окна, чтобы обеспечить видимость сфокусированных элементов.

Есть и более эффективные способы, но для нашего быстрого примера хватит и этого:

See the Pen Accessible Interactive SVG by Heather Migliorisi (@hmig) on CodePen.

Видео с демонстрацией работы скринридеров:

SVG и режим повышенной контрастности

И еще одна проблема: Windows и режим повышенной контрастности для людей со слабым зрением, использующих эту возможность для улучшения читаемости содержимого. Это проблема потому, что при использовании этой возможности может измениться цвет текста или тела документа, но элементы в SVG не обновляются при изменении режима контрастности.

Хорошая новость: у нас есть специальные медиа-запросы для решения этой проблемы.

Вот пример исправлений для раздела с иконками в этой статье:

Заключение

Задавайте при необходимости альтернативный текст:

  1. Если альтернативного текста нет, прячьте SVG от вспомогательных технологий с помощью aria-h .
  2. Если альтернативный текст есть:
    1. Добавьте название и/или описание в элемент SVG (или ссылку на них). 2. Используйте роли для добавления семантических значений (типа role=»list» , role=»listitem» ). 3. Прячьте графические и группирующие элементы, которые не следует зачитывать с помощью role=»presentation» . 4. Прячьте текстовые элементы, которые не следует зачитывать с помощью role=»presentation» и aria-h .

Для интерактивных SVG:

  1. Установите фокус с помощью xlink и tabindex=»0″ .
  2. Если ссылка не выполняет функции ссылки, добавьте соответствующую семантическую роль.
  3. Добавьте JavaScript для настройки фокуса окна.
  4. Задайте CSS для выделения focus: outline .

Тестируйте с разными скринридерами и браузерами. Тестируйте в различных режимах контрастности. Тестируйте навигацию с клавиатуры.

Благодарности

Огромное спасибо Амелии Беллами-Ройдс и Леони Уотсон за проверку примеров и выявление проблем. Я бы не смогла написать эту статью без их помощи.

Баги, сообщения о которых были отправлены в ходе работы над статьей:

Microsoft:

Mozilla:

  • баг Safari/WebKit, требовавший добавления role=»img» в тег .
  • баг Chrome, требовавший добавления aria-labelledby или aria-label в SVG для чтения его названия.

Практическое
руководство

Содержание
Введение

Мы живём в век пикселей. Как дизайнеры и разработчики в вебе, пиксели могут быть нам как друзьями, так и врагами. Мы хотим, чтобы всё выглядело красиво и чётко для всех, кто пользуется нашими сайтами, и нам необходимо уменьшать размеры файлов для улучшения производительности. В общем-то, есть только один способ для иконок, логотипов и иллюстраций — это SVG . Масштабируемая векторная графика (Scalable Vector Graphics) позволяет изображению выглядеть чётко на мониторе с любым разрешением, при этом иметь очень маленький размер файла и легко поддаваться редактированию и изменениям.

Цель этого руководства — дать обзор практического применения SVG -изображений в вебе с некоторыми советами и хитростями, которые помогут получить максимальную отдачу от них.

Scalable Vector Graphics это разметка, основанная на XML , который содержит двумерные векторы. Векторами могут быть простые геометрические формы, сложные контуры, да и всё то же самое, что можно сделать в Иллюстраторе. Этот формат изображений имеет намного больше общего с веб-страницей, чем тот же JPEG . SVG намного мощнее — им легко можно управлять при помощи кода (в текстовом редакторе или с помощью CSS / JS ).

  • не зависит от разрешения

  • поддерживается во всех современных браузерах
  • актуален в будущем ( W3C стандарт)
  • легко создавать и редактировать
  • изменяется с помощью CSS & JS
  • поддаётся сжатию

Подготовка и оптимизация

Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG . Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.

Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px ). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds . Затем жмём save as и выбираем SVG , и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.

Приёмы для уменьшения размеров файла.

(Смотрите ресурсы по оптимизации)

Существует множество статей по оптимизации SVG , предлагающих кладезь знаний в этой теме, но я хочу поделиться парой приёмов, которые считаю наиболее эффективными и полезными. Они не требуют много усилий и могут легко вписаться в рабочий процесс.

Чтобы добиться наименьшего размера SVG , логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS , так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.

Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool , который поможет удалить точки и при этом оставить общую форму той же.

Smart Remove Brush Tool удалил точки

Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).

Точки вне сетки

Выравнивание по сетке

Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.

И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.

В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .

Оригинал: 1,413b

После оптимизации: 409b

В итоге размер файла стал меньше на

Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент , для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.

После оптимизации с использованием : 311b

Размер файла стал меньше на

Если применить эту технику ко всем файлам SVG , это значительно улучшит ваш сайт.

Варианты использования (реализации)

Когда приходит время использовать SVG в вебе, появляется много различных способов, как это сделать. Некоторые из них имеют определённые преимущества в зависимости от того, чего вы хотите добиться, а некоторых стоит и вовсе избегать. Если требуется только базовая настройка, а разрешение и размер файла должны быть небольшими, то можно прописать SVG в img или как background-image в CSS , так же как любой другой формат файла.

Здесь всё делается так же, как с любым изображением в этом формате. Можно даже использовать SVG как элемент

. Но помните, что возможности преобразований в этом формате ограничены.

Background-image

Не стоит сохранять этот формат в base64 , это приведёт к блокировке загрузки стилей. Помните, что возможности манипуляций в этом формате ограничены.

Iframe

Вы можете загрузить SVG как

Embed

применяется «во внешних приложениях» или «в интерактивном контенте». Вы можете использовать это для SVG , но лучше не стоит.

Object

Inline

Встраивание SVG в код не повлияет на HTTP -запрос, но изображение не будет кешироваться в браузере. Это самый простой способ управления, однако поддержка встроенного SVG кода может стать настоящим мучением.

Заключение

Если хочется выжать максимум из SVG , используйте

JS -манипуляции

Мои знания Javascript очень маленькие, поэтому я дам только основные советы о том, как можно использовать JS для изменений в SVG . Если вы хотите вставить свои скрипты внутри SVG , то не забудьте обернуть их в &lt![CDATA[ . ]]> снова, чтобы избежать ошибок анализа. Скрипты не будут работать если использовать или background-image из-за мер безопасности (то есть чтобы предотвратить запуск потенциально вредоносного кода на вашей странице).

Когда вы работаете с внешним JS (то есть не встроенным в файл SVG ), если у вас встроенные SVG , вы можете выбрать его как любой другой DOM -элемент. Если вы используете

Фиксированная ширина и адаптивность

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

Если размеры фиксированы, то единственная важная вещь, с которой нужно быть осторожным, если вы используете SVG как background-image — это то, что вам нужно быть уверенным, что background-size прописан, так как браузеры могут немного запутаться и или подрезать изображение, или сжать его, особенно, если отображаются размеры, отличные от оригинального размера изображения.

Когда вы изменяете размер SVG , нужно помнить о некоторых вещах (если используем background-image ):

Объект

Работает, как ожидается, при width: 100%;

Встроенные

Ранее требовалась значение max-height для работы, в настоящее время работает, как ожидается. Помните, что Safari не так быстро отрисовывает изображения (если они сложные) при изменении размеров окна.

Работает, как ожидается, при width: 100%;

Background-image

Требует padding-bottom: #%; , чтобы сохранить пропорций изображения, иначе не отображается.

Анимация

Когда требуется анимировать SVG существует несколько различных опций, которые можно использовать — анимирование SVG (основанное на SMIL -стандарте), CSS3 -анимация или JS -анимация. SVG — и CSS3 -анимации позволят сделать большую часть того, что вам захочется сделать, при этом SVG -анимация чуть мощнее, потому как имеет возможность «контролировать» некоторые особенности (или даёт доступ к некоторым возможностям). JS позволит относительно легко делать неплохую сложную анимацию, особенно используя такие библиотеки как Snap.svg. Это находится вне моих знаний о JavaScript, поэтому я позволю вам потестировать их демо версии, чтобы убедиться подходит ли это вам.

SVG -анимация даёт огромные возможности, но я не собираюсь останавливаться на этом подробно, и, честно говоря, я ни разу не использовал её. Я могу представить, что может быть полезно добавить некоторую хорошую анимацию для ваших иллюстраций, но честно говоря, с практической точки зрения, не каждый проект имеет на это достаточное время и бюджет. Если у вас всё же есть возможность, довольно просто начать экспериментировать с этим, есть много прекрасных онлайн-уроков. В основном можно добавлять дочерние элементы к любому контуру или форме в ваших SVG -файлах, которые позволят контролировать анимацию. Самое лучшее в этом то, что оно работает со всеми методами использования SVG . Internet Explorer не поддерживает SVG -анимацию, однако вы можете использоваться полифил, такой как FakeSmile для работы с IE .

Вот вам небольшой пример. Обратите внимание: я подсветил голубым цветом, чтобы легче было увидеть анимацию.

SVG -анимация

Object

Inline

Background-image

Обычно, когда мы хотим анимировать иконки или иллюстрации в вебе, мы это делаем для добавления интерактива, то есть при наведении мыши и тому подобное. Это подпадает под пункты «Управление с помощью CSS» и «Интерактивная SVG-анимация» из табличек выше, и следовательно, не работает ни с SVG -, ни с CSS3 -анимациями при использовании или background-image . Чтобы сделать интерактивную анимацию в SVG можно добавить begin=»mouseover» и begin=»mouseout» . Для CSS3 -анимации всё то же самое, что и в любом другом случае — добавьте классы для SVG -элементов и стилизуйте их при (наведении) hover . Обратите внимание на одну вещь — если вы хотите стилизовать анимации из внешнего списка стилей, они будут работать, как ожидается при использовании встроенного SVG . А при использовании

CSS3 -анимация

Спрайты

Можно создавать и использовать SVG -спрайты так же, как и в случае с PNG или background-image , чтобы получить преимущества в разрешении, или же можно шагнуть чуть дальше, используя дополнительные возможности SVG . Я не буду на этом подробно останавливаться, так как это становится довольно сложным (это комплексный подход), и я лично никогда не сталкивался с необходимостью использовать его. Основное преимущество — это использовать всю мощь SVG с меньшим числом HTTP -запросов.

Существует два подхода, которые можно использовать — в первом вы определяете все иконки внутри тега в SVG , но скрываете их. Затем обращаетесь к каждому, когда это потребуется, используя элемент , ссылаясь на с xlink:href=»#id» . Второй подход — это использовать в SVG viewbox атрибут, чтобы обрезать рабочую область (область в SVG , которая видна) вокруг определённой области. Эти оба способа достаточно продвинутые, поэтому задумайтесь о них, только если решите использовать.

Если вы хотите узнать как внедрить эти техники, то обратитесь к ссылкам на ресурсы, приложенные ниже, особенно к статье Sara Soueidan’s на 24ways.

Если вы хотите использовать SVG -спрайт как PNG -спрайт с CSS , то нужно добавить атрибуты width и height рядом с атрибутом viewBox в SVG -коде. Традиционно, в процессе оптимизации они удаляются, потому что обычно они не нужны. Однако, в этом случае эти параметры требуются для IE9 & 10 чтобы корректно порезать их на части. Это происходит потому, что эти браузеры принимают размеры высоты и ширины, указанные в CSS , за размер изображения, а на самом деле это как раз размеры требуемой части изображения (а не всего изображения в целом).

Медиавыражения

Действительно крутая штука в SVG состоит в том, что если использовать медиавыражения в стилях, вставленных внутри файла, то вместо того, чтобы работать через размер вьюпорта, они будут работать через размеры вьюпорта в SVG . В основном это значит, что у них уже есть своя реализация медиавыражений к элементам. Как чудесно. Это позволяет нам контролировать, как SVG будет выглядеть в любом отображаемом размере.

Представьте, что вы большой бренд и вы хотите, чтобы ваш логотип использовался правильно, независимо от отображаемого размера. И вам это удастся. Только вставьте нужное медиавыражение, и вы сможете менять формат в зависимости от размера изображения на дисплее. Это работает со всеми реализациями, кроме background-image , и во всех браузерах (но помните: IE9—11 может игнорировать некоторые контрольные точки). Поэкспериментируйте со слайдером ниже, чтобы увидеть на живом примере, как это может работать:

Запасной вариант

К слову о запасных вариантах. SVG поддерживается во всех современных браузерах, но если ещё требуется поддержка IE8 , то нужно использовать запасные варианты, скорее всего, в виде PNG . Я не буду останавливаться на этом хотя бы потому, что уже пора прекратить пользоваться IE8 ¯\_(ツ)_/¯. В любом случае, если вам всё же нужны запасные варианты, всё усложняется довольно быстро, как и большинство вещей с SVG . Советую прочитать исчерпывающую статью Amelia Bellamy-Royds на CSS-Tricks.

Система иконок с SVG-спрайтами

Я всегда был приверженцем шрифтов иконок. Многим сайтам действительно необходима система упорядочивания иконок, и шрифты иконок предлагают для этого отличную возможность.

И даже если в IE версии 9 и выше нормально заработают встроенные SVG и элементы для ссылок, использование иконок остается более прогрессивной практикой.

Прежде всего, давайте рассмотрим, как это работает.

Для того чтобы работать с иконками, можно создать папку с .svg файлами :

Это одна из самых крутых вещей в работе с SVG — они сами являются исходными файлами.

SVG -файлы могут быть цветными, черно-белыми, разных форм, размеров, какими угодно:

Вы можете через Illustrator (или другую программу) сохранить их как угодно со всеми сопутствующими элементами:

Создание .svg-файла

Если захотите, вы можете сделать это вручную. Я так и сделал. Вам даже не нужно просматривать конечный файл. Просто назовите его svg-defs.svg или как-то в этом роде.

В этом файле должен быть только тег с тегом (который просто означает, что вы определяете элементы для последующего использования), а затем связка тэгов (группа).

Каждый тег будет иметь уникальный идентификатор, и включать полный маршрут к файлу, а также содержать еще много дополнительных данных для каждой иконки:

Опять же вы можете сделать это вручную, но это, конечно, немного трудоемкий процесс. Фабрис Вайнберг создал плагин grunt-svgstore , который автоматизирует данную процедуру.

Если вы никогда не использовали Grunt , можете попробовать его. Вот ссылка на скринкаст , который поможет вам разобраться, как это сделать.

С помощью данной команды вы можете установить Grunt :

Проверьте, доступны ли в нем все задачи:

А затем задайте конфигурацию:

В исходном файле svg-defs.svg каждая иконка (независимо от пути и прочих атрибутов источника. SVG файла) заключается в тег с уникальным идентификатором, включающим префикс и имя файла (без расширения .svg ).

Подключение SVG в верхней части документа

Подключается .SVG файл следующим образом:

Или любым другим способом по вашему усмотрению.

Код должен размещаться в верхней части. К сожалению, в Chrome есть один баг , из-за которого это не будет работать. С этим мы разберемся позже.

Использование иконок в любом месте

Теперь вы можете использовать иконки везде(!), где вам нравится:

Убедитесь, что вы используете соответствующие имена классов SVG для задания размеров:

Ура: вы можете задавать их стили (и стили их частей) с помощью CSS

Одна из причин, по которым мне очень нравятся шрифты иконок, это то, что вы можете оформлять их с помощью CSS.

Эта техника одного окна, которая позволяет нам делать, все что нужно, и даже больше этого:

  1. Мы можем задавать стили для отдельных частей;
  2. SVG имеет намного больше элементов, которыми вы можете управлять, таких как специальные фильтры и кисти.

SVG представляет собой своего рода DOM , так же как JavaScript . Вот некоторые возможности для оформления стилей и их демонстрация на практике: Посмотреть пример на Codepen .

Другой способ: IcoMoon

IcoMoon , который известен, как инструмент для создания шрифтов иконок, на самом деле также предоставляет фантастические возможности по созданию SVG-спрайтов .

После выбора необходимых шрифтов просто нажмите кнопку SVG внизу окна приложения, и на выходе вы получите набор элементов, в том числе демо-страницу, созданную с помощью встроенного SVG-метода :

Поддержка браузерами

Что касается поддержки браузерами, то здесь зоной риска являются IE версии 8 и ниже, Safari 5 и ниже, IOS 4.3 и ниже и Android 2.3 и ниже.

Но если вы ориентируетесь на пользователей « двух последних основных версий »- то, как правило, в подавляющем большинстве браузеров SVG поддерживаются.

Следует помнить, что иконки можно использовать в качестве вспомогательного элемента. В этом случае поддержка браузерами не имеет критического значения.

Если это будет отдельный основной элемент, без которого содержимое сайта не может отображаться, это может стать проблемой.

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

Делать следующим образом будет намного правильнее

В идеале у нас должно быть что-то наподобие следующего:

Это действительно работает в некоторых браузерах, то есть вы могли бы и не включать их в верхней части документа.

Это означает, что будет отправляться дополнительный HTTP-запрос, но тогда вы можете более эффективно использовать кэширование (не раздувать кэш документа).

При тестировании Джонатан Нил обнаружил, что для нормальной работы в тег необходимо включать xmlns-атрибут :

Но даже в этом случае иконки в любой версии IE не поддерживаются. Если вы не хотите поменять все элементы , которые выполняют работу, в .

Джонатан Нил установил и этот факт :

Его демо-версия теперь содержит также метод, который формирует Ajax-запрос к содержимому и включает этот блок, который позволяет обрабатывать заливки и в IE 9. Не так эффективно, скорее как полизаливки.

Я полагаю, что когда-нибудь этот вопрос можно будет решить непосредственно связав с .SVG . Или даже через , работающими с идентификаторами фрагментов URL-адресов в SVG .

Браузеры воспринимают как своего рода DOM :

Теперь, мы можем определять, скажем, конкретный

Но это будет влиять на все объекты этого пути. Вы могли бы придумать что-то на манер:

Но это не работает. Это выходит за пределы DOM . В идеале нужно использовать селектор « hat «:

Но в одних браузерах он не поддерживается, в других не понятно, как будет работать, и будет ли работать вообще.

«Минусы» шрифтов иконок

Векторная основа : ничья

Стили через CSS : Стили через CSS имеют небольшое преимущество перед SVG-спрайтами (ориентированные части, специальные элементы стиля SVG , такие как кисти).

Сбои в работе : На первый взгляд SVG кажется простым в работе (если поддерживается браузером).

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

Или применяете карту « Для области частного использования », и некоторые браузеры могут повторно привязать их к действительно специфическим символам, таким как розы , однако при повторной привязке могут возникнуть сложности с воспроизведением оригинальной структуры.

Или вы захотите разместить файлы @font-face на CDN , но они имеют кросс основу, а Firefox ненавидит это. Таким образом, вам потребуется собственный сервер для корректного обслуживания кросс-заголовков.

Но установки Nginx могут подхватить их неправильно. К сожалению.

Семантика : Не имеет большого значения, но я все же думаю, что использование для изображений имеет больше смысла, чем .

Применимость : Может быть, кто-нибудь подскажет мне? Можем ли мы / могли бы мы придать элементу атрибут заголовка или что-то в этом роде?

, который был бы визуально спрятан?

Обновление : элемент мы могли бы придать . Или, возможно, элемент , использование которого описано в этой спецификации доступа SVG .

Простота в использовании : Инструменты типа Fontello и IcoMoon хороши для работы со шрифтами иконок, но использование специальной папки SVG , я думаю, еще проще.

Данная публикация представляет собой перевод статьи « Icon System with SVG Sprites » , подготовленной дружной командой проекта Интернет-технологии.ру

Про CSS

SVG — это формат векторных изображений, основанный на XML.

SVG имеет массу преимуществ перед растровыми изображениями:

  • векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной;
  • SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения;
  • содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код;
  • поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками;
  • SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется;
  • внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде);
  • внутри файла могут находиться CSS и JavaScript.

See the Pen SVG Car by yoksel (@yoksel) on CodePen.

SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.

Он хорошо подходит для использования в адаптивном дизайне, потому что без потерь растягивается и сжимается, меньше весит и не выглядит размытым на устройствах с высокой плотностью пикселей. Вот, например, скрин с современного смартфона:

Хорошо видно, что SVG (внизу) в этих условиях выглядит гораздо лучше, чем PNG (наверху). Так что если поставить себе задачу сделать сайт, который хорошо выглядит на любых устройствах, SVG очень пригодится.

Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:

В основном, это наборы иконок.

Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.

SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.

Embed/object/iframe

Содержимое доступно для внешнего JavaScript. Хорошая поддержка браузерами (все, кроме IE8 и ниже).

Embed: Object: Iframe:
Embed:


Object:
Iframe:
IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 9+ 5+ 10+ 4+ 3+ 3.2+

Содержимое недоступно для JS.

IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 9+ 5+ 10+ 4+ 4+ 4+

Css backgrounds

Содержимое недоступно для JS. Могут быть проблемы в старых Операх. Не работает в Opera Mini В Opera Mini работает только без viewBox в SVG.

IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 12+ 5+ 16+ 5+ 24+ 5+

Inline SVG

Не работает в Opera Mini.

IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 11.6+ 12+ 7+ 4+ 5.1+

Примеры в посте вставлены как есть, без фолбеков. Можно открыть страницу в интересующем браузере и посмотреть как поддерживаются разные способы вставки.

Способы отображение в старых браузерах:

1. Хак для элемента с фоном:

Вторая строка сработает в браузерах с поддержкой CSS3, старые её проигнорируют и покажут PNG из первой строки.

2. Способ с image

Современные браузеры выберут атрибут xlink:href и покажут SVG, старые выберут src и покажут растровую версию:

Способ найден здесь: lynn.ru/examples/svg/. Про этот способ есть статья у Криса Коера Svg fallbacks, в которой он анализирует этот вариант вставки и предлагает другие.

Способ хорошо работает в IE8 и Opera Mini. Минус способа — загрузка обоих файлов в IE9-11, хотя отобразится только SVG. Также есть проблемы с отображением в 12-й Опере: вместо картинки иногда загружается вот такое:

3. Modernizr

Элементы, содержащие SVG-графику, заворачиваются в div.svg (например). Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg , дальше немного CSS:

Стили сработают только в браузерах, не поддерживающих SVG.

Хорошее решение для IE8 и старше. Проблема может возникнуть с Opera Mini. Она имеет частичную поддержку SVG, поэтому не будет селектора .no-svg , и при этом она не поддерживает SVG в CSS-фонах и Inline Svg, так что они не отобразятся.

4. :root

Селектор :root сработает только в браузерах с поддержкой CSS3, следовательно с его помощью также можно отфильтровать стили для старых и для новых браузеров.

Как и предыдущее решение, подойдет для IE8 и старше, но не поможет в Opera Mini, потому что она поддерживаeт CSS3, поэтому не будет заглушек для элементов с SVG-фоном и инлайновым SVG.

5. Решение для Opera на Presto (например, 12 и Mini)

В Opera 12 SVG-фоны могут вести себя странно, местами до сильного. Совершенно невинный CSS может привести к проблемам отрисовки векторых фонов при прокрутке страницы. Мне удавалось получить такое:

Действующий пример можно увидеть тут: http://jsbin.com/winag/1/edit. Откройте ссылку в Opera 12 и прокрутите страницу вверх-вниз.

В Opera Mini большие проблемы c фоновым SVG, а инлайновый не поддерживается совсем.

Opera Mini и фоновый SVG:

На этот случай можно использовать хак, который сработает только в Опере:

Способ использует специфичный для оперы селектор, подробнее про такие селекторы можно почитать тут: opera.com/docs/specs/presto2.12/css/o-vendor

6. Селектор только для Opera Mini

Рассмотренная тема — только верхушка айсберга, в спецификации есть ещё много всего интересного. Продолжение следует : )

Как проектировать, создавать и анимировать SVG

27 октября 2020

Вы можете считать Масштабируемую Векторную Графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.

Флаг Японии сделанный с помощью SVG

Это пример SVG. Если посмотреть на его исходный код, то можно заметить, что он состоит из тегов и атрибутов так же, как и в HTML-документе. Все они находятся внутри тега . Здесь есть тег , рисующий прямоугольник с чёрной рамкой и белым цветом фона. И внутри него эллипс (почти что круг, но обратите внимание на атрибуты и ), который залит красным цветом.

SVG в вебе можно использовать двумя способами. Например, использовать SVG-файлы в атрибуте src тега . То есть мы получим — точно так же, как с PNG или JPEG-изображениями.

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

SVG бесконечно масштабируем, отзывчив, имеет очень маленький размер файла, перспективен для следующего поколения экранов с неисчислимой плотностью пикселей и может быть стилизован, анимирован и оживлён при помощи известных веб-технологий — CSS и JavaScript.

Все эти вещи ранее были возможны только с использованием Flash, для которого требовался flash-плеер и много сложной работы. К тому же сейчас никто не любит использовать Flash.

Векторные картинки против растровых

Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.

Растровые изображения состоят из фиксированного числа пикселей, поэтому изменение размера картинки невозможно без влияния на её качество. Вы наверняка замечали, что изменение размера таких изображений делает их зернистыми и размытыми. Всё это происходит из-за фиксированного количества пикселей.

Вот что происходит при увеличении растрового изображения:

Что происходит при увеличении растрового изображения

С другой стороны, векторное изображение является гибким и не зависит от разрешения устройства. Они построены на использовании геометрических фигур — линий, прямоугольников, кривых или последовательности команд. Вы можете изменять их атрибуты, такие как цвет, заливка и рамка.

Один из самых распространённых вариантов использования векторных изображений — это иконки и анимация маленьких иконок. Они всегда будут чёткими даже на дисплеях с самой высокой плотностью пикселей, таких как новые 4K смартфоны.

Вот что происходит при увеличении векторного изображения:

Что происходит при увеличении векторного изображения

SVG-теги

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

Тег группирует элементы вместе и ведёт себя как контейнер для связанных графических элементов. Элемент также может содержать в себе другие элементы , которые будут вложены в него.

Вот пример тега :

Элемент представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.

Вот пример тега :

Элемент позволяет клонировать и повторно использовать графические элементы SVG, в том числе такие элементы, как , , а также другие элементы.

Вот пример тега :

определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием

может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

  1. «M150 0» — переместись на (150,0);
  2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
  3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
  4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега

И, наконец, элемент определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега .

Вот пример тега :

Создаём SVG

Есть множество доступных SVG-редакторов, например, Adobe Illustrator или Inkscape. Последний бесплатен и с открытым исходным кодом. Поскольку SVG-файлы это XML-код, то в крайнем случае вы можете написать его вручную.

Для этого примера я буду использовать простой онлайн-редактор. В нём вы можете создавать SVG без необходимости устанавливать что-либо ещё.

  1. Для начала создадим круг.
  2. Затем добавим больше кругов и сохраним исходный код.

CSS3-анимация

SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

Обратите внимание, что каждый тег path имеет уникальный идентификатор. Это связано с тем, что нам важна задержка при создании анимации для нескольких слов.

Анимационный тег

Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.

Вот пример анимации SVG с помощью тега :

Анимация и интерактивность, основанная на JavaScript

Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов ( id или class ).

Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.

В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:

Почему нельзя использовать SVG для всех изображений?

SVG больше всего подходит для изображений, которые могут быть построены с помощью нескольких геометрических фигур и формул. Хотя, в принципе, вы можете конвертировать ваши фотографии в SVG, но размер изображения будет несколько мегабайт, что нарушит цель SVG — экономить место. SVG лучше использовать для иконок, логотипов и небольшой анимации.

SVG для устройств

На этой странице

О формате SVG

Битовые форматы изображения для Интернета (GIF, JPEG, WBMP и PNG) описывают изображения с помощью сетки пикселей. Файлы получаются большими с одним (часто низким) разрешением и занимают значительную часть полосы пропускания. В отличие от этого, SVG — это векторный формат, описывающий изображения как фигуры, контуры, текст и эффекты фильтра. Полученные файлы компактны и обеспечивают качественную графику в Интернете, на печати и даже портативных устройствах с ограниченными ресурсами. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично поддерживает текст и цвета, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям. С форматом SVG можно использовать XML и JavaScript для создания веб-графики, отвечающей на действия пользователя такими сложными эффектами, как подсветка, всплывающие подсказки, звуки, анимация и т. п.

Можно сохранить работу в формате SVG, используя команду «Сохранить», Сохранить как , «Сохранить копию» или Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды «Сохранить», Сохранить как или «Сохранить копию». Команда Сохранить для Web и устройств предоставляет ограниченный набор параметров экспорта в формате SVG (только те, которые используются для работы в Интернете).

Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.

Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент ( ) . (Например, слой «Button1» становится ). Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение:нет» стиля SVG.

Если нужно, чтобы объекты на разных слоях выглядели прозрачными, корректируйте непрозрачность каждого объекта, а не каждого слоя. Если непрозрачность меняется на уровне слоя, итоговый файл SVG не покажет прозрачность так, как она выглядит в Illustrator.

Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.

Для повышения производительности файла SVG используйте символы в объекте и упрощайте контуры. Кроме того, если в первую очередь требуется производительность, старайтесь не пользоваться кистями, которые производят большое количество данных контура («Уголь», «Пепел», «Ручка»).

Используйте фрагменты, карты ссылок и сценарии для добавления веб-ссылок в файл SVG.

Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки). Сценарии могут также использовать объектную модель документов (DOM) для обращения к файлу SVG и внесения изменений (например, для вставки или удаления элементов SVG).

Применение эффектов SVG

Эффекты SVG можно использовать для добавления в объект таких графических свойств, как тени. Эффекты SVG отличаются от битовых эквивалентов тем, что они основаны на XML и не зависят от разрешения. Фактически эффект SVG — это не что иное, как серия свойств XML, описывающих различные математические операции. Полученный эффект визуализируется для целевого объекта, а не для исходной графики.

Illustrator предоставляет набор эффектов SVG по умолчанию. Можно использовать эффекты с их свойствами по умолчанию, отредактировать код XML для создания пользовательских эффектов или написать код для новых эффектов SVG.

Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings/ /Application Data/Adobe/Adobe Illustrator CS5 Settings/ . Можно изменить или удалить существующие определения фильтра, а также добавить новые.

Для применения эффекта с параметрами по умолчанию выберите эффект в нижней части вложенного меню Эффект > Фильтры SVG .

Для применения эффекта с параметрами пользователя выберите Эффект > Фильтры SVG > Применить фильтр SVG . Выберите эффект в диалоговом окне и нажмите кнопку «Редактировать SVG-фильтр» . Отредактируйте код по умолчанию и нажмите кнопку ОК .

Для создания и применения нового эффекта выберите Эффект > Фильтры SVG > Применить фильтр SVG . В диалоговом окне нажмите кнопку «Новый фильтр SVG» и новый код и нажмите ОК .

Если применяется эффект «Фильтр SVG», Illustrator отображает растрированную версию эффекта на монтажной области. Можно контролировать разрешение миниатюры, изменяя параметр разрешения растрирования документа.

Примечание. Если объект использует несколько эффектов, эффект SVG должен быть последним. Другими словами, он должен отображаться в нижней части палитры «Отображение» (над записью «Прозрачность»). Если эффект SVG сопровождается другими эффектами, вывод SVG будет осуществлен в виде растрового объекта.

Импорт эффектов из файла SVG

Выберите Эффект > Фильтр SVG > Импортировать фильтр SVG .

Выберите файл SVG, из которого хотите импортировать эффекты, и нажмите кнопку Открыть .

Обзор палитры «Интерактивность SVG»

Палитра «Интерактивность SVG» ( Окно > Интерактивность SVG ) используется для добавления интерактивности в объект при его экспорте для просмотра в веб-браузере. Например, создав событие, запускающее команду языка JavaScript, можно быстро создать движение на веб-странице, когда пользователь выполняет такое действие, как перемещение курсора мыши над объектом. Палитра «Интерактивность SVG» позволяет также увидеть все события и файлы JavaScript, связанные с текущим файлом.

Удаление события из палитры «Интерактивность SVG»

  • Чтобы удалить одно событие, выберите его и нажмите кнопку «Удалить» или выберите Удалить событие в меню палитры.
  • Для удаления всех событий выберите Удалить события в меню палитры.

Просмотр, добавление или удаление событий, связанных с файлом

Нажмите Добавить для поиска дополнительных файлов JavaScript.

Нажмите Удалить для удаления выбранной записи JavaScript.

Добавление интерактивности SVG в объект

Выберите событие на палитре «Интерактивность SVG» (см. События SVG).

События SVG

Запускает действие, когда элемент получает фокус (например, выделение курсором).

Запускает действие, когда элемент теряет фокус (часто при переходе фокуса другому элементу).

Запускает действие по щелчку кнопки мыши или нажатию клавиши в зависимости от элемента SVG.

Запускает действие, когда пользователь нажимает кнопку мыши на элементе.

Запускает действие, когда пользователь отпускает кнопку мыши на элементе.

Запускает действие по щелчку кнопки мыши на элементе.

Запускает действие при наведении курсора на элемент.

Запускает действие, когда курсор находится на элементе.

Запускает действие, когда пользователь уводит курсор с элемента.

Запускает действие при нажатии клавиши.

Запускает действие, когда пользователь держит клавишу нажатой.

Запускает действие, когда пользователь отпускает клавишу.

Запускает действие после того, как документ SVG был полностью проанализирован браузером. Используйте это событие для вызова разовых функций инициализации.

Запускает действие при неправильной загрузке элемента или другой ошибке.

Запускает действие при остановке загрузки страницы до того, как элемент полностью загружается.

Запускает действие при удалении документа SVG из окна или кадра.

Запускает действие, когда меняется масштаб для документа.

Запускает действие, когда меняется размер окна просмотра документа.

Запускает действие при прокрутке или панорамировании окна просмотра документа.

Параметры экспорта файлов SVG, оптимизированных для Интернета

Добавлен новый параметр экспорта в формате SVG ( Файл > Экспорт > SVG ). Для создания стандартизированных файлов SVG, оптимизированных для Интернета, для проектов в области веб-дизайна и дизайна графического интерфейса пользователя используется новый рабочий процесс.

Доступны следующие варианты:

  • Стили. Выберите способ записи полученного кода в файл SVG. Доступные варианты: «Внутренние таблицы CSS», «Встроенный стиль» и «Атрибуты представления».
  • Шрифт. Выберите представление шрифтов в файле SVG. Контуры сохраняют определение линии и являются самыми совместимыми.
  • Изображения. Выберите, нужно ли при сохранении встроить изображения в документ или привязать их к документу.
  • ID объектов. Выберите способ назначения типов идентификатора (имен) объектам в файле SVG. Доступные варианты: «Имена слоев», «Минимальный» и «Уникальный». Этот параметр определяет способ обработки одинаковых имен объектов, а также именование объектов в экспортируемом файле CSS.
  • Десятичное значение. Выберите объем информации, который необходимо сохранить в зависимости от требуемой точности местоположения объектов. При увеличении десятичного значения увеличивается точность размещения объектов и, соответственно, увеличивается качество отображения визуализируемых файлов SVG. Однако при увеличении десятичного значения также увеличивается размер получаемого в результате экспорта файла SVG.
  • Уменьшить. Оптимизирует размер файла в формате SVG путем удаления пустых групп и пробелов. При выборе этого параметра также снижается удобочитаемость полученного кода SVG.
  • Адаптивный SVG. При установке этого параметра обеспечивается масштабирование созданного SVG в окне браузера. Абсолютные значения не используются.
  • Показать код. Открывает экспортированное содержимое в текстовом редакторе по умолчанию.
  • Показать в браузере(значок). Открывает изображение в веб-браузере по умолчанию.

Frontender Magazine

SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

  • Небольшие размеры файлов, отличное сжатие;
  • Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
  • Хорошо выглядит на ретине;
  • Широкие возможности, которые предоставляют фильтры и интерактивность.

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.


Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

Добавляем SVG на страницу с помощью тега

Если сохранить изображение SVG в файл, то его можно вставить с помощью тега .

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример:

Поддержка браузерами

SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.

Если вы хотели бы использовать SVG, но проект поддерживает браузеры, которые не могут вставлять его через img , есть разные варианты. Я описал некоторые приемы в нескольких своих мастер-классах.

Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:

Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.

Добавляем SVG через background-image

Использовать SVG в качестве фона c помощью CSS-свойства background-image так же просто, как и вставка с помощью тега img .

Обратите внимание, что для селектора .logo задан размер background-size . Это необходимо, иначе будет видна только верхняя левая часть изображения SVG, у которого исходный размер намного больше. Эти размеры прописаны с учётом соотношения сторон изображения в оригинале. Можно также использовать для background-size значение contain , чтобы убедиться в том, что изображение поместится в родительский контейнер, если вам не известно какого размера оно должно быть.

Поддержка браузерами

Вставка SVG через свойство background-image по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с img . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.

В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании img . Если заменить background-image на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:

Общая проблема при использовании и background-image …

Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!

Добавляем SVG непосредственно в документ

Помните, как при необходимости можно получить SVG-код прямо при сохранении изображения в Illustrator? Ещё можно просто открыть SVG-файл в текстовом редакторе и скопировать его код. Этот код можно вставить прямо в HTML-документ, и SVG-изображение будет отображаться точно так же, как если бы его вставили с помощью тега img .

Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.

Если вы используете серверный язык, который позволяет получить содержимое файла и вставить его в документ, вы по крайней мере сможете очистить свой документ от блоков SVG кода. Вот так:

Сначала оптимизируем

Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.

Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.

Затем управляем с помощью CSS

Видите, насколько сильно теперь SVG похоже на HTML? Это потому, что они оба не что иное, как XML (теги и всякая всячина внутри). В нашем проекте есть два составляющих элемента, и

. Можно просто открыть код и присвоить им классы, как любому другому элементу HTML.

Теперь эти отдельные элементы можно контролировать с помощью специального CSS для SVG. Необязательно добавлять CSS в сам SVG, его можно разместить где угодно, даже в файле с глобальными стилями. Обратите внимание, что для элементов SVG есть специальный набор свойств CSS. Например, нельзя использовать background-color , вместо него есть fill . Однако кое-что стандартное тоже можно использовать, например, :hover .

Более того, в SVG можно использовать фильтры, например размытие:

И его можно применить из CSS:

Пример того, что может получиться:

Поддержка браузерами

Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.

Для этого способа вставки SVG можно использовать следующие приемы деградации:

И снова используем Modernizr:

Добавляем SVG на страницу с помощью тега

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.

На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:

При таком подходе не возникают проблемы с кэшированием, и он поддерживается браузерами лучше, чем другие. Но если использовать внешний файл со стилями или встроенный в документ, CSS-навороты работать не будут, нужно добавить элемент в сам SVG-файл.

Внешние файлы со стилями для SVG, вставленного с помощью

Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега . Вот что нужно добавить в SVG-файл перед открывающим тегом :

Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).

Использование Data URI для SVG

SVG-файл можно уменьшить еще сильнее, если конвертировать его в Data URI. На Mobilefish.com для этого есть онлайн-конвертер. Просто скопируйте содержимое SVG-файла и заполните форму, результат конвертирования можно будет скопировать с текстового поля. Не забудьте удалить переносы строки в полученном коде. Выглядеть он будет как полнейшая тарабарщина:

Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо [data] в следующих примерах.

Добавление на страницу с использованием тега

Добавление на страницу в качестве фона с использованием CSS

Добавление на страницу с использованием тега

Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.

Консольные штучки для перекодирования SVG в base64:

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

Используйте openssl base64 или cat path/to/file.png | openssl base64 | tr -d ‘\n’ | pbcopy чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

Материалы для дальнейшего чтения

  • Дэвид Бушел: Букварь фронтендера по SVG-хакерству
  • Дэвид Бушел: Независимость от разрешения с SVG
  • MDN про SVG
  • Поддержка браузеров для всяких всячин повязанных с SVG.
  • Питер Гестон (Peter Gasston): Создание лучших SVG-спрайтов при помощи анкерных идентификаторов
  • simuari: SVG стеки
  • SVG.js — «Упрощённая библиотека для манипуляции и анимации SVG»
  • В Emmet есть отличный способ генерировать data URI для SVG прямо в редакторе кода
  • В Compass также есть вспомогательное средство для data URI
  • Adobe: Стилизация SVG
  • Эндрю Дж. Бейкер (Andrew J. Baker): Приручаем зверя SVG
  • Альтернатива Illustrator: Inkscape, Sketch
  • Кристер Кари (Krister Kari): Использование SVG-изображений для мобильных браузеров

Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:

Примечания

1. Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Введение в SVG

SVG ( Scalable Vector Graphics , в переводе масштабируемая векторная графика ) — это язык для описания двухмерной графики в формате XML . Можно сказать, что SVG – это HTML для графики. Он включает в себя несколько типов различных объектов:

  • векторную графику (линии, окружности, кривые)
  • текст (с форматированием, заданием стилей и эффектов)
  • растровые изображения (внедряемые в SVG –документ).

Графические возможности языка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator:

  • произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения,
  • разнообразные стили линий — линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,
  • возможность использования кривых Безье (кубических и квадратичных),
  • поддержка прозрачности всего изображения или его части, с заданной степенью,
  • возможность применения фильтров, типичных для растровой графики – размытие, попиксельное смешивание, наложение,
  • поддержка Unicode – возможность отображения в одном SVG документе текстов на различных языках и различными шрифтами,
  • расположение текстовых строк вдоль произвольных кривых,
  • встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента,
  • встроенные средства для создания интерактивности, а также поддержка JavaScript и DOM,
  • поддержка каскадных таблиц стилей (CSS),
  • поддержка антиалиасинга.

Название «масштабируемая векторная графика » отражает следующие превосходства языка:

  • SVG –документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис. 1.1) до мониторов PC и ноутбуков.
  • SVG –документы представляются в векторном формате, следовательно, их можно масштабировать без потери качества по сравнению с растровыми изображениями (рис. 1.2).
  • SVG –графика может быть создана «на лету» при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения.

Объектная модель SVG документа основана на принятом консорциумом W3C в 2000 году стандарте DOM (Document Object Model ) Level-2. Это дает возможность использования стандартных языков для начального построения и произвольного манипулирования любыми элементами изображения. Составной частью стандарта SVG является модель событий, позволяющая привязать произвольный сценарий к любому фрагменту SVG документа и достаточно легко реализовывать интерактивные графические изображения.

SVG разрабатывается консорциумом W3C при поддержке таких крупных компаний, как Microsoft, Adobe, Corel, IBM , Hewlett-Packard, Sun Microsystems, Canon , Kodak и многих других (всего более двадцати). От их совместных усилий зависят стандартизация многих деталей языка, а также скорость его создания.

Стандарт SVG 1.0 (http://www.w3.org/TR/2001/REC-SVG-20010904/) был принят в качестве спецификации консорциумом в сентябре 2001 г. Стандарт SVG 1.1 (http://www.w3.org/TR/SVG/) и его версии SVG mobile profiles (http://www.w3.org/TR/SVGMobile/) ( SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г. Ведутся работы по созданию стандарта SVG 1.2 (http://www.w3.org/TR/2004/WD-SVG12-20040318/), который сейчас имеет статус черновика. Эта версия языка будет содержать ряд новых свойств: встроенные атрибуты фигурного форматирования текста, поддержка аудио и видео, а также более полная поддержка DOM .

На момент написания этого курса рабочей версией является SVG 1.1. Поэтому именно его мы и будем рассматривать.

Поддержка SVG браузерами

В настоящее время SVG применяется в Интернете сравнительно мало. На сайтах, где используются SVG , оно не представляется непосредственно, а конвертируется в растровое изображение. Для этого используются различные библиотеки, например Batik (на языке Java ), которые «на лету» выполняют преобразования.

Браузеры Internet Explorer 9, Opera (начиная с 8-й версии) и Mozilla способны самостоятельно, без дополнительных утилит воспроизводить формат SVG . Что касается прочих браузеров – в том числе и Internet Explorer 6 (входящего в состав Windows XP), то им для воспроизведения нужны плагины . Наиболее распространен Adobe SVG Viewer , который можно бесплатно скачать с сайта Adobe (http://www.adobe.com/svg/viewer/install/ ) (был выпущен в сентябре 2003 года и с тех пор не обновлялся)

SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует утилита для Adobe Acrobat Pro.

Для мобильных устройств, телефонов и PDA , также существует поддержка SVG . Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). Имеется также конкурент SVG — Macromedia Flash Lite , который частично поддерживает SVG Tiny начиная с версии 1.1.

На сайте W3C размещен официальный список программного обеспечения для SVG :

SVG примеры ↓

Чтобы оценить всю мощь технологии SVG и получше познакомиться с синтаксисом этого языка, можно изучить графические и программные примеры, представленные списком на этой странице.

Для просмотра примеров вам понадобится браузер последней версии (Firefox, Opera, Chrome, Safari, IE9).

1. Овалы, созданные при помощи JavaScript и path.

2. Бабочка. Достаточно сложный для векторной графики рисунок.

4. Молекулярная схема, увеличенная в несколько раз. Демонстрируется одно из преимуществ SVG — масштабирование без потери качества.

5. Круги. Полупрозрачные, разноцветные, пересекающиеся.

6. Те же круги, но на фоне растрового рисунка.

7. Управляемый треугольник. Демонстрация того, что каждый элемент SVG — это элемент DOM (такой же элемент страницы, как, например,

10. Круги, реагирующие на клик мышкой. Демонстрация связи SVG и JavaScript onclick.

11. Круг, который можно перемещать мышкой. Демонстрация связи SVG и JavaScript.

12. Градиент, созданный с помощью SVG.

15. Тигренок. Еще один достаточно сложный для векторной графики рисунок.

16. Прозрачные звездочки. Демонстрация параметра opacity и взаимодействия SVG и JavaScript.

16. Прозрачные звездочки 2. Демонстрация CSS прозрачности.

21. Демонстрация Polygons 2. CSS свойство :hover позволяет присваивать стиль элементу при наведении мышкой.

22. Демонстрация Polygons 3. attribute-selectors, CSS :hover

24. Пара игрушек, написанных на SVG и JavaScript: тетрис и платформа.

26. Многоугольники 2. Демонстрация смеси SVG и CSS (:hover).

27. Примеры SMIL анимации.

28. Демонстрация работы JS библиотеки Raphael тут.

Просмотр исходного кода — в опциях правой кнопки мышки или в меню браузера после перехода по ссылке на пример.

Дата: 2010.07.04 в 13:47:36

Отсутствует пример:
11. Круг, который можно перемещать мышкой

Frontender Magazine

SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

  • Небольшие размеры файлов, отличное сжатие;
  • Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
  • Хорошо выглядит на ретине;
  • Широкие возможности, которые предоставляют фильтры и интерактивность.

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.

Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

Добавляем SVG на страницу с помощью тега

Если сохранить изображение SVG в файл, то его можно вставить с помощью тега .

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример:

Поддержка браузерами

SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.

Если вы хотели бы использовать SVG, но проект поддерживает браузеры, которые не могут вставлять его через img , есть разные варианты. Я описал некоторые приемы в нескольких своих мастер-классах.

Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:

Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.

Добавляем SVG через background-image

Использовать SVG в качестве фона c помощью CSS-свойства background-image так же просто, как и вставка с помощью тега img .

Обратите внимание, что для селектора .logo задан размер background-size . Это необходимо, иначе будет видна только верхняя левая часть изображения SVG, у которого исходный размер намного больше. Эти размеры прописаны с учётом соотношения сторон изображения в оригинале. Можно также использовать для background-size значение contain , чтобы убедиться в том, что изображение поместится в родительский контейнер, если вам не известно какого размера оно должно быть.

Поддержка браузерами

Вставка SVG через свойство background-image по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с img . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.

В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании img . Если заменить background-image на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:

Общая проблема при использовании и background-image …

Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!

Добавляем SVG непосредственно в документ

Помните, как при необходимости можно получить SVG-код прямо при сохранении изображения в Illustrator? Ещё можно просто открыть SVG-файл в текстовом редакторе и скопировать его код. Этот код можно вставить прямо в HTML-документ, и SVG-изображение будет отображаться точно так же, как если бы его вставили с помощью тега img .

Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.

Если вы используете серверный язык, который позволяет получить содержимое файла и вставить его в документ, вы по крайней мере сможете очистить свой документ от блоков SVG кода. Вот так:

Сначала оптимизируем

Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.

Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.

Затем управляем с помощью CSS

Видите, насколько сильно теперь SVG похоже на HTML? Это потому, что они оба не что иное, как XML (теги и всякая всячина внутри). В нашем проекте есть два составляющих элемента, и

. Можно просто открыть код и присвоить им классы, как любому другому элементу HTML.

Теперь эти отдельные элементы можно контролировать с помощью специального CSS для SVG. Необязательно добавлять CSS в сам SVG, его можно разместить где угодно, даже в файле с глобальными стилями. Обратите внимание, что для элементов SVG есть специальный набор свойств CSS. Например, нельзя использовать background-color , вместо него есть fill . Однако кое-что стандартное тоже можно использовать, например, :hover .

Более того, в SVG можно использовать фильтры, например размытие:

И его можно применить из CSS:

Пример того, что может получиться:

Поддержка браузерами

Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.

Для этого способа вставки SVG можно использовать следующие приемы деградации:

И снова используем Modernizr:

Добавляем SVG на страницу с помощью тега

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.

На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:

При таком подходе не возникают проблемы с кэшированием, и он поддерживается браузерами лучше, чем другие. Но если использовать внешний файл со стилями или встроенный в документ, CSS-навороты работать не будут, нужно добавить элемент в сам SVG-файл.

Внешние файлы со стилями для SVG, вставленного с помощью

Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега . Вот что нужно добавить в SVG-файл перед открывающим тегом :

Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).

Использование Data URI для SVG

SVG-файл можно уменьшить еще сильнее, если конвертировать его в Data URI. На Mobilefish.com для этого есть онлайн-конвертер. Просто скопируйте содержимое SVG-файла и заполните форму, результат конвертирования можно будет скопировать с текстового поля. Не забудьте удалить переносы строки в полученном коде. Выглядеть он будет как полнейшая тарабарщина:

Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо [data] в следующих примерах.

Добавление на страницу с использованием тега

Добавление на страницу в качестве фона с использованием CSS

Добавление на страницу с использованием тега

Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.

Консольные штучки для перекодирования SVG в base64:

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

Используйте openssl base64 или cat path/to/file.png | openssl base64 | tr -d ‘\n’ | pbcopy чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

Материалы для дальнейшего чтения

  • Дэвид Бушел: Букварь фронтендера по SVG-хакерству
  • Дэвид Бушел: Независимость от разрешения с SVG
  • MDN про SVG
  • Поддержка браузеров для всяких всячин повязанных с SVG.
  • Питер Гестон (Peter Gasston): Создание лучших SVG-спрайтов при помощи анкерных идентификаторов
  • simuari: SVG стеки
  • SVG.js — «Упрощённая библиотека для манипуляции и анимации SVG»
  • В Emmet есть отличный способ генерировать data URI для SVG прямо в редакторе кода
  • В Compass также есть вспомогательное средство для data URI
  • Adobe: Стилизация SVG
  • Эндрю Дж. Бейкер (Andrew J. Baker): Приручаем зверя SVG
  • Альтернатива Illustrator: Inkscape, Sketch
  • Кристер Кари (Krister Kari): Использование SVG-изображений для мобильных браузеров

Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:

Примечания

1. Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих