- SVG
-
Масштабируемая векторная графика Расширение .svg, .svgz
MIME image/svg+xml
Разработан Последний выпуск Tiny 1.2 / 22 декабря 2008
Тип формата Расширен из Открытый формат? Да
Сайт SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.1, которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 1.2.
Содержание
Возможности языка
- Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом
d
тегаpath
и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L
,H
,V
), кривых Безье (C
,S
,Q
,T
) и дуг (A
). Пример, описывающий звезду из 5 линий, содержит строку данных с командамиM
(англ. moveto — переместить) иL
(англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.
<path fill="none" stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />
- Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
- Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
- Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы[1]).
- Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это дает очень широкие возможности для разработчиков веб-графики.
Достоинства формата
- Текстовый формат — файлы 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 подключаются через тег <object>, значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты 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 наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ).
- Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
- Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ, но и даже обладает чрезмерно избыточным по отношению к растровому формату размером. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
Структура документа SVG
Первая строка — стандартный XML-заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно «1.0») и кодировку символов (encoding):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Во второй и третьей строках должен располагаться заголовок 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. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением «full»[2].
Если по каким-то причинам декларация 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 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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.6" stroke="black" stroke-width="0.5px"> <circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" /> <circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" /> <circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" /> </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" standalone="no"?> <!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-документ, имеющий регулярную структуру.
Поддержка в браузерах
браузер версия Internet Explorer 9+[3] Mozilla Firefox 1.5+[4] Netscape Navigator 9.0+ Google Chrome 3.0+ Safari 4.0+ Opera 8.0+ Спецификации стандарта
- SVG 1.2 (предварительный)
- SVG 1.1
- SVG Мобильный 1.2 (предварительный)
- SVG Мобильный
- SVG Печать
- SVG Требования (предварительный)
Программное обеспечение
- Adobe Illustrator версии от 10.0 — векторный графический редактор.
- Adobe GoLive версии от CS2 — HTML-редактор.
- CorelDRAW — векторный графический редактор.
- Inkscape — свободный векторный графический пакет для работы с SVG.
- Microsoft Office Visio — способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
- OpenOffice.org Draw — умеет экспортировать графику в файлы формата SVG.
- sK1 — свободный векторный графический редактор.
- Sketsa SVG Editor — редактор SVG-файлов.
- MetaPost — язык программирования, используемый для создания графических иллюстраций.
- librsvg — библиотека, используемая в Mediawiki для работы с SVG[5][6].
- Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle[7].
- SVG Viewer Extension for Windows Explorer — расширение для проводника Windows, позволяющее просматривать в нём SVG файлы в виде эскизов.
Примечания
- ↑ Редактирование SVG рисунка пользователем браузера (рус.)
- ↑ SVG Authoring Guidelines:Don’t include a DOCTYPE declaration (англ.)
- ↑ Windows Internet Explorer Platform Preview Release Notes (англ.)
- ↑ Brockmeier, Joe. Review: Firefox 1.5 and Thunderbird 1.5 (англ.), Linux.com (30 November 2005). Проверено 30 ноября 2009.
- ↑ Manual:Image Administration — MediaWiki (англ.)
- ↑ Однако, в стандартном дистрибутиве MediaWiki, по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется с помощью $wgSVGConverter = 'rsvg'.
- ↑ Squiggle.
Ссылки
- Официальный раздел SVG на сайте W3 консорциума (англ.)
- Сообщество пользователей, разработчиков и энтузиастов SVG
- Вики об SVG (англ.)
- Список поддерживаемых элементов SVG в браузере Opera
- Статьи о возможностях SVG от разработчиков Оперы
- FAQ (англ.) о реализации SVG в браузере Mozilla Firefox
- Примеры (англ.) использования формата SVG
- Страница (англ.) формата SVG на сайте Adobe
- Школы консорциума W3C. Введение в SVG (рус.)
- Открытые SVG клипарты (openclipart.org)
Стандарты Консорциума Всемирной паутины Рекомендации Canonical XML • CDF • CSS • DOM • Geolocation API • HTML • ITS • MathML • OWL • P3P • PLS • RDF (Schema) • SISR • SKOS • SMIL • SOAP • SRGS • SSML • SVG • SPARQL • Timed Text • VoiceXML • WSDL • XForms • XHTML • XHTML+RDFa • XInclude • XLink • XML (Base • Encryption • Events • Information Set • namespace • Schema • Signature) • XPath / 1.0 / 2.0 • XPointer • XProc • XQuery • XSL • XSL-FO • XSLT (элементы) • XUP
Примечания XAdES • XHTML+SMIL
Рабочие проекты CCXML • CURIE • HTML5 • InkML • RIF • SCXML • SMIL Timesheets • sXBL • WICD • XFDL • XFrames • XBL • XHTML+MathML+SVG • XMLHttpRequest
Guidelines Web Content Accessibility Guidelines
Initiative Multimodal Interaction Activity • Markup Validation Service • Web Accessibility Initiative
Deprecated Организации World Wide Web Foundation • SVG Working Group • WebOnt • Device Description Working Group • WHATWG
ПО Agora • Argo • Arena • Amaya • CERN httpd • Libwww • Line Mode Browser
Конференции IW3C2 • World Wide Web Conference • WWWC1
Медиаконтейнеры Видео/аудио Аудио Графические форматы (сжатие) Растровые Векторные Комплексные Категории:- Форматы файлов
- XML
- Графические форматы
- Векторная графика
- Графика в Web
- Стандарты W3C
- Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом
Wikimedia Foundation. 2010.