HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Вся магия заключается в элементе use. Исходя из его имени, нетрудно догадаться, что он применяется для использования существующих графических объектов, которые уже были где-то определены. Механизм конкретной ссылки заложен в атрибуте xlink, который в данном случае ссылается на идентификатор символа значка перемещения влево-вправо (#icon-drag-left-right), вставленного в код в самом начале разметки.

При повторном использовании символа, пока размер не будет указан явно (с помощью либо атрибутов самого элемента, либо CSS), для элемента use будут установлены ширина и высота, равные 100 %. Следовательно, для изменения размеров значка можно сделать следующее:

.icon-drag-left-right {

    width: 2.5rem;

    height: 2.5rem;

}

Элемент use может применяться для повторного использования любого SVG-содержимого: градиентов, фигур, символов и т. д.

Встраиваемая в код SVG-графика позволяет задавать различные цвета в разных контекстах

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

.icon-drag-left-right {

    fill: #f90;

}

.different-context .icon-drag-left-right {

    fill: #ddd;

}

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

.icon-drag-left-right {

    width: 2.5rem;

    height: 2.5rem;

    fill: #f90;

    color: #ccc; /* будет применено к тому пути символа,

    у которого для атрибута fill установлено

    значение currentColor */

}

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

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

Этот способ использования SVG-графики имеет массу преимуществ. Единственным недостатком является то, что одни и те же SVG-данные следует включать в каждую страницу, на которой нужно использовать значки. К сожалению, это отрицательно влияет на производительность, поскольку ресурсы (SVG-данные) трудно поддаются кэшированию. Но есть и другой вариант (если вы согласитесь добавить сценарий для поддержки Internet Explorer).

Повторное использование графических объектов из внешних источников

Вместо вставки неимоверного количества SVG-символов в каждую страницу можно, воспользовавшись тем же элементом use, создать ссылку на внешние SVG-файлы и получить часть документа, которую нужно использовать. Посмотрите на файл из каталога example_07-10 и обратите внимание на то, как те же три значка, которые были у нас в каталоге example_07-09, помещены на страницу:

<svg class="icon-drag-left-right">

    <use xlink:href="defs.svg#icon-drag-left-right"></use>

</svg>

Самой важной частью, с которой следует разобраться, является значение href. Мы ссылаемся на внешний SVG-файл (обозначен в значении как defs.svg), а затем внутри этого файла указываем на идентификатор символа, которым собираемся воспользоваться (обозначен в значении как #icon-drag-left-right).

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

К сожалению, Internet Explorer не позволяет пользоваться ссылками на символы из внешних ресурсов. Но есть сценарий-полифилл для IE9-11 под названием SVG For Everybody, который все равно позволит нам воспользоваться данной технологией. Более подробную информацию можно найти по адресу https://github.com/jonathantneal/svg4everybody.

При использовании этого кода JavaScript вы сможете вполне успешно ссылаться на внешние ресурсы, и полифилл для Internet Explorer вставит данные непосредственно в тело документа.

Что можно делать с любым методом вставки SVG-данных

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

• внутри тега img;

• внутри тега object;

• в качестве фонового изображения;

• путем вставки непосредственно в код.

И в зависимости от метода вставки вам будут доступны или недоступны конкретные возможности.

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

Свойство

img

object

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

background-image

SMIL

Да

Да

Да

Да

Внешняя CSS-таблица

Нет

См. приме­чание 1

Да

Нет

Внутренний CSS-код

Да

Да

Да

Да

Доступ к коду JavaScript

Нет

Да

Да

Нет

Кэшируемость

Да

Да

См. примечание 2

Да

Медиазапрос в SVG

Да

Да

См. примечание 3

Да

Повторное использование

Нет

Да

Да

Нет

Примечания

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

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

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

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

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

Поведение тестовой страницы в самых последних версиях Firefox, Chrome и Safari сравнительно одинаковое. А вот Internet Explorer порой работает несколько иначе.

Например, во всех версиях Internet Explorer, совместимых с SVG-графикой (на данный момент это 9, 10 и 11-я версии), как мы уже видели, отсутствует возможность ссылки на внешние SVG-источники. Далее, Internet Explorer применяет стили из внешних таблиц стилей к SVG-объектам вне зависимости от того способа, с помощью которого они были вставлены (все остальные браузеры применяют стили из внешних таблиц стилей, только если SVG-объекты были вставлены посредством тега object или же непосредственно в код страницы). Internet Explorer также не позволяет применять к SVG анимационные эффекты посредством кода CSS, поэтому анимацию SVG в Internet Explorer приходится реализовывать с применением кода JavaScript. И еще раз для тех, кто в танке: вы не сможете анимировать SVG-графику в Internet Explorer ничем другим, кроме кода JavaScript.

Дополнительные возможности и особенности технологии SVG

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

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

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