Scalable Vector Graphics

Scalable Vector Graphics
Масштабируемая векторная графика
Расширение файла: .svg, .svgz
Тип Разработчик: World Wide Web Consortium
Расширение для: англ. Scalable Vector Graphics — масштабируемая векторная графика; произносится [эс-ви-джи́]) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как XHTML. В основу SVG легли языки разметки
Растровое изображение, сгенерированное из примера SVG, демонстрирует прозрачность, градиентную заливку, разнообразные контуры и текст. Для просмотра оригинала потребуется браузер со встроенной поддержкой SVG, или оборудованный специальным плагином.

Содержание

Достоинства формата

Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах. Здесь показано ключевое преимущество «вектора» над «растром».
  • Текстовый формат — файлы SVG можно читать и редактировать при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах GIF, а также хорошо поддаются сжатию.
  • Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
  • Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
  • Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируются поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых серверов.
  • Анимация реализована в SVG с помощью языка ECMAScript. SVG-элементами можно управлять с помощью скриптов и анимации в 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 заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно "1.0") и кодировку символов (encoding) (желательно использовать Юникод кодировки UTF-16, но другие кодировки также допустимы, например, русские KOI-8):

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

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

<!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.)

SVGZ

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

SVG хорошо сжимается, поскольку это текстовый

Спецификации стандарта

Программное обеспечение

Примечания

  1. ↑ SVG Authoring Guidelines:Don’t include a DOCTYPE declaration(англ.)
  2. ↑ http://www.mediawiki.org/wiki/Manual:Image_Administration#SVG(англ.)

Ссылки

Стандарты Консорциума Всемирной паутины
Рекомендации W3C CDF ·  · CSS ·  ·  ·  · OWL · RDF · RDF Schema · SISR ·  ·  · SRGS · SSML · SVG · Timed Text · VoiceXML ·  ·  ·  ·  ·  · XML Base · XML Events · XML Information Set · XML Schema ·  ·  ·  ·  ·  ·  · Примечания XHTML+SMIL
Рабочие проекты CCXML · CURIE · InkML · XFrames · XFDL · WICD · XHTML+MathML+SVG
Графические форматы
Растровые

статичные:  ·  ·  · HD Photo ·  ·  ·  ·  ·  · JPEG 2000 ·  · OpenEXR ·  · PNG · PSD · RAW · TGA ·  · APNG ·  · Векторные

статичные: AI · EPS ·  ·  · SVG · WMF

анимационные: SVG · SWF

Wikimedia Foundation. 2010.

Полезное


Смотреть что такое "Scalable Vector Graphics" в других словарях:

  • Scalable vector graphics — « SVG » redirige ici. Pour les autres significations, voir SVG (homonymie). Scalable Vector Graphics Extension de fichier …   Wikipédia en Français

  • Scalable Vector Graphics — (SVG) es un lenguaje para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en XML. SVG se convirtió en una Recomendación del W3C en Septiembre de 2001, por lo que ya ha sido incluido …   Enciclopedia Universal

  • Scalable Vector Graphics — Scalable Vector Graphics,   SVG …   Universal-Lexikon

  • Scalable Vector Graphics — Infobox file format name = Scalable Vector Graphics icon = caption = extension = .svg, .svgz mime = image/svg+xml [ [http://www.w3.org/TR/SVGMobile12/mimereg.html M Media Type registration for image/svg+xml] ] type code = uniform type = magic =… …   Wikipedia

  • Scalable Vector Graphics — Vorlage:Infobox Dateiformat/Wartung/MagischeZahl fehltVorlage:Infobox Dateiformat/Wartung/Standard fehlt Scalable Vector Graphics Vorlage:Infobox Dateiformat/Wartung/Screenshot Format …   Deutsch Wikipedia

  • Scalable Vector Graphics — « SVG » redirige ici. Pour les autres significations, voir SVG (homonymie). Scalable Vector Graphics …   Wikipédia en Français

  • Scalable Vector Graphics — Gráficos Vectoriales Escalables Desarrollador World Wide Web Consortium …   Wikipedia Español

  • Comparison of layout engines (Scalable Vector Graphics) — Scalable Vector Graphics SXBL SVG Working Group SVG filter effects Precision Graphics Markup Language Vector Markup Language XHTML+MathML+SVG SVG animation Comparison of layout engines (SVG) …   Wikipedia

  • Vector graphics — This article is about computer illustration. For other uses, see Vector graphics (disambiguation). Example showing effect of vector graphics versus raster graphics. The original vector based illustration is at the left. The upper right image… …   Wikipedia

  • vector graphics — a method of electronically coding graphic images so that they are represented in lines rather than fixed bit maps, allowing an image, as on a computer display screen, to be rotated or proportionally scaled. * * * ▪ computer science… …   Universalium


Поделиться ссылкой на выделенное

Прямая ссылка:
… Нажмите правой клавишей мыши и выберите «Копировать ссылку»