SVG

Материал из Seo Wiki - Поисковая Оптимизация и Программирование
Перейти к навигацииПерейти к поиску
Масштабируемая векторная графика
Файл:SVG.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, или оборудованный специальным плагином.

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

Файл:Bitmap VS 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 подключаются через тег <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 документа

Первая строка — стандартный 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-документ, имеющий регулярную структуру.

Поддержка в браузерах

Браузер в версии поддерживает
Internet Explorer 8.0 Нет[2]
Mozilla Firefox с 1.5[3], включая 3.0 и текущую 3.6 Да
Netscape Navigator 9.0 Да
Google Chrome 3.0 Да
Safari 4.0 Да
Opera с 8.0; включая 9.5 Да

Internet Explorer Team вступила в рабочую группу W3C SVG, однако о поддержке SVG в будущих версиях браузера ничего не известно.[4]

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

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

  • Inkscape — свободный векторный графический пакет для работы с SVG.
  • OpenOffice.org Draw умеет экспортировать графику в файлы формата SVG.
  • sK1 векторный графический редактор.
  • Adobe Illustrator версии от CS2.
  • Adobe GoLive версии от CS2.
  • CorelDRAW векторный графический редактор.
  • Visio векторный графический редактор от Microsoft.
  • librsvg — библиотека, используемая в Mediawiki для работы с SVG.[5][6]
  • Batik — Java библиотека для генерации, отрисовки и различных манипуляций с изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle.[7]

Примечания

  1. ↑ SVG Authoring Guidelines:Don’t include a DOCTYPE declaration(англ.)
  2. ↑ Svensson, Peter. Creator of Web spots a flaw in Internet Explorer (англ.), Associated Press, msnbc.com (2008-09-10). Проверено 30 ноября 2009.
  3. ↑ Brockmeier, Joe. Review: Firefox 1.5 and Thunderbird 1.5 (англ.), Linux.com (2005-11-30). Проверено 30 ноября 2009.
  4. ↑ Появится ли поддержка SVG в Internet Explorer? (рус.) (2010-01-18).
  5. ↑ http://www.mediawiki.org/wiki/Manual:Image_Administration#SVG(англ.)
  6. ↑ Однако, в стандартном дистрибутиве MediaWiki, по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется c помощью $wgSVGConverter = 'rsvg'.
  7. ↑ Squiggle.

Ссылки

п·о·р
Стандарты Консорциума Всемирной паутины
Рекомендации CDF • CGI • CSS • DOM • HTML • LOGML • MathML • OWL • RDF • RDF Schema • SISR • SMIL • SOAP • SRGS • SSML • SVG • Timed Text • VoiceXML • WSDL • XForms • XHTML • XInclude • XML • XML Base • XML Events • XML Information Set • XML Schema • XPath • XPointer • XQuery • XSL • XSL-FO • XSLT • XLink
Примечания XHTML+SMIL
Рабочие проекты CCXML • CURIE • InkML • XFrames • XFDL • WICD • XHTML+MathML+SVG
См. также WHATWG
п·о·р
Графические форматы
Статичные Анимационные
Растровые BMP • DjVu • GIF • HD Photo • ICO • ILBM • JBIG • JBIG2 • JPEG • JPEG 2000 • JPEG-LS • OpenEXR • PCX • PNG • PSD • RAW • TGA • TIFF • WBMP APNG • GIF • MNG
Векторные AI • EPS • PDF • PostScript • SVG • WMF SVG • SWF

als:Scalable Vector Graphics ar:رسوميات متجهية متغيرة bat-smg:SVG bg:SVG bs:Scalable Vector Graphics ca:SVG cs:Scalable Vector Graphics da:Scalable Vector Graphics de:Scalable Vector Graphics en:Scalable Vector Graphics eo:Streka Vari-skala Grafiko es:Scalable Vector Graphics eu:SVG fa:گرافیک برداری مقیاس‌پذیر fi:SVG fr:Scalable Vector Graphics gl:SVG he:SVG hr:SVG hu:SVG id:Scalable Vector Graphics is:SVG it:Scalable Vector Graphics ja:Scalable Vector Graphics ka:მასშტაბირებადი ვექტორული გრაფიკა ko:SVG ksh:Skalėerbaa Vëkktoər-Jraffikk lt:SVG ms:SVG nl:Scalable Vector Graphics no:Scalable Vector Graphics pl:SVG pt:SVG ro:Scalable Vector Graphics simple:Scalable Vector Graphics sk:Scalable Vector Graphics sl:Scalable Vector Graphics sr:Скалабилна векторска графика sv:SVG th:Scalable Vector Graphics tr:SVG uk:Scalable Vector Graphics ur:پیمانی سمتیہ تخطیط vi:SVG zh:可缩放矢量图形 zh-classical:可縮放矢量圖形 zh-min-nan:SVG

Если вам нравится SbUP.com Сайт, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....

→

Источник — https://www.sbup.com:443/w/index.php?title=SVG&oldid=4378