Scalable Vector Graphics

Scalable Vector Graphics

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

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

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

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.]

Посилання

• Офіційний сайт SVG [Архівовано 19 серпня 2016 у Wayback Machine.](англ.)
• Офіційний пакет прикладів SVG і їх реалізацій у сучасних браузерів [Архівовано 11 серпня 2011 у Wayback Machine.](англ.)
• Спільнота користувачів, розробників та ентузіастів SVG [Архівовано 23 квітня 2008 у Wayback Machine.]
• Підручник з SVG-графіки [Архівовано 13 серпня 2010 у Wayback Machine.](рос.)
• wiki (англ.)
• Список [Архівовано 16 травня 2008 у Wayback Machine.] елементів SVG, що підтримує браузер Opera
• Статті про можливості SVG від розробників Опери
• FAQ(англ.) Про реалізацію 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.] (рос.)

Бібліотеки

• Відкриті SVG-кліпарти (openclipart.org)

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

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

Див. також

• Векторна та растрова графіка
• XML
• Порівняння програмного забезпечення для перетворення растрових зображень у векторні