Введение

HTML предоставляет элементы для определения заголовков, абзацев, таблиц и т. д. Точно так же SVG предоставляет элементы для кругов, прямоугольников и простых и сложных кривых. Простой документ SVG состоит не более чем из корневого элемента <svg> и нескольких основных фигур, которые вместе образуют графику. Кроме того, есть элемент <g>, который используется для группирования нескольких основных фигур вместе.

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

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

SVG поддерживается всеми современными браузерами, а в некоторых случаях и несколькими версиями назад. Достаточно полная таблица поддержки браузеров может быть найдена на Can I use. Firefox поддерживает некоторые данные SVG с версии 1.5, и этот уровень поддержки рос с каждым выпуском с тех пор. Надеюсь, вместе с этим учебником MDN поможет разработчикам отслеживать различия между Gecko и некоторыми другими основными реализациями.

Перед началом работы вы должны иметь базовое понимание XML или другого языка разметки, такого как HTML. Если вы не слишком знакомы с XML, вот несколько рекомендаций, которые следует учитывать:

• Элементы и атрибуты SVG должны быть введены в том регистре, который показан здесь, так как XML регистрозависим (в отличие от HTML).
• Значения атрибутов в SVG должны быть заключены в кавычки, даже если это числа.

SVG — это огромная спецификация. Этот учебник пытается охватить основы. После того, как вы с ними ознакомитесь, вы сможете использовать Справочник по элементам и Справочник по интерфейсам, чтобы узнать всё, что вам нужно знать.

С момента получения статуса рекомендации в 2003 году последняя «полная» версия SVG — 1.1. Она построена на основе SVG 1.0, но добавляет больше модульности для упрощения реализации. Вторая редакция SVG 1.1 стала Рекомендацией в 2011 году. «Полный» SVG 1.2 должен был стать следующим крупным релизом SVG. Он был отменён в пользу предстоящего SVG 2.0, который сейчас активно разрабатывается и следует аналогичному подходу к CSS 3, разбивая компоненты на несколько слабо связанных спецификаций.

Помимо полных рекомендаций SVG, рабочая группа в W3C представила SVG Tiny и SVG Basic в 2003 году. Эти два профиля в основном предназначены для мобильных устройств. Первый, SVG Tiny, должен обеспечивать графические примитивы для небольших устройств с ограниченными возможностями. SVG Basic предлагает многие функции полного SVG, но не включает те, которые трудно реализовать или сильно нагружают рендеринг (например, анимации). В 2008 году SVG Tiny 1.2 стала Рекомендацией W3C.

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