Доступные SVG

Подробная статья об оформлении содержимого в элементе SVG и преодолении связанных с этим проблем.

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

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

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

Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG

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

4 основных группирующих и связывающих элемента SVG это , , and .

Элемент (сокращение от “group”) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов (типа Adobe Illustrator) элемент по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.

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

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

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

У элемента есть еще одно важное преимущество: он принимает атрибут viewBox , который позволяет масштабирование внутри любой области видимости.

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

Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор - это атрибут xlink:href и спозиционировать его, задав атрибуты x и y . Вы можете применить стили к элементу и они будут каскадироваться на содержимое этого элемента.

Но что является содержимым ? Куда он клонируется? И как каскад CSS работает с ним?

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

• Структурирование, группировка и ссылки в SVG - Элементы g, use, defs и symbol
• Разбираемся в системе координат SVG (Часть 1): Viewport, viewBox и PreserveAspectRatio

SVG и теневой DOM

Когда вы ссылаетесь на элемент с помощью , ваш код выглядит примерно так:

На экране отображается иконка, содержимое которой определено внутри , но на самом деле это содержимое элемента , которое является клоном .

Но элемент это всего лишь один самозакрывающийся элемент - в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое ?

Ответ - в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).

Что такое теневой DOM?

Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же - теневой DOM.

В случае с элементом SVG , содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в . В данном случае это теневой хост.

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

Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к .

Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ - да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано .

После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента , ссылающегося на содержимое элемента . Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого .

Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.

Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:

• Теневой DOM 101 (перевод на Frontender.info)
• Введение в теневой DOM (Видео)

С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое внутри теневого DOM, ведь нам важно иметь возможность оформлять его. Весь смысл использования это возможность создавать различные копии элемента и в большинстве случаев нам надо иметь возможность стилизовать каждую копию по-разному. Например, это может быть лого в двух цветовых темах или многоцветные иконки для разных цветовых тем. Так что для нас важно иметь возможность сделать это с помощью CSS.

Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:

Use path#line { stroke: #009966; }

Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.

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

На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.

Теперь, когда мы выяснили это, вернемся к нашему элементу и его содержимому.

Мы знаем, что мы не можем задать стили внутри , используя CSS селекторы.

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

Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри , применив селектор к самому элементу с расчетом, что каскад и наследование сделают свое дело.

Однако, это вызывает пару вопросов:

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

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

1. Удаление атрибутов ради последующей установки определенных свойств сбросит значения этих свойств на дефолтные, а это, как правило, черная заливка и обводка (применительно к цветам).
2. Сбрасывая значения, вы вынуждаете себя задавать стили для всего набора свойств.
3. Презентационные атрибуты, которые изначально заданы, являются отличным запасным вариантом на случай возникновения проблем с внешними стилями. Если CSS не загрузится, у ваших иконок будет по-прежнему привлекательный вид.

Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.

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

Давайте начнем с простых примеров и постепенно перейдем к сложным.

Переписывание значений презентационных атрибутов с помощью CSS

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

Это просто благодаря ключевому слову CSS inherits . Взгляните на следующий пример - иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project .

Содержимое нашей иконки с мороженым (path) определено внутри элемента , а, значит, оно по умолчанию не будет выводится на холст.

Мы выводим множественные экземпляры иконки с помощью .

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

Icon { width: 100px; height: 125px; }

С этим кодом мы получили следующий результат:

Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого . Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры - он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.

Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:

Use.ic-1 { fill: skyblue; } use.ic-2 { fill: #FDC646; }

Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path . Чтобы это не произошло, нам надо вынудить path унаследовать цвет:

Svg path { fill: inherit; }

Вуаля! Цвета, заданные элементам теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:

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

Оформление содержимого с помощью свойства CSS all

Некоторое время назад, при работе над иконкой, активируемой с помощью , мне надо было, чтобы один из элементов внутри него унаследовал все стили , такие как fill , stroke , stroke-width , opacity и даже transform . Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.

Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:

Path#myPath { fill: inherit; stroke: inherit; stroke-width: inherit; transform: inherit; /* ... */ }

Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit .

К счастью, нам поможет свойство CSS all . В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.

Используя свойство all мы можем сделать так:

Path#myPath { all: inherit; }

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

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

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

Использование переменной CSS currentColor для оформления содержимого

Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом .

Идея состоит в том, чтобы одновременно применять к свойства fill и color , а затем каскадировать эти свойства к содержимому , используя возможности переменной currentColor . Посмотрим на пример кода, чтобы понять, как это работает.

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

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

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

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

Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет - это будет место в разметке, где определяется иконка, то есть внутри . Теперь этот фрагмент выглядит так:

Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента с помощью inherit .

Если бы мы использовали ключевое слово inherit , чтобы вынудить презентационные атрибуты унаследовать значения от , обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor .

Теперь, используя свойства fill и color в мы добавим стили к капле из логотипа:

Codrops-1 { fill: #4BC0A5; color: #A4DFD1; } .codrops-2 { fill: #0099CC; color: #7FCBE5; } .codrops-3 { fill: #5F5EC0; color: #AEAFDD; }

Каждый элемент получает собственное значение fill и color . В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill , а цвет свойства color используется для задания атрибута fill во втором контуре.

Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента за счет использования переменной currentColor . Изящно, не правда, ли?

Вот демо с использованным кодом:

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

Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом ? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen . Посмотрим, как это работает.

Будущее: оформление содержимого c помощью переменных CSS

Код робота содержит все составляющие его цвета:

Теперь, мы не будем использовать переменные CSS в качестве значений атрибута fill для каждого контура. Вместо этого мы будем их использовать в качестве цветов заливки используя свойство CSS fill , сохранив на месте все атрибуты fill . Эти атрибуты будут использоваться в качестве запасного варианта для браузеров, не поддерживающих переменные CSS - изображение будет выглядеть в своем изначальном виде, если переменные CSS не работают.

С добавленными переменными код будет следующим:

Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill .

Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью :

После этого зададим значения переменных для use , чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary , secondary и tertiary .

#robot-1 { --primary-color: #0099CC; --secondary-color: #FFDF34; --tertiary-color: #333; }

Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:

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

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

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

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

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

Итак, теперь код нашего робота выглядит так:

И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.

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

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

Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.

Подводя итоги

Это была большая статья.

Используя возможности каскада CSS, оформление содержимого , хранимого в теневом DOM, становится менее сложным. А с переменными CSS (currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.

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

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

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

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

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

​

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Check out this Pen!

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

If (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

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

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

Kiwi Corp .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

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

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

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

Main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }

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

Использование “inline” SVG

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

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

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

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

Kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }

В SVG имеются забавные фильтры. Например размытие:

...

Затем вы можете при необходимости применить это в css:

Ground:hover { filter: url(#pictureFilter); }

Вот, что получилось:

Check out this Pen!

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

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

...

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

Logo-fallback { display: none; /* Make sure it"s the same size as the SVG takes up */ } .no-svg .logo-fallback { background-image: url(logo.png); }

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

No-svg .logo { width: 200px; height: 164px; background-image: url(kiwi.png); }

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

...

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

​

Вы можете использовать этот код где угодно! Нпример:

Logo { background: url(data:image/svg+xml;base64,); }

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!

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

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

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... etc

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

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

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

В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)

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

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

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

• внутри
• описание, при необходимости (оно не будет зачитываться).

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

Более длинное и полное описание сложной графики.

В теге

• 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 , в котором будет находится содержимое

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

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

• обновите текст названия так, чтобы он отражал предназначение иконки, допустим, это сервисная поддержка мобильных устройств.
• добавьте role="img" в

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

Однако, если у большинства пользователей более старые версии Chrome, то нам надо добавить id="xxxx" к Success! Your order went through.

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

Для иконок-ссылок без текста, мы можем использовать aria-label в элементе , чтобы добавить описательный альтернативный текст. В нашем случае к ссылке добавлен aria-label="See Picked Pens" .

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

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

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

CodePen

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

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

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

0 items in your shopping cart

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

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

Замечательно, что мы можем использовать 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 - удалите все странности, создаваемые Illustrator. Например, к нашему элементу добавлено несколько . Скрин ридер может зачитать отдельные буквы вместо слова целиком (“J” “a” “w” “s” “- 44%” вместо “Jaws - 44%”). Поэтому надо удалить необязательные , оборачивающие отдельные буквы.

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

J a w s - 44%

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

Jaws - 44%

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Затем добавим id к и привяжем его к

An Interactive Timeline

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

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

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

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

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

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

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

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

A gray kitten tangled in a ball of yarn.

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

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

A:focus , a:hover { stroke: black; stroke-width: 5; paint-order: stroke; }

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

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

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

@media screen and (-ms-high-contrast: active) { .icon svg { /* select a color that will contrast well on black or white because other color modes can be chosen and you need a color that will work with either */ fill: green; } } /* black text on white background *. @media screen and (-ms-high-contrast: black-on-white) { .icon svg { /* select a dark color that will contrast on black (#fff is too much contrast) */ fill: #333; } } /* black text on white background */ @media screen and (-ms-high-contrast: white-on-black) { .icon svg { /* select a light color that will contrast on white (#000 is too much contrast) */ fill: #efefef; } }

Заключение

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

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

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

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

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

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

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

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

Microsoft:

• https://connect.microsoft.com/​IE/Feedback/Details/​2483564

Mozilla:

• https://bugzilla.mozilla.org/​show_bug.cgi?​id=1257399 by Léonie Watson
• SVGOMG by Jake Archibald
• We’ll Always Have Paris: Using SVG Namespacing and XLink by Dudley Storey
• Basic screen reader commands for accessibility testing by The Paciello Group

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

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

​

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

if (!Modernizr.svg) { $(".logo img").attr("src" , "images/logo.png");

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

< img src = "image.svg" onerror = "this.onerror=null; this.src="image.png"" >

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

< ellipse class = "ground" > < path class = "kiwi" >

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

В SVG имеются забавные фильтры. Например размытие:

< svg ... = "" > < filter id = "pictureFilter" > < feGaussianBlur stdDeviation = "5" >

Затем вы можете при необходимости применить это в css:

filter: url (#pictureFilter);

Вот, что получилось:

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

Один из вариантов фолбэка для такого типа SVG:

< svg > ... < div class = "fallback" >

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

Logo-fallback { /* Make sure it"s the same size as the SVG takes up */ No-svg .logo-fallback { background-image: url (logo.png);

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css: