SVG

SVG (від англ. S calable V ector G raphics - масштабована векторна графіка) - мова розмітки масштабованої векторної графіки, створений Консорціумом Всесвітньої павутини (W3C) і входить до підмножина розширюваного мови розмітки XML, призначений для опису двовимірної векторної і змішаної векторно / растрової графіки у форматі XML. Підтримує як нерухому, так і анімовану інтерактивну графіку - або, в інших термінах, декларативну і скриптові. Не підтримує опис тривимірних об'єктів (не плутати з імітацією тривимірності шляхом світлотіні). Це відкритий стандарт, який є рекомендацією консорціуму W3C - організації, що розробила такі стандарти, як HTML і XHTML. В основу SVG лягли мови розмітки VML і PGML. Розробляється з 1999 року. У 2001 році вийшла версія 1.1, яка залишається актуальною до сьогоднішнього дня. В даний час в активній розробці знаходиться версія 1.2.

Растрове зображення, згенероване з прикладу SVG, демонструє прозорість, градієнтну заливку, різноманітні контури і текст. Для перегляду оригіналу буде потрібно браузер з вбудованою підтримкою SVG, або обладнаний спеціальним плагіном.

1. Можливості мови

  • Опис шляхів ( англ. path ). Дозволяє задати будь-яку фігуру компактної рядком, що описує шлях від початкової точки до кінцевої через будь-які проміжні координати. Рядок з даними задається атрибутом d тега path і містить команди, закодовані набором літер і чисел. Буква визначає тип команди, числа - її параметри (найчастіше - координати). Команди дозволяють описувати фігури, що складаються з відрізків прямих ( L, H, V), кривих Безьє ( C, S, Q, T) і дуг ( A). Приклад, що описує зірку з 5 ліній, містить рядок даних з командами M ( англ. moveto - Перемістити) і L ( англ. lineto - Намалювати лінію), що містять в якості аргументів координати точок по X і Y.
  fill  =  "None"  stroke  =  "Black"  d  =  "M 227239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238"  /> 
  • Опис основних геометричних фігур (багатокутники, прямокутники, кола і т. п.).
  • Широкий спектр візуальних властивостей, які можна застосувати до фігур та шляхам: забарвлення, прозорість, скруглення кутів і т. д.
  • Інтерактивність. На кожний окремий елемент і на ціле зображення можна повісити обробник подій (клік, переміщення, натискання клавіші і т.д), таким чином, користувач може управляти малюнком (наприклад - переміщати мишкою деякі елементи [1]).
  • Анімація і сценарії. За допомогою ECMAScript або JavaScript можна описувати навіть самі складні сценарії, пов'язані з математичними обчисленнями координат і пропорцій фігур. Разом з інтерактивністю і SMIL анімацією це дає дуже широкі можливості для розробників веб-графіки.

2. Переваги формату

Растрове зображення містить в собі інформацію про точки, а векторне - про фігури. Тут показано ключова перевага "вектора" над "растром".
  • Текстовий формат - файли SVG можна читати і редагувати (при наявності деяких навичок) за допомогою звичайних текстових редакторів. При перегляді документів, що містять 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 підключаються через тег , значення атрибута data - ім'я файлу з розширенням ". Svg", що містить розмітку SVG, type - MIME-тип, тобто image / svg + xml. Атрибути 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).

    3. Недоліки формату

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

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

    Перший рядок - стандартний XML-заголовок, оголошення ( англ. XML declaration ), Що вказує версію XML (version) (зазвичай "1.0") і кодування символів (encoding):

      version  =  "1.0"  encoding  =  "UTF-8"  standalone  =  "No"  ?> 

    У другій і третій рядках повинен розташовуватися заголовок DOCTYPE, що визначає тип документа ( англ. Document Type Definitions ) DTD :

      "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

    На жаль, в деяких випадках при застосуванні Mozilla Firefox з вбудованим переглядачем SVG зміст оголошення DOCTYPE може бути джерелом помилок. Є рекомендації не використовувати декларацію DOCTYPE в SVG версій 1.0. Замість цього рекомендовано включати атрибут baseProfile в кореневий елемент зі значенням "full" [2].

    Якщо з якихось причин декларація DOCTYPE в документі необхідна, рекомендовано використовувати порожню декларацію, як у прикладі.

        ]> 

    У четвертому рядку розміщується кореневий елемент документа із зазначенням простору імен 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%"  > 

    Далі йде решта тексту документа вкладений в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованого сцени.

    Завершується документ завжди закриттям кореневого тега .


    4.1. Приклад

    Простий статичний SVG-документ з контуром квадрата розміром 400 пікселів і трьома напівпрозорими колами радіусом 104 пікселів, по центру квадрата, кожен коло зміщується від центру квадрата приблизно на пів радіусу.

      version  =  "1.0"  encoding  =  "UTF-8"  standalone  =  "No"  ?>   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"  >   x  =  "0"  y  =  "0"  width  =  "400"  height  =  "400"  fill  =  "None"  stroke  =  "Black"  stroke-width  =  "5px"  stroke-opacity  =  "0.5"  />   fill-opacity  =  "0.6"  stroke  =  "Black"  stroke-width  =  "0.5px"  >   cx  =  "200px"  cy  =  "200px"  r  =  "104px"  fill  =  "Red"  transform  =  "Translate (0, -52)"  />   cx  =  "200px"  cy  =  "200px"  r  =  "104px"  fill  =  "Blue"  transform  =  "Translate (60, 52)"  />   cx  =  "200px"  cy  =  "200px"  r  =  "104px"  fill  =  "Green"  transform  =  "Translate (-60, 52)"  />   >   > 

    Примітка: Цей код виконується однаково в Mozilla Firefox 2.0.0.11 і в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

    Ще один приклад - прямокутник із закругленими кутами, що заповнює всю область відображення:

      version  =  "1.0"  encoding  =  "UTF-8"  standalone  =  "No"  ?>   "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   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%"  >   fill  =  "White"  x  =  "0"  y  =  "0"  width  =  "100%"  height  =  "100%"  />   fill  =  "Silver"  x  =  "0"  y  =  "0"  width  =  "100%"  height  =  "100%"  rx  =  "1em"  />   > 

    5. SVGZ

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

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

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

    браузер версія
    Internet Explorer 9 + [3]
    Mozilla Firefox 1.5 + [4]
    Netscape Navigator 9.0 +
    Google Chrome 3.0 +
    Safari 4.0 +
    Opera 8.0 +

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

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

    • Adobe Illustrator версії від 10.0 - векторний графічний редактор.
    • Adobe GoLive версії від CS2 - HTML-редактор.
    • CorelDRAW - векторний графічний редактор.
    • Inkscape - вільний векторний графічний пакет для роботи з SVG.
    • Microsoft Office Visio - здатний зберігати проекти у формат SVG. При цьому, файли SVG, створені в Microsoft Visio, некоректно відображаються при завантаженні на Wikimedia.
    • OpenOffice.org Draw - уміє експортувати графіку в файли формату SVG.
    • sK1 - вільний векторний графічний редактор.
    • Sketsa SVG Editor - редактор SVG-файлів.
    • MetaPost - мова програмування, що використовується для створення графічних ілюстрацій.
    • librsvg - бібліотека, використовувана в Mediawiki для роботи з SVG [5] [6].
    • Batik - Java бібліотека для генерації, отрисовки і різних маніпуляцій зображеннями в SVG форматі і заснований на цій бібліотеці SVG-браузер - Squiggle [7].
    • SVG Viewer Extension for Windows Explorer - розширення для провідника Windows, що дозволяє переглядати в ньому SVG файли у вигляді ескізів.

    Примітки

    1. Редагування SVG малюнка користувачем браузера - graphing.ru / d /
    2. SVG Authoring Guidelines: Don't include a DOCTYPE declaration - jwatt.org / svg / authoring / # doctype-declaration (Англ.)
    3. Windows Internet Explorer Platform Preview Release Notes - ie.microsoft.com / testdrive / info / ReleaseNotes / Default.html # WPGN (Англ.)
    4. Brockmeier, Joe. Review: Firefox 1.5 and Thunderbird 1.5 - www.linux.com/archive/feature/50209 (Англ.) , Linux.com (30 November 2005).
    5. Manual: Image Administration - MediaWiki - www.mediawiki.org/wiki/Manual:Image_Administration # SVG (Англ.)
    6. Однак, в стандартному дистрибутиві MediaWiki, за замовчуванням прописаний ImageMagick, що призводить до помилок в перетворенні SVG в PNG, наприклад, невірні кордону і відсутність прозорого фону в вихідному файлі PNG. Усувається за допомогою $ wgSVGConverter = 'rsvg'.
    7. Squiggle - xmlgraphics.apache.org / batik / tools / browser.html.

Цей текст може містити помилки.

Схожі роботи | скачати