Что лежит в файле SVG
Документ SVG может содержать три рода графических объектов: векторные фигуры, включая контуры из прямых и кривых; растровые изображения; и текст. Объекты можно группировать, оформлять, преобразовывать и накладывать на то, что уже нарисовано. В набор возможностей входят вложенные преобразования, контуры отсечения, альфа-маски, эффекты фильтров и шаблонные объекты. Рисунок может быть интерактивным. Анимацию можно записать в самих элементах SVG или в сценарии, который достаёт до объектной модели документа.
Оформление это CSS. Сценарии это JavaScript. Текст сидит в документе настоящими знаками. Поэтому рисунок можно искать, и поэтому международный текст, включая смешанные направления, обычный случай, а не уловка. Спецификация нацелена на векторную разметку. Её устройство покрывает и основные обязанности языка описания страницы, работу того рода, какую делает PDF: достаточно сведений, чтобы поместить каждый глиф и каждое изображение в выбранную точку печатной страницы. CSS всё равно её оформляет. Два этих факта уживаются спокойнее, чем принято ждать. Один и тот же текст может в понедельник быть картинкой на сайте, а во вторник иллюстрацией в печатном тираже.
Спецификация SVG 1.1 раскладывает себя на четырнадцать функциональных областей. Дальше эти области идут в порядке чтения, а не четырнадцатой копией заголовков.
Пути, фигуры и текст
Пути это компактный способ описать очертание. Путь можно залить, обвести или использовать как контур отсечения. Команды это одиночные буквы. 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. Для каждого элемента и атрибута есть объект в объектной модели документа. Сценарии живут в элементах script и могут выполняться в ответ на события указателя, клавиатуры и документа. У анимации есть собственные элементы, среди них animate, animateMotion и animateColor, и её можно делать, меняя документ из сценария по таймеру. Замысел анимации состоял в том, чтобы оставаться совместимым с SMIL, языком интеграции синхронизированного мультимедиа. W3C прямо рекомендует SMIL как стандарт анимации в SVG. Анимации могут быть непрерывными, могут зацикливаться и могут отвечать пользователю. Рисунок, который движется, всё ещё рисунок. Хорошей идеей он от этого сам не становится. Движение, которое заново проговаривает геометрию, не сообщает ничего сверх того, что неподвижный файл уже сказал.
Шрифты, метаданные, повторное использование
Текст в SVG может ссылаться на внешний шрифт, в том числе на шрифт, установленный на машине. Если этого шрифта нет там, где файл рисуют, текст не будет выглядеть так, как его спроектировали. Одно средство в старой спецификации это шрифт SVG: глифы определены внутри файла и указаны из элемента текста. SVG 2 переносит эту работу к WOFF. Нижележащая проблема с места не двигается. Рисунок, который зависит от шрифта, которого у читателя нет, будет подменён, а подмена меняет длины строк.
Метаданные ложатся в более широкий интерес W3C к описанию. Элемент metadata может нести свойства Дублинского ядра: название, создатель, предмет, описание. Другие схемы разрешены. title и desc дают текстовое описание внутри изображения. Это помогает индексированию и помогает читателю, который картинку не видит. Документ может определить фигуру или градиент один раз и использовать многократно. Он может включать и растровые изображения, PNG или JPEG, и дальнейшие документы SVG. Формат это рисунок. Он же небольшой архив частей рисунка. Отдают его браузеры, телефоны и печатные инструменты.