Введение

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

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

Основные составляющие

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 очень обширна. В этом учебном руководстве рассматриваются основы. Когда вы освоитесь, воспользуйтесь справочником по элементам и справочником по интерфейсам, чтобы найти любую другую необходимую информацию.

Разновидности SVG

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

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

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