7. Использование SVG для достижения независимости от разрешения

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

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

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

07_01.tif

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

07_02.tif

Надеюсь, разница очевидна.

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

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

Нам предстоит рассмотреть следующие вопросы:

• SVG, краткая история и анатомия простого SVG-документа;

• создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений;

• вставка объектов SVG-графики в страницу с помощью тегов img и object;

• вставка объектов SVG-графики в качестве фоновых изображений;

• вставка объектов SVG-графики непосредственно в код HTML в качестве линейных объектов;

• повторное использование SVG-символов;

• ссылка на внешние SVG-символы;

• возможности, предоставляемые каждым из методов вставки;

• анимация объектов SVG-графики с помощью SMIL;

• придание стилевого оформления объектам SVG-графики с помощью внешней таблицы стилей;

• придание стилевого оформления объектам SVG-графики с помощью внутренних стилей;

• изменение и анимация объектов SVG-графики с помощью CSS;

• медиазапросы и SVG-графика;

• оптимизация объектов SVG-графики;

• использование объектов SVG-графики с целью определения фильтров для CSS;

• манипуляция объектами SVG-графики с помощью кода JavaScript и JavaScript-библиотек;

• советы по внедрению SVG-технологии;

• ресурсы для дальнейшего изучения.

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

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

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

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

Приступая к освоению этой технологии, для начала заглянем в 2001 год.

Краткая история SVG

Первый выпуск SVG состоялся в 2001 году. И это не опечатка. SVG как технология существует с 2001 года. С тех пор она постепенно набирала обороты, но широкий интерес к ней и практическое применение связаны с появлением устройств с экранами высокого разрешения. Введение в SVG-технологию изложено в ее спецификации версии 1.1 () следующим образом:

«SVG — это язык описания двухмерной графики в XML [XML10]. SVG позволяет создавать три типа графических объектов: фигуры векторной графики (например, пути, состоящие из прямых и кривых линий), изображения и текст».

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

Поскольку векторы задаются с помощью относительных описаний, их можно масштабировать без потери качества до любых размеров. Более того, так как данные SVG-графики представлены в виде описаний векторных опорных точек, их объем получается мизерным по сравнению с данными файлов JPEG, GIF или PNG, содержащими изображения сопоставимых размеров.

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

Графика, представляющая собой документ

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

А вот SVG-графика описывается языком разметки. SVG записывается на расширяемом языке разметки (Extensible Markup Language (XML)), являющемся близким родственником HTML. Возможно, вы не в курсе, но XML повсеместно используется в Интернете. Вам приходилось пользоваться RSS-каналом? А ведь в нем также используется XML. Именно в этом языке заключается содержимое RSS-канала, обеспечивая его доступность для разнообразных средств и сервисов. Следовательно, читать и понимать SVG-графику могут не только машины, но и мы с вами.

Позвольте привести пример. Посмотрите на изображение звезды.

07_03.tif

Данное SVG-изображение можно найти в файле Star.svg, который находится в каталоге example_07-01. Файл можно открыть как в браузере, на экране которого он появится в виде звезды, так и в текстовом редакторе, где можно будет увидеть код, формирующий эту звезду. Рассмотрим код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

xmlns="" xmlns:xlink=".

w3.org/1999/xlink" xmlns:sketch="">

<!-- Generator: Sketch 3.2.2 (9983) - .

com/sketch -->

<desc>Created with Sketch.</desc>

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-

rule="evenodd" sketch:type="MSPage">

<polygon id="Star-1" stroke="#9 79797" stroke-width="3"

fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.22 14748 184.9 01699 51.44 71742 119.45085 3.894 34837 73.09 83006 69.61 07374 63.54 91503 99 4 128.3 89263 63.54 91503 194.1 05652 73.09 83006 146.5 52826 119.45085 157.7 78525 184.9 01699 "></polygon>

</g>

</svg>

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

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

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

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

Корневой элемент SVG

У корневого SVG-элемента имеются атрибуты для ширины (width), высоты (height) и области просмотра (viewbox):

Все это при отображении SVG на экране играет весьма важную роль.

Надеюсь, к этому времени вы уже хорошо разбираетесь в том, что такое окно просмотра. Оно использовалось в большинстве глав книги для описания той области экрана устройства, на которой просматривается содержимое. Например, у мобильного устройства может быть окно просмотра размером 320 × 480 пикселов, у настольного компьютера — 1920 × 1080 пикселов.

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

viewbox-значения 0 0 198 188 следует рассматривать в качестве описания левой верхней и правой нижней точек прямоугольной области. Два первых значения, известные в техническом смысле как min-x и min-y, описывают левый верхний угол, а два вторых значения, известные в техническом смысле как ширина и высота, описывают правый нижний угол.

Наличие атрибута viewbox позволяет увеличивать или уменьшать изображение. Например, если в нем уменьшить наполовину параметры ширины и высоты:

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

Sovet.tif совет

Чтобы подробнее разобраться с атрибутом viewbox и системой координат SVG, а также с предоставляемыми ими возможностями, я рекомендую изучить следующую статью Сары Сьюайден: /, а также статью Якоба Женкова (Jakob Jenkov): .

Пространство имен

У рассматриваемого кода SVG имеется дополнительное пространство имен, определенное для сгенерировавшей его графической программы Sketch (для пространства имен XML используется аббревиатура xmlns):

xmlns:sketch=""

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

Теги title и desc

Теги title и desc повышают доступность SVG-документа:

<desc>Created with Sketch.</desc>

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

Тег defs

В нашем примере кода имеется пустой тег defs:

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

Элемент g

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

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-

rule="evenodd" sketch:type="MSPage">

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

Фигуры SVG

Самый внутренний узел в рассматриваемом примере представлен тегом многоугольника (polygon):

<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C"

sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503994 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>

В SVG имеется ряд уже готовых к использованию фигур (path, rect, circle, ellipse, line, polyline и polygon).

SVG-пути

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

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

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

Хотя SVG-документы могут открываться, редактироваться и создаваться в текстовом редакторе, существует множество приложений, предлагающих графический интерфейс пользователя (Graphical User Interface (GUI)), облегчающий создание сложной SVG-графики при наличии соответствующего опыта работы по ее редактированию. Наверное, наиболее известным вариантом является использование приложения Illustrator (PC/Mac) от компании Adobe. Но для обычных пользователей у него слишком высокая цена, поэтому лично я предпочитаю приложение Sketch от Bohemian Coding (версию, предназначенную только для компьютеров Mac, можно найти по адресу /). Оно само по себе недешевое (на данный момент продается по цене 99 долларов), но все же, если вы работаете на компьютере Mac, я хочу порекомендовать именно его.

Если вы пользуетесь Windows или Linux или же подыскиваете менее дорогой вариант, присмотритесь к бесплатному приложению с открытым кодом Inkscape (/). Конечно, это далеко не самый приятный для работы инструмент, но в нем имеются весьма впечатляющие функциональные возможности (в качестве доказательства можете просмотреть галерею Inkscape, находящуюся по адресу /).

И наконец, можно воспользоваться онлайн-редакторами. У Google есть редактор SVG-edit (). Есть также редакторы Draw SVG () и Method Draw, последний из которых, возможно, является наиболее интересным средством SVG-редактирования (/).

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

Если хотите получить краткое представление о преимуществах использования веб-сервиса значков, то загруженное приложение icomoon.io предоставит вам соответствующую библиотеку с возможностью поиска (часть значков будет в свободном доступе, а за остальные придется платить).

07_04.tif

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

Чтобы увидеть все это своими глазами, откройте каталог example_07-02, в котором находятся файлы, полученные в результате загрузки по окончании выбора значков с сайта /.

Вставка SVG-графики в веб-страницы

В зависимости от используемого браузера с SVG-изображениями можно делать то, чего нельзя сделать с изображениями обычных форматов (JPEG, GIF, PNG). Диапазон возможностей сильно зависит от способа вставки SVG в страницу. Поэтому, прежде чем мы доберемся до возможностей SVG-графики, будут рассмотрены способы помещения ее на страницу.

Использование тега img

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

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

Использование тега object

Тег object является контейнером, рекомендованным W3C для содержимого веб-страницы, не имеющего отношения к HTML (спецификацию на object можно найти по адресу ). Мы можем воспользоваться им для вставки SVG-графики на нашу страницу:

<span class="fallback-info">Your browser doesn't support SVG</span>

</object>

Этому тегу требуется либо атрибут data, либо атрибут type, хотя я всегда буду рекомендовать добавление обоих атрибутов. С помощью атрибута data внешняя ссылка на SVG-ресурс осуществляется точно так же, как ссылка на любой другой ресурс. С помощью атрибута type дается описание MIME-типа (медиатипа Интернета), соответствующего содержимому. В данном случае image/svg+xml является MIME-типом, обозначающим данные в формате SVG. Если нужно ограничить размер SVG в пределах контейнера, можно также добавить атрибуты width и height.

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

Primechanie.tif примечание

Если нужно работать с SVG-графикой, вставленной с помощью тега object, с использованием jQuery, то вам следует воспользоваться имеющимся в JavaScript свойством .contentDocument. Затем для внесения изменений, например для заполнения, можно будет воспользоваться jQuery-методом .attr.

Альтернативным вариантом может стать добавление фонового изображения с помощью CSS-свойства background-image. Например, в показанном ранее коде у нашего альтернативного span-контейнера имеется класс .fallback-info. Мы можем этим воспользоваться в CSS для ссылки на подходящее фоновое изображение. Тогда это изображение будет загружаться только в случае реальной надобности.

Вставка SVG-графики в качестве фонового изображения

SVG-графика может использоваться в качестве фонового изображения в CSS примерно так же, как и изображение любого другого формата (PNG, JPG, GIF). В способе ссылки на него нет ничего необычного:

.item {

}

Для устаревших браузеров, не поддерживающих SVG, может понадобиться включить альтернативное изображение в более широко поддерживаемом формате (обычно PNG). Одно из решений для Internet Explorer 8 и Android 2 (IE8 не поддерживает SVG или background-size, а Android 2.3 не поддерживает SVG и требует для background-size префикса производителя) выглядит следующим образом:

.item {

background: url('image.png') no-repeat;

background: url('image.svg') left top / auto auto no-repeat;

}

Когда в коде CSS применяются два одинаковых свойства, нижестоящим свойством всегда переписывается то свойство, что стоит выше его. В правиле CSS браузер всегда будет игнорировать ту пару «свойство — значение», в которой он не может разобраться. В данном случае устаревшие браузеры получат изображение в формате PNG, поскольку они не могут воспользоваться SVG или разобраться в лишенном префикса свойстве background-size, а более новые браузеры, которые могут воспользоваться и тем и другим, возьмут самое нижнее свойство, так как им отменяется первое свойство.

Альтернативные варианты можно предоставить с помощью JavaScript-средства Modernizr, предназначенного для тестирования функциональных возможностей браузера (более подробно Modernizr рассматривается в главе 5). В Modernizr содержатся отдельные тесты для различных методов вставки SVG-графики, а в следующей версии Modernizr (которая на момент написания книги еще не вышла) может содержаться что-нибудь более специфичное для SVG в CSS. Но пока вы можете сделать следующее:

.item {

}

.svg .item {

}

Или инвертировать логику, если вам так удобнее:

.item {

}

.no-svg .item {

}

Когда запросы возможностей (feature queries) получат более полную поддержку, можно будет также сделать следующее:

.item {

}

@supports (fill: black) {

.item {

}

Правило @supports здесь сработает, поскольку fill является свойством SVG, и если браузер это понимает, то он предпочтет не верхнее, а нижнее правило.

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

Краткое отступление по поводу URI-идентификаторов данных

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

.external {

}

Можно просто включить изображение в состав нашей таблицы стилей, воспользовавшись URI-идентификатором данных:

.data-uri {

version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22

no%22%3F%3E%0A%3Csvg%20width%3D%22198px%22%20height%3D%22188px-

%22%20viewBox%3D%220%200%20198%20188%22%20version%3D%221.1%22%20

xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink

%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3

D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20

%20%20%20%3C%21--%20Generator%3A%20Sketch%203.2.2%20%2 89983%29%20

-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20

%20%20%20%3Ctitle%3EStar%201%3C%2Ftitle%3E%0A%20%20%20%20

%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20-

%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20

stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20

fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%

0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Star-1%22%20

stroke%3D%22%239 79797%22%20stroke-width%3D%223%22%20

fill%3D%22%23F8E81C%22%20sketch%3Atype%3D%22MSShapeGroup%22%20

points%3D%2299%20154%2040.2214748%20184.901699%2051.4471742%20119.45085%203.89434837%2073.0983006%2069.6107374%2063.5491503%2099%204%20128.389263%2063.5491503%20194.105652%2073.0983006%20146.552826%20119.45085%20157.778525%20184.9 01699%20%22%3E%3C%2Fpolygon%3E%0A%20%20

%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);

}

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

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

Создание спрайтов изображений

Лично я рекомендую для создания спрайтов изображений или ресурсов, состоящих из URI-идентификаторов данных, использовать средство Iconizr (/). Оно обеспечивает полный контроль над внешним видом получаемого в конечном итоге SVG- и альтернативного PNG-ресурса. Можно вывести SVG-графику и альтернативные PNG-файлы в виде URI-идентификаторов данных или спрайтов изображений и даже включить туда фрагмент кода JavaScript для загрузки подходящего ресурса, если выбор будет сделан в пользу URI-идентификаторов данных. Настоятельно советую воспользоваться именно этим средством.

Если вы колеблетесь, не зная, что выбрать для своих проектов — URI-идентификаторы данных или спрайты изображений, то вас могут заинтересовать дополнительные исследования, которые я провел, чтобы взвесить все «за» и «против» обоих вариантов: /.

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

Непосредственная вставка SVG

Поскольку SVG-графика — это просто XML-документ, ее можно вставить непосредственно в код HTML, например:

<div>

<h3>Inserted 'inline':</h3>

<path id="star_Path" stroke="#979797" stroke-

width="3" fill="#F8E81C" d="M99154l-58.7830.902 11.227-65.45L3.89473.097l65.717-9.55L994l29.39 59.5565.716 9.548-47.55346.35311.22665.452z" />

</g>

</svg>

</span>

</div>

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

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

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

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

В код, который находится в файле каталога example_07-09, мы будем вставлять определения различных символов в имеющийся на странице defs-элемент SVG-графики. Следует заметить, что в отношении SVG-элемента использовано встроенное в код стилевое оформление display:none, а для атрибутов height и width установлены нулевые значения (эти же стилевые настройки при желании могут быть установлены и в таблице CSS). По этой причине SVG-графика не занимает никакого пространства. Этот SVG-элемент используется только для размещения в нем символов графических объектов, которые мы собираемся использовать в других местах.

Итак, наша разметка начинается со следующего фрагмента кода:

<body>

xmlns="" xmlns:xlink=".

w3.org/1999/xlink">

<defs>

<title>drag-left-right</title>

Заметили, что внутри элемента defs находится элемент symbol? Он предназначен для использования в том случае, если нам понадобится определить фигуру для последующего повторного применения.

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

</svg>

В результате появится значок перемещения влево-вправо.

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

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

.icon-drag-left-right {

width: 2.5rem;

height: 2.5rem;

}

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

07_05.tif

Встраиваемая в код 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 */

}

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

07_06.tif

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

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

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

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

</svg>

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

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

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

При использовании этого кода 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-документов. Приступим к их изучению.

SMIL-анимация

SMIL-анимация (/) является способом определения анимации для SVG-графики внутри самого SVG-документа.

SMIL (если интересно, произносится как smile, то есть «смайл», что созвучно со словом, означающим улыбку) расшифровывается как язык разметки для создания интерактивных мультимедийных презентаций (Synchronized Multimedia Integration Language), он был разработан в качестве способа определения анимации внутри XML-документа (вспомним, что в SVG-документах используется XML).

Рассмотрим пример определения анимации на основе SMIL:

<animate xlink:href="#star_Path" attributeName="fill"

attributeType="XML" begin="0s" dur="2s" fill="freeze" from="#F8E81C"

to="#14805e" />

<path id="star_Path" stroke="#9 79797" stroke-width="3"

fill="#F8E81C" d="M99154l-58.7830.90211.227-65.45L3.89473.097l65.717-9.55L994l29.3959.5565.716 9.548-47.55346.35311.22665.452z" />

</g>

Я воспользовался разделом из ранее рассмотренного нами SVG-документа. Тег g обозначает в SVG группирующий элемент, а в данный элемент включается как фигура звезды (путевой элемент с id="star_Path"), так и SMIL-анимация внутри элемента animate. Эта простая анимация меняет цвет заполнения звезды с желтого на зеленый (проводит операцию под названием tweening) в течение двух секунд. Кроме того, это делается, когда SVG-графика вставляется в страницу с помощью тегов img, object, указания в свойстве background-image или непосредственно в сам код страницы (если честно, то пример в файле каталога example_07-03 можно посмотреть в любом современном браузере, кроме Internet Explorer).

Primechanie.tif Tweening

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

Правда, здорово получилось? Да, вот так все и могло бы быть. Но, несмотря на то что данная технология некоторое время даже рассматривалась как стандарт, дни ее, похоже, сочтены.

Конец улыбки SMIL. У SMIL нет поддержки в Internet Explorer. Никакой. Ни малейшей. И все. Пшик. Я могу продолжить сокрушаться, но, полагаю, вы поняли, что на данный момент SMIL не имеет никакой поддержки в Internet Explorer.

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

Вдобавок в Chrome стали просматриваться тенденции к запрещению SMIL: .

Занавес.

Primechanie.tif примечание

Если вы все же испытываете потребность в использовании SMIL, то у Сары Сьюайден (Sara Soueidan) есть превосходная и очень подробная статья о SMIL-анимации по адресу /.

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

Задание стилей SVG с помощью внешней таблицы стилей

Придать стиль SVG-документу можно с помощью кода CSS. Это может быть CSS-код, заключенный в сам SVG-документ, или же таблицы стилей CSS, куда можно записать весь ваш обычный код CSS.

Теперь, если вернуться к ранее показанной таблице свойств, вы увидите, что стилевое оформление SVG с помощью внешней CSS-таблицы невозможно, когда SVG-документ включен с использованием тега img или в качестве значения свойства background-image (за исключением Internet Explorer). Такая возможность появляется только тогда, когда SVG-графика вставляется с помощью тега object или непосредственно в код страницы.

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

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

А вот как выглядит правильный или официальный способ, фактически определенный для XML в далеком 1999 году ( 90629/):

<?xml-stylesheet href="styles.css" type="text/css"?>

Эта строка кода должна быть в вашем файле выше открывающего SVG-элемента, например:

<?xml-stylesheet href="styles.css" type="text/css"?>

w3.org/2000/svg" xmlns:xlink="">

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

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

Задание стилей SVG с помощью внутренних стилей

Стили для SVG можно поместить в сам SVG-документ в элементе defs. Поскольку структура SVG-документа основана на XML, надежнее будет включить маркер Character Data (CDATA). Этот маркер просто сообщает браузеру, что информация, находящаяся внутри ограниченного раздела символьных данных, может быть истолкована как XML-разметка, но не должна толковаться в этом качестве. Используемый для этого синтаксис выглядит следующим образом:

<defs>

<![CDATA[

#star_Path {

stroke: red;

}

]]>

</style>

</defs>

Свойства и значения SVG внутри CSS. Обратите внимание на свойство stroke в предыдущем блоке кода. Это свойство не CSS, а SVG. Существует довольно много специализированных свойств SVG, которые можно использовать в стилях (неважно, где они объявлены, во встроенном коде или во внешней таблице стилей). Например, для SVG указывается не background-color, а fill. Вместо указания border указывается stroke-width. Полный перечень специализированных свойств SVG можно найти в спецификации по адресу .

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

Анимация SVG-графики с помощью CSS

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

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

" xmlns:xlink="">

<defs>

<![CDATA[

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

.star_Wrapper {

animation: spin 2s 1s;

transform-origin: 50% 50%;

}

.wrapper {

padding: 2rem;

margin: 2rem;

}

]]>

</style>

</g>

</defs>

<path id="star_Path" stroke="#333" stroke-width="3"

fill="#F8E81C" d="M99154l-58.7830.90211.227-65.45L3.89473.097l65.717-9.55L994l29.3959.5565.7169.548-47.55346.35311.22665.453z"/>

</g>

</svg>

</div>

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

Sovet.tif совет

Заметили, как SVG-элементу была назначена исходная точка преобразования 50 % 50 %? Дело в том, что, в отличие от CSS, по умолчанию исходная точка преобразования в SVG не устанавливается как 50 % 50 % (по центру обеих осей), а имеет значение 0 0 (в левом верхнем углу). Если не установить это свойство, звезда будет вращаться вокруг точки в левом верхнем углу.

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

Анимация SVG-графики с помощью JavaScript

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

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

svg {

/* нет анимации */

}

.added-with-js svg {

/* есть анимация */

}

Но также возможно применить эффект анимации к SVG-графике с помощью JavaScript непосредственным образом.

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

Для придания эффектов анимации SVG-графике посредством JavaScript хочу порекомендовать анимационную платформу GreenSock (), Velocity.js (/) или Snap.svg (/). Далее мы рассмотрим очень простой пример использования GreenSock.

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

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

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

Основной замысел состоит в том, что окружность создана в виде SVG-тега <path>, а не элемента <circle>. То, что используется путь, означает, что его можно подвергнуть анимации, как будто он прорисовывается с использованием технологии stroke-dashoffset. Краткое изложение этой технологии представлено на следующей вкладке. Мы используем JavaScript для измерения длины пути, а затем применим атрибут stroke-dasharray для указания длины выводимой на экран части окружности и длины пустого промежутка. Затем stroke-dashoffset используется для изменения места старта этого dasharray. Это означает, что можно фактически запустить обвод по контуру вне пути и анимировать этот обвод. Это создает иллюзию, что путь прорисовывается.

07_07.tif

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

Но вдобавок к динамическому значению одновременно с прорисовкой линии нам нужны постепенное повышение яркости цвета от одного значения к другому и визуальный подсчет до введенного значения, выполняемый в текстовом узле. Эта анимация сродни одновременному похлопыванию по голове, поглаживанию живота и обратному отсчету от 10 000. Средство GreenSock существенно облегчает задачу — в анимационной части оно не будет похлопывать вас по голове или поглаживать по животу, хотя может при необходимости выполнить обратный отсчет от 10 000. Вот строки кода JavaScript, необходимые, чтобы заставить GreenSock выполнить все три задачи:

// анимация прорисовки линии и изменения цвета

TweenLite.to(circlePath, 1.5, {'stroke-dashoffset': "-"+amount,

stroke: strokeEndColour});

// установка счетчика в нуль и его анимация до введенного значения

var counter = { var: 0 };

TweenLite.to(counter, 1.5, {

var: inputValue,

onUpdate: function () {

text.textContent = Math.ceil(counter.var) + "%";

ease:Circ.easeOut

});

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

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

Sovet.tif совет

Если вам еще не приходилось сталкиваться с SVG-технологией прорисовки линий, она была изложена в доступной форме журналом Polygon, когда Vox Media анимировала несколько прорисовок линий в игровых консолях Xbox One и Playstation 4. Исходную статью можно прочитать по адресу 26880/polygon-feature-design-svg-animations-for-fun-and-profit.

Есть еще великолепное и более основательное объяснение этой технологии, изложенное Джейком Арчибальдом (Jake Archibald) по адресу /.

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

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

В настоящее время для решения данной задачи можно порекомендовать средство SVGO (). Если вам еще не приходилось пользоваться SVGO, рекомендую начать с SVGOMG (/). Это версия SVGO, основанная на применении браузера и позволяющая переключать различные дополнительные модули оптимизации, получая немедленную реакцию в виде сохраненного файла.

Помните пример SVG-разметки для получения звезды, приведенный в начале главы? В исходном виде этот простой SVG-документ занимает 489 байт. Пропустив его через SVGO, можно уменьшить размер до 218 байт, оставив на месте viewBox. Тем самым будет сэкономлено 55,42 % объема. Если используется множество SVG-изображений, такая экономия может вылиться в весьма солидный результат. Оптимизированная SVG-разметка имеет следующий вид:

stroke="#979797" stroke-width="3"

fill="#F8E81C" d="M99154l-58.7830.90211.227-65.45L3.89473.097l65.717-9.55L994l29.3959.5565.7169.548-47.55346.35311.22665.454z"/></svg>

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

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

В главе 6 рассматривались эффекты, создаваемые фильтрами CSS. Но в настоящее время в Internet Explorer 10 или 11 они не поддерживаются. Если вы собирались воспользоваться в этих браузерах эффектами фильтров, то ничего, кроме досады, не испытаете. К счастью, с помощью SVG можно создавать фильтры, работающие и в Internet Explorer 10 и 11, но, как всегда, все не настолько просто, как можно было бы себе представить. Например, в файле каталога example_07-05 имеется страница, в теле которой содержится следующая разметка:

Это фотография королевы Великобритании. Изначально она имеет следующий вид.

07_08.tif

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

<defs>

<feColorMatrix in="SourceGraphic" type="hueRotate"

values="90" result="A"/>

</filter>

</defs>

</svg>

Внутри фильтра сначала задается вращение тона на 90° с помощью feColorMatrix, а затем этот эффект через атрибут result передается следующему фильтру (feGaussianBlur) со значением размытия, равным 6. Сразу предупреждаю, что задал слишком жесткие параметры в ущерб эстетическому восприятию намеренно, чтобы у нас не осталось никаких сомнений в том, что эффект работает!

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

.HRH {

filter: url('filter.svg#myfilter');

}

В самых популярных браузерах (Chrome, Safari, Firefox) будет получен следующий эффект.

07_09.tif

К сожалению, этот метод не работает в Internet Explorer 10 или 11. Но есть и другой способ достижения нашей цели, заключающийся в использовании собственного тега image SVG-документа, предназначенного для включения изображения в этот документ. В файле каталога example_07-06 содержится следующая разметка:

xmlns="" version="1.1">

<defs>

<feColorMatrix in="SourceGraphic" type="hueRotate"

values="90" result="A"/>

</filter>

</defs>

<image x="0" y="0" height="747px" width="1024px"

xmlns:xlink="" xlink:href="queen@2x-

1024x747.png" filter="url(#myfilter)"></image>

</svg>

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

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

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

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

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

#star_Path {

stroke: red;

}

@media (min-width: 800px) {

#star_Path {

stroke: violet;

}

]]></style>

И этот документ выводит на странице SVG-графику шириной 200 пикселов, в то время как окно просмотра имеет ширину 1200 пикселов.

Предполагается, что обвод звезды по контуру будет лиловым (violet), когда ширина экрана не меньше 800 пикселов. Все-таки именно на это настроен наш медиазапрос. Но когда SVG-графика помещается на страницу посредством тега img, или в качестве фонового изображения, или внутри тега object, то, какой при этом окружающий HTML-документ, в расчет не берется. Следовательно, в данной ситуации min-width означает минимальную ширину самой SVG-графики. Поэтому, хотя сама SVG-фигура отображается на странице шириной не менее 800 пикселов, обвод по контуру лиловым не будет.

В противовес этому, когда SVG-документ вставляется непосредственно в код страницы, он, образно говоря, сливается с окружающим HTML-документом. И здесь уже медиазапрос с min-width для того, чтобы принять решение о своем соответствии ситуации, смотрит на параметры окна просмотра (точно так же, как в HTML).

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

@media (min-device-width: 800px) {

#star_Path {

stroke: violet;

}

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

Советы по внедрению

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

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

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

• Для вставки в проект статичных SVG-объектов постарайтесь выбрать единый механизм доставки и придерживаться только его (спрайт изображения, URI-идентификатор данных или встраивание непосредственно в код страницы). Получение одних активов одним способом, а других — другим может стать обременительным занятием, равно как и дальнейшая поддержка различных реализаций.

• Единого варианта выбора SVG-анимации на все случаи жизни не существует. Для получения простых, применяемых от случая к случаю эффектов анимации следует воспользоваться CSS. Для сложных интерактивных эффектов анимации или таких эффектов, ход которых меняется по шкале времени и которые работают и в Internet Explorer, освойте какую-нибудь опробованную библиотеку, например GreenSock, Velocity.js или Snap.svg.

Дополнительные ресурсы

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

• SVG Essentials, второе издание, Дж. Дэвида Эйсенберга (J. David Eisenberg) и Амелии Беллами-Роудс (Amelia Bellamy-Royds) ( 69200 32335.do);

• A Guide to SVG Animations (SMIL) Сары Сьюайден (Sara Soueidan) (/);

• Media Queries inside SVGs Test Жереми Патонье (Jeremie Patonnier) ().

• An SVG Primer for Today's Browsers ();

• Understanding SVG Coordinate Systems and Transformations (Part 1) Сары Сьюайден (Sara Soueidan) (/);

• Hands On: SVG Filter Effects ();

• Full set of SVG tutorials Якоба Женкова (Jakob Jenkov) ().

Резюме

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

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

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

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