Что лежит в файле SVG
Документ SVG может содержать три вида графических объектов: векторные фигуры, в том числе контуры из прямых и кривых, растровые изображения и текст. Объекты можно группировать, задавать им стиль, преобразовывать и накладывать поверх уже нарисованного. Среди возможностей есть вложенные преобразования, контуры обрезки, альфа-маски, фильтры и объекты-шаблоны. Рисунок может быть интерактивным. Анимацию можно описать прямо в элементах SVG или в скрипте, который обращается к объектной модели документа.
Стили задаются через CSS. Скрипты пишут на JavaScript. Текст хранится в документе в виде настоящих символов, поэтому по рисунку можно искать, а текст на разных языках, в том числе со смешанным направлением письма, считается обычным случаем, а не уловкой. Спецификация ориентирована на векторную разметку. Но её устройство охватывает и основные задачи языка описания страниц, то есть то, что делает PDF: в ней достаточно сведений, чтобы поместить каждый глиф и каждое изображение в заданную точку печатной страницы. И стили к ней по-прежнему задаёт CSS. Эти два факта уживаются друг с другом лучше, чем принято думать. Один и тот же текст файла может в понедельник быть картинкой на сайте, а во вторник иллюстрацией в печатном тираже.
Спецификация SVG 1.1 делится на четырнадцать функциональных областей. Ниже они изложены в удобном для чтения порядке, а не простым повторением четырнадцати заголовков.
Контуры, фигуры и текст
Контур (path) это компактный способ описать очертание. Контур можно залить, обвести или использовать как границу обрезки. Команды записываются одной буквой. M означает «переместиться в точку», и за ней следуют x и y. L означает «провести линию до точки». C, S, Q, T и A задают разные кривые Безье и эллиптические дуги. Z замыкает контур. Заглавная буква означает, что следующие за ней числа это абсолютные координаты. Та же буква в нижнем регистре означает, что координаты отсчитываются от текущей точки. Вот и вся компактность. Сложное очертание записывается короткой строкой, а не списком элементов XML, в каждом из которых по координате.
Базовые фигуры нужны для того, чтобы частые случаи не приходилось записывать контурами. Отрезки, ломаные, многоугольники, окружности, эллипсы, прямоугольники и прямоугольники со скруглёнными углами это полноценные элементы. Каждую из этих фигур можно построить из контура. Но делать это не должно быть необходимости.
Текст это символьные данные Unicode внутри XML. С ним можно получить множество визуальных эффектов. Спецификация поддерживает двунаправленный текст, так что фрагмент на английском и фрагмент на арабском могут стоять в одной строке, вертикальный текст, какой используют в китайском или японском, и текст, расположенный вдоль кривой. Классический пример это надпись по кругу печати. Полезный пример это подпись на схеме, которая остаётся текстом и которую можно скопировать, в отличие от подписи, превращённой в контуры, на которую можно только смотреть.
Заливка и обводка
Фигуры можно заливать и обводить цветом, градиентом или узором. Заливка может быть непрозрачной или прозрачной в любой степени. Маркеры это украшения в вершинах или на концах линии, самый очевидный пример это стрелки. Цвет задают так же, как в CSS: названием вроде blue, коротким или длинным шестнадцатеричным значением, тройкой десятичных чисел rgb() или процентами. Градиенты бывают линейными или радиальными, могут содержать любое число опорных точек, повторяться и менять как цвет, так и непрозрачность. Узоры строят из растрового или векторного объекта и повторяют по осям x и y. Градиенты и узоры можно анимировать и изменять скриптами.
С 2008 года специалисты спорят о том, стоит ли добавить градиентные сетки или диффузионные кривые. Простое представление в виде диффузионных кривых может передавать тонкие переходы тени, и его можно автоматически получить из растрового изображения. Художники, которые работали и с сетками, и с диффузионными кривыми, сочли кривые более простыми в построении. Черновик SVG 2 включает градиентные сетки. Пока браузеры не начнут широко их поддерживать, на практике остаются сплошной цвет, линейные и радиальные градиенты и узоры.
<rect x="16" y="28" width="90" height="70" fill="#2070e0"/>
<circle cx="160" cy="74" r="36" fill="#f07000"/>
<line x1="210" y1="30" x2="264" y2="122" stroke="#1858b8" stroke-width="4"/>Обрезка, фильтры и порядок наложения
Графические элементы, включая текст, могут задавать внутреннюю и внешнюю области, и эти области можно закрашивать независимо. Полностью непрозрачные контуры обрезки и полупрозрачные маски объединяются с помощью альфа-смешивания, и так получаются цвет и непрозрачность каждого пикселя итогового изображения. Контур обрезки определяет, что видно. Маска определяет, насколько это видно. В разговоре их легко перепутать, но в файле это разные элементы.
Фильтр это последовательность графических операций над исходным изображением, результатом которой становится изменённый растр. Исходное изображение может оставаться векторным. Результат фильтра это пиксели. Пример, с которым сталкивались все, это размытие. Но механизм шире, чем размытие: это цепочка операций, каждая из которых берёт результат предыдущей. Кроме того, именно в фильтрах «векторный файл» незаметно становится на время растровым. При масштабировании страницы векторы перерисовываются. Фильтр выполняется заново. Поэтому размытый SVG может оставаться чётким, а заранее размытый PNG нет, и поэтому же тяжёлый фильтр обходится не бесплатно.
Интерактивность, ссылки, скрипты, анимация
Изображения SVG могут реагировать на действия пользователя несколькими способами. Кроме гиперссылок, любая часть рисунка может отслеживать события интерфейса: смену фокуса, щелчки, прокрутку, масштабирование и другие события указателя, клавиатуры и документа. Обработчик может запустить, остановить или изменить анимацию либо выполнить скрипт. Ссылки работают через XLink. С помощью элемента view или идентификатора фрагмента URL может открыть файл SVG уже увеличенным до нужной области или показать только один элемент. Так на практике можно сделать набор спрайтов из одного рисунка. Вместе с use XLink позволяет файлу сослаться на элемент внутри себя или в другом файле и использовать его повторно. Разметки становится меньше, а если знак придётся менять, определение у него одно.
Из скрипта можно обратиться к любой части документа, так же как в HTML. Для каждого элемента и атрибута есть объект в объектной модели документа (DOM). Скрипты размещают в элементах script, и они могут выполняться в ответ на события указателя, клавиатуры и документа. Для анимации есть собственные элементы, в том числе animate, animateMotion и animateColor, а ещё её можно делать, изменяя документ из скрипта по таймеру. Анимация в SVG задумывалась совместимой с SMIL (Synchronized Multimedia Integration Language, язык интеграции синхронизированного мультимедиа). W3C прямо рекомендует SMIL как стандарт анимации в SVG. Анимация может быть непрерывной, зацикленной или реагировать на действия пользователя. Движущийся рисунок всё равно остаётся рисунком. И само по себе движение ещё не делает его удачным. Движение, которое лишь пересказывает геометрию, не сообщает ничего нового по сравнению с неподвижным файлом.
Шрифты, метаданные, повторное использование
Текст в SVG может ссылаться на внешний шрифт, в том числе на шрифт, установленный в системе. Если там, где файл отображают, такого шрифта нет, текст будет выглядеть не так, как задумано. В старой спецификации одним из решений был шрифт SVG: глифы описаны внутри файла, и элемент текста ссылается на них. SVG 2 передаёт эту задачу WOFF. Но сама проблема никуда не девается. Если рисунок зависит от шрифта, которого у читателя нет, шрифт подменят, а подмена меняет длину строк.
Метаданные соответствуют более широкому интересу W3C к описанию ресурсов. Элемент metadata может содержать свойства Dublin Core: название, автор, тема, описание. Допускаются и другие схемы. Элементы title и desc дают текстовое описание внутри изображения, что помогает индексированию, а также читателю, который не видит картинку. В документе можно один раз определить фигуру или градиент и использовать их много раз. В него можно включать и растровые изображения в PNG или JPEG, и другие документы SVG. Файл в этом формате это рисунок. И одновременно небольшой архив составных частей рисунка. Отображают его браузеры, телефоны и программы для печати.