SVG

Материал из Википедии — свободной энциклопедии

Масштабируемая векторная графика

Расширение файла:	.svg, .svgz
Тип MIME:	image/svg+xml
Разработчик:	World Wide Web Consortium
Расширение для:	XML

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двухмерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML.

Растровое изображение, сгенерированное из примера SVG, демонстрирует прозрачность, градиентную заливку, разнообразные контуры и текст. Для просмотра оригинала потребуется браузер со встроенной поддержкой SVG, или оборудованный специальным плагином.

[править] Достоинства формата

Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах. Здесь показано ключевое преимущество «вектора» над «растром».

• Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
• Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
• Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
• Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируются поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых серверов.
• Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
• SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
• SVG документы легко интегрируются с HTML и XHTML документами. Внешний SVG подключаются через тег <embed>, значение атрибута src имя файла с расширением «.svg», содержащего разметку SVG. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
• Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.

• SVG предоставляет все преимущества XML:
  • Возможность работы в различных средах.
  • Интернационализация (поддержка Юникода).
  • Широкая доступность для различных приложений.
  • Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
  • Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Markup Language).

[править] Недостатки формата

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

[править] Структура SVG документа

Первая строка — стандартный XML заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно "1.0") и кодировку символов (encoding) (желательно использовать Юникод кодировки UTF-8 или UTF-16, но другие кодировки также допустимы, например, русские Windows-1251 и KOI-8):

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

Во второй и третьей строках должен располагаться заголовок DOCTYPE, определяющий тип документа (англ. Document Type Definitions) DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0 и 1.1. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением «full»^[1].

Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.

<!DOCTYPE svg [ 
    <!-- ваши данные -->   ]>

В четвёртой строке размещается корневой элемент документа с указанием пространства имен SVG.

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">

Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.

Завершается документ всегда закрытием корневого тега </svg> .

[править] Пример

Простой статичный SVG документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 100 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<svg version = "1.1"
     baseProfile="full"
     xmlns = "http://www.w3.org/2000/svg" 
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:ev = "http://www.w3.org/2001/xml-events"
     height = "400px"  width = "400px">
     <rect x="0" y="0" width="400" height="400" 
          fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
     <g fill-opacity="0.7" stroke="black" stroke-width="0.5px">
        <circle cx="200px" cy="200px" r="100px" fill="red"   transform="translate(  0,-50)" />
        <circle cx="200px" cy="200px" r="100px" fill="blue"  transform="translate( 70, 50)" />
        <circle cx="200px" cy="200px" r="100px" fill="green" transform="translate(-70, 50)" />
     </g>
</svg>

Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

Еще один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="1em"/>
</svg>

[править] SVGZ

Поскольку код SVG занимает довольно много места, была создана «обёртка» SVGZ, когда SVG сжимают с помощью gzip, а полученному файлу присваивают расширение «SVGZ».

SVG хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру.

[править] Спецификации стандарта

• SVG 1.2 (предварительный)
• SVG 1.1
• SVG Мобильный 1.2 (предварительный)
• SVG Мобильный
• SVG Печать
• SVG Требования (предварительный)

[править] Программное обеспечение

• Inkscape — свободный векторный графический пакет для работы с SVG.
• OpenOffice.org Draw умеет экспортировать графику в файлы формата SVG.
• Adobe Illustrator версии от CS2.
• Adobe GoLive версии от CS2.
• CorelDRAW векторный графический редактор.
• librsvg — библиотека, используемая в Mediawiki для работы с SVG.^[2]

[править] Примечания

[править] Ссылки

• Официальный сайт SVG(англ.)
• Сообщество пользователей, разработчиков и энтузиастов SVG
• Вики об SVG (англ.)
• Список поддерживаемых элементов SVG в браузере Opera
• Статьи о возможностях SVG от разработчиков Оперы
• Интернет Университет - Масштабируемая векторная графика (Scalable Vector Graphics)
• FAQ(англ.) о реализации SVG в браузере Mozilla Firefox
• Примеры(англ.) использования формата SVG
• Страница(англ.) формата SVG на сайте Adobe
• Школы консорциума W3C. Введение в SVG (рус.)
• Открытые SVG клипарты (openclipart.org)