Scalable Vector Graphics скорочено SVG з англ масштабована векторна графіка специфікація мови розмітки що базується на X

Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двомірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простих XLink-ів. Ця специфікація є відкритим стандартом, розробленим робочою групою англ. організації World Wide Web Consortium.

Scalable Vector Graphics
Розширення файлу:	`..svg, .svgz`
MIME-тип:	`image/svg+xml`
Розробник:	World Wide Web Consortium
Тип формату:	формат файлів векторної графіки
Розширений з:	XML

Історія розвитку

SVG був розроблений робочою групою W3C SVG Working Group, починаючи від 1998, після того як Macromedia та Microsoft ввели Vector Markup Language (VML), і водночас Adobe Systems та Sun Microsystems представили конкуруючий формат PGML. Робочу групу очолив Chris Lilley з W3C.

SVG 1.0 набув статусу рекомендації W3C 4 вересня 2001.
SVG 1.1 став рекомендацією W3C 14 січня 2003. Специфікація SVG 1.1 має модульну структуру, щоб дозволити реалізовувати підмножину формату в профілях. Крім цього, між SVG 1.1 та SVG 1.0 дуже мало відмінностей.
- SVG Tiny та SVG Basic (Мобільний профіль SVG) стали рекомендацією W3C водночас, 14 січня 2003. Вони описані як профілі SVG 1.1.
SVG Tiny 1.2 став кандидатом в рекомендації W3C 10 серпня 2006., і офіційною рекомендацією W3C — 22 грудня 2008. SVG Full 1.2 є робочим нарисом (W3C Working Draft). SVG Tiny 1.2 спочатку був випущений як профіль, але пізніше перероблений у повноцінну специфікацію, включаючи всі необхідні частини від SVG 1.1 та SVG 1.2. SVG 1.2 Full додає модулі всередину ядра SVGT 1.2.
SVG Print додає багатосторінкові документи і обов'язкову підтримку управління кольорами.

Підтримка в браузерах

Браузер	у версіі	підтримує
Internet Explorer	8.0	ні, вбудована підтримка з'явилась лише в IE9 beta
Mozilla Firefox	з 1.5	так
Netscape Navigator	9.0	так
Google Chrome	3.0	так
Safari	4.0	так
Opera	з 8.0	так
Chromium	6.0	так

Microsoft приєдналася до W3C SVG Working Group на початку 2010 року, після тривалих вагань стосовно власницьких рішень і конкуруючих рішень в царині вебграфіки.

Властивості та переваги формату

Малюнок демонструє відмінність між растровою та векторною графіками. Растрове зображення утворене з окремих крапок-пікселів, в той час як векторне зображення утворене з комбінації форм. При збільшенні або деформації пікселі растрового зображення стають помітні, тоді як векторний малюнок зберігає форму

Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів. Працювати з SVG без засобів візуального програмування не складніше ніж з HTML. При прогляданні документів 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 документа

Перший рядок — стандартний заголовок 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». Якщо з якихось причин декларація 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"  height = "100%" width = "100%"> </svg>

Далі йде решта тексту документа, вкладена в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованої сцени. Завершується документ завжди закриттям кореневого тегу </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>

Кресленик виконано в КОМПАС-Графік та експортовано у SVG формат

Стиснення SVGZ

Оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в gzip, а отриманому архіву зазвичай надають розширення «SVGZ».

SVG добре стискається, оскільки це текстовий XML-документ, що має регулярну структуру.

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

SVG 1.2 (попередній) [ 5 квітня 2008 у Wayback Machine.]
SVG 1.1 [ 16 вересня 2012 у Wayback Machine.]
SVG мобільний 1.2 (попередній) [ 12 січня 2008 у Wayback Machine.]
SVG мобільний [ 18 квітня 2008 у Wayback Machine.]
SVG друк [ 18 квітня 2008 у Wayback Machine.]
SVG вимоги (попередній) [ 18 квітня 2008 у Wayback Machine.]

Виноски

. Архів оригіналу за 14 березня 2016. Процитовано 18 січня 2008.
Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS. с. P. 77. . {{}}: |page= має зайвий текст ()
W3C Recommendation, SVG 1.0 Specification [ 11 травня 2008 у Wayback Machine.] (2001-09-04)
W3C Recommendation, SVG 1.1 Specification [ 16 вересня 2012 у Wayback Machine.] (2003-01-14)
W3C Candidate Recommendation, SVG Tiny 1.2 Specification [ 18 квітня 2008 у Wayback Machine.] (2006-08-10)
. Архів оригіналу за 24 червня 2008. Процитовано 25 квітня 2008.
. Архів оригіналу за 4 січня 2010. Процитовано 7 січня 2010.
Svensson, Peter (10 вересня 2008). Creator of Web spots a flaw in Internet Explorer (англ.). Associated Press, msnbc.com. Архів оригіналу за 25 серпня 2011. Процитовано 30 листопада 2009. {{}}: Проігноровано невідомий параметр |description= ()
. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.
. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.
Brockmeier, Joe (30 листопада 2005). Review: Firefox 1.5 and Thunderbird 1.5. Linux.com (англ.). Процитовано 30 листопада 2009.
. Архів оригіналу за 8 січня 2010. Процитовано 7 січня 2010.
SVG Authoring Guidelines: Don't include a DOCTYPE declaration [ 14 квітня 2008 у Wayback Machine.](англ.)
. Архів оригіналу за 30 вересня 2011. Процитовано 21 серпня 2011.

Посилання

Офіційний сайт SVG [ 19 серпня 2016 у Wayback Machine.](англ.)
Офіційний пакет прикладів SVG і їх реалізацій у сучасних браузерів [ 11 серпня 2011 у Wayback Machine.](англ.)
Спільнота користувачів, розробників та ентузіастів SVG [ 23 квітня 2008 у Wayback Machine.]
Підручник з SVG-графіки [ 13 серпня 2010 у Wayback Machine.](рос.)
(англ.)
Список [ 16 травня 2008 у Wayback Machine.] елементів SVG, що підтримує браузер Opera
(англ.) Про реалізацію SVG в браузері Mozilla Firefox
Приклади [ 29 квітня 2014 у Wayback Machine.](рос.) використання формата SVG
Сторінка [ 16 травня 2008 у Wayback Machine.](англ.) формату SVG на сайті Adobe
Школи консорціуму W3C. Введення в SVG [ 30 квітня 2008 у Wayback Machine.] (рос.)
Опис креслень у форматі SVG (v.sytnik.lviv.ua) [ 26 вересня 2013 у Wayback Machine.] (рос.)

Бібліотеки

Програмне забезпечення

Adobe SVG Viewer [ 17 січня 2006 у Wayback Machine.], зокрема і плагін для підтримки формату в IE6.
, плагін для Internet Explorer, Windows File Explorer та окремий власне плеєр.
Сайт [ 4 жовтня 2020 у Wayback Machine.] Inkscape (вільний векторний графічний пакет для роботи з SVG).

Див. також

[1] . Архів оригіналу за 14 березня 2016. Процитовано 18 січня 2008.

[2] Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS. с. P. 77. . {{}}: |page= має зайвий текст ()

[3] W3C Recommendation, SVG 1.0 Specification [ 11 травня 2008 у Wayback Machine.] (2001-09-04)

[4] W3C Recommendation, SVG 1.1 Specification [ 16 вересня 2012 у Wayback Machine.] (2003-01-14)

[5] W3C Candidate Recommendation, SVG Tiny 1.2 Specification [ 18 квітня 2008 у Wayback Machine.] (2006-08-10)

[6] . Архів оригіналу за 24 червня 2008. Процитовано 25 квітня 2008.

[7] . Архів оригіналу за 4 січня 2010. Процитовано 7 січня 2010.

[8] Svensson, Peter (10 вересня 2008). Creator of Web spots a flaw in Internet Explorer (англ.). Associated Press, msnbc.com. Архів оригіналу за 25 серпня 2011. Процитовано 30 листопада 2009. {{}}: Проігноровано невідомий параметр |description= ()

[9] . Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.

[10] . Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.

[11] Brockmeier, Joe (30 листопада 2005). Review: Firefox 1.5 and Thunderbird 1.5. Linux.com (англ.). Процитовано 30 листопада 2009.

[12] . Архів оригіналу за 8 січня 2010. Процитовано 7 січня 2010.

[13] SVG Authoring Guidelines: Don't include a DOCTYPE declaration [ 14 квітня 2008 у Wayback Machine.](англ.)

[14] . Архів оригіналу за 30 вересня 2011. Процитовано 21 серпня 2011.