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

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

• 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 (http://www.w3.org/TR/SVG11/intro.html) следующим образом:

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

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

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

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

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

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

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

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

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

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

<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1"

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.

w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.

    com/sketch -->

    <title>Star 1</title>

    <desc>Created with Sketch.</desc>

    <defs></defs>

<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 width="198px" height="188px" viewBox="0 0 198 188"

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

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

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

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

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

<svg width="198px" height="188px" viewBox="0 0 99 94"

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

совет

Чтобы подробнее разобраться с атрибутом viewbox и системой координат SVG, а также с предоставляемыми ими возможностями, я рекомендую изучить следующую статью Сары Сьюайден: http://sarasoueidan.com/blog/svg-coordinate-systems/, а также статью Якоба Женкова (Jakob Jenkov): http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.

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

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

xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"

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