Scalable Vector Graphics

(Перенаправлено з .svg)

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

Scalable Vector Graphics
Розширення файлу: ..svg, .svgz
MIME-тип: image/svg+xml[1]
Розробник: 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.[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 додає багатосторінкові документи і обов'язкову підтримку управління кольорами.

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

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

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 елементів.

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»[13]. Якщо з якихось причин декларація 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 добре стискається[14], оскільки це текстовий XML-документ, що має регулярну структуру.

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


Виноски ред.

  1. M Media Type registration for image/svg+xml. Архів оригіналу за 14 березня 2016. Процитовано 18 січня 2008. 
  2. Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS. с. P. 77. ISBN 0-672-32429-6. 
  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. SVG Tiny 1.2 is now a Candidate Recommendation. Архів оригіналу за 24 червня 2008. Процитовано 25 квітня 2008. 
  7. SVG Tiny 1.2 Advances State of the Art for Web Graphics. Архів оригіналу за 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.  {{cite news}}: Проігноровано невідомий параметр |description= (довідка)
  9. HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010. 
  10. Platform Preview gives Web developers first taste of IE9. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010. 
  11. Brockmeier, Joe (30 листопада 2005). Review: Firefox 1.5 and Thunderbird 1.5. Linux.com (англ.). Процитовано 30 листопада 2009. 
  12. Microsoft Joins W3C SVG Working Group. Архів оригіналу за 8 січня 2010. Процитовано 7 січня 2010. 
  13. SVG Authoring Guidelines: Don't include a DOCTYPE declaration [Архівовано 14 квітня 2008 у Wayback Machine.](англ.)
  14. Minimizing SVG File Sizes - SVG 1.1 Specification. Архів оригіналу за 30 вересня 2011. Процитовано 21 серпня 2011. 

Посилання ред.

Бібліотеки ред.

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

Див. також ред.