Scalable Vector Graphics (скорочено SVG) (з англ.масштабована векторна графіка) — специфікаціямови розмітки, що базується наXML, таформат файлів для двомірної векторної графіки, як статичної, так іанімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простихXLink-ів.[2] Ця специфікація є відкритим стандартом, розробленим робочою групоюангл.SVG Working Group організаціїWorld Wide Web Consortium.
SVG 1.0 набув статусу рекомендації W3C 4 вересня 2001.[3]
SVG 1.1 став рекомендацією W3C 14 січня 2003.[4] Специфікація 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.[5][6], і офіційною рекомендацією W3C — 22 грудня 2008[7]. 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 додає багатосторінкові документи і обов'язкову підтримку управління кольорами.
Microsoft приєдналася до W3C SVG Working Group на початку 2010 року[12], після тривалих вагань стосовно власницьких рішень і конкуруючих рішень в царині вебграфіки.
Малюнок демонструє відмінність між растровою та векторною графіками. Растрове зображення утворене з окремих крапок-пікселів, в той час як векторне зображення утворене з комбінації форм. При збільшенні або деформації пікселі растрового зображення стають помітні, тоді як векторний малюнок зберігає форму
Текстовий формат — файли 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 елементів.
Легка модифікація через стандартніAPI — наприклад,DOM. SVG підтримує стандартизовану W3C об'єктну модель документу DOM, забезпечуючи доступ до будь-якого елементу, що дає широкі можливості з динамічної модифікації елементів, їхніх атрибутів і подій.
Легке перетворення таблицями стилівXSLT. Як будь-який заснований наXML формат, SVG дає можливість використовувати для його обробки таблиці трансформації (XSLT). Перетворюючи XML-дані в SVG за допомогою простого XSL, можна легко отримати графічне представлення будь-яких даних, наприклад візуалізувати хімічні молекули, описаних на мові CML (Chemical Markup Language).
Перший рядок — стандартний заголовок 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»[13]. Якщо з якихось причин декларація DOCTYPE в документі необхідна, рекомендовано використовувати порожню декларацію, як в прикладі.
<!DOCTYPE svg [ <!-- ваші дані -->]>
У четвертому рядку, розміщується кореневий елемент документа з вказівкою простору імен SVG
Далі йде решта тексту документа, вкладена в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованої сцени. Завершується документ завжди закриттям кореневого тегу</svg>.
Простий статичний документ SVG (містить: контурквадрата розміром 400пікселів і три напівпрозоріколарадіусом 100 пікселів, по центру квадрата, кожне коло зміщується від центру квадрата приблизно на пів радіусу).
Для відображення малюнку потрібний браузер з вбудованим переглядом формату чи зі встановленим плагіном.
Оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують вgzip, а отриманому архіву зазвичай надають розширення «SVGZ».
SVG добре стискається[14], оскільки це текстовий XML-документ, що має регулярну структуру.
↑Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003).SVG Unleashed. Indianapolis: SAMS. с. P. 77.ISBN 0-672-32429-6.{{cite book}}:|page= має зайвий текст (довідка)
