SVG

SVG (Scalable Vector Graphics)

SVG (з англ. масштабована векторна графіка) - мова розмітки масштабованої векторної графіки, створена Консорціумом Всесвітньої павутини (W3C) і входить до підмножини розширюваної мови розмітки XML, призначена для опису двовимірної векторної і змішаної векторно/растрової графіки у форматі XML. Підтримує нерухому(декларативну) та анімовану(скриптову) інтерактивну графіку, і не підтримує тривимірну(Хіба що псевдо тривимірну). Розробляється з 1999 року. в 2001 з'явилась версія 1.0, а в 2011 1.1, яка й досі актуальна.

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

Властивості

• SVG — відкритий стандарт. На відміну від деяких інших форматів, SVG не є чиєюсь власністю.
• Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів. Працювати з SVG без засобів візуального програмування не складніше ніж з HTML(але тільки якщо ви хочете намалювати якісь примітиви ;-) ). При прогляданні документів SVG, що містять графіку, є доступ до проглядання коду файлу, що проглядається, і можливість збереження всього документу.
• Масштабованість — SVG є векторним форматом. Існує можливість збільшити будь-яку частину зображення SVG без втрати якості. Додатково, до елементів SVG документу можливо застосовувати фільтри — спеціальні модифікатори для створення ефектів, подібних вживаним при обробці растрових зображень. В тексті SVG-коду фільтри описуються тегами, візуалізацію яких забезпечує засіб перегляду, що не впливає на розмір початкового файлу, забезпечуючи при цьому необхідну ілюстративну виразність.
• Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти зображенняння у форматах PNG, GIF або JPG.
• Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексуються пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів.
• Анімація реалізована в SVG за допомогою мови SMIL (Synchronized Multimedia Integration Language), розробленої також консорціумом W3C. Підтримуються скриптові мови на основі специфікації ECMAScript. SVG-елементами можна керувати за допомогою JavaScript (про це трохи пізніше). Застосування скриптів і анімації в SVG дозволяє створювати динамічну і інтерактивну графіку. У SVG забезпечується подієва модель, відстежуються події (завантаження сторінки, зміна її параметрів, події миші, клавіатури тощо). Анімація може запускатися по певній події (наприклад «onmouseover» або «onclick»), що додає графіці інтерактивність. У кожного елементу є свої власні події, до яких можна прив'язувати окремі скрипти.
• SVG документи легко інтегруються з HTML і XHTML документами. Зовнішні SVG підключаються через тег <embed>, значення атрибуту src ім'я файлу з розширенням «.svg», що містить розмітку SVG. Атрибути width і height визначають розміри області SVG по-горизонталі і по-вертикалі. Елементи SVG сумісні з HTML і DHTML.
• Сумісність з CSS (англ. Cascading Style Sheets). Відображенням (форматуванням і декоруванням) SVG елементів можна управляти за допомогою таблиці стилів CSS 2.0 і її розширень, або безпосередньо за допомогою атрибутів SVG елементів.

Переваги

• Можливість роботи в різних середовищах.
• Інтернаціоналізація (підтримка Юнікоду).
• Широка доступність для різних застосувань.
• Легка модифікація через стандартні(наприклад - DOM). SVG підтримує стандартизовану W3C об'єктну модель документу DOM, забезпечуючи доступ до будь-якого елементу, що дає широкі можливості з динамічної модифікації елементів, їхніх атрибутів і подій.
• Легке перетворення таблицями стилів XSLT. Як будь-який заснований на XML формат, SVG дає можливість використовувати для його обробки таблиці трансформації (XSLT).

Недоліки

• SVG успадковує всі недоліки XML, такі як великий розмір файлу (втім, останній компенсується існуванням стисненого формату SVGZ, проте його використання на даний момент ускладнене, оскільки SVGZ не має власного mimetype).
• Складність використання у великих картографічних додатках через те, що для правильного відображення маленької частини зображення документ необхідно прочитати повністю.
• Успадковує всі недоліки векторного зображення.

Структура SVG документа

Перший рядок — стандартний заголовок XML, який вказує версію XML (version) (зазвичай "1.0") і кодування символів (encoding) (бажано використовувати Юнікод кодування UTF-8 або UTF-16):

<?xml version="1.0" encoding="UTF-8"?>

Далі можна написати заголовок 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> описують елементи, з яких складається зображення. Подивимось та розберемо простий приклад з Wikipedia (Приклад 1)

<?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="150px" r="100px" fill="red"  />
       <circle cx="270px" cy="250px" r="100px" fill="blue"/>
       <circle cx="130px" cy="250px" r="100px" fill="green" />
    </g>
</svg>

Праворуч, на малюнку, зображено те, що описано в коді вище. Перщі 2 теги, <?xml > та <svg>, ми вже розібрали. Усередені останнього знаходяться <rect>, <g> та <circle>. Не складно здогадатись, що <rect> відповідає за прямокутник (в даному випадку - квадратну рамку) з координатами лівого верхнього кута (0,0) та висотою і шириною 400 пікселів, без заливки (fill="none"), з контуром чорного кольору (stroke="black") товщиною в 5 пікселів (stroke-width="5px") та непрозорістю на 50% (stroke-opacity="0.5"). Тегом <g> групуються елементи SVG в один контейнер, при цьому всі елементи створеного контейнера перейматимуть атрибути, задані в відкриваючому тегі <g>. В прикладі, всім трьом колам, задається непрозорість заливки 70% (fill-opacity="0.7"), колір контуру чорний, та товщина контуру 0.5 пікселя. Тег <circle> дозволяє малювати кола дуже просто - задаєму координати центра cx та cy, радіус кола r та колір заливки fill.