Svg

Svg
Масштабируемая векторная графика
Расширение файла: .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.

Полезное


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

  • SVG —   [Abk. für Scalable Vector Graphics, dt. »skalierbare Vektorgrafiken«], eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML. Eine SVG Datei kann Vektorgrafiken, Pixelbilder und Textbausteine enthalten. Da SVG nicht wie GIF oder JPEG… …   Universal-Lexikon

  • .svg — Vorlage:Infobox Dateiformat/Wartung/magic fehltVorlage:Infobox Dateiformat/Wartung/website fehlt Scalable Vector Graphics Dateiendung .svg, .svgz …   Deutsch Wikipedia

  • SVG — Vorlage:Infobox Dateiformat/Wartung/magic fehltVorlage:Infobox Dateiformat/Wartung/website fehlt Scalable Vector Graphics Dateiendung .svg, .svgz …   Deutsch Wikipedia

  • Svg — Vorlage:Infobox Dateiformat/Wartung/magic fehltVorlage:Infobox Dateiformat/Wartung/website fehlt Scalable Vector Graphics Dateiendung .svg, .svgz …   Deutsch Wikipedia

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

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

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

  • SVG — Масштабируемая векторная графика Расширение .svg, .svgz MIME image/svg+xml Разработан Консорциум Всемирной паутины Последний выпуск Tiny 1.2 / 22 декабря 2008 Тип формата Векторная графика …   Википедия

  • SVG Lüneburg — Vereinsdaten Gründung 2005 Gründer Adresse/ Kontakt Einemhofer weg 26 21394 Kirchgellersen 1. Vorsitzender Andreas Bahlburg …   Deutsch Wikipedia

  • SVG Celle — Voller Name Sportverein Garßen Celle Abkürzung(en) SVG Gegründet 1923 Vereinsfarben …   Deutsch Wikipedia


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

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