SVG

SVG (Scalable Vector Graphics – „мащабируема векторна графика“) е маркиращ език, базиран на XML, за описване на двумерна векторна графика с възможност за включване и на растерни изображения, създаден от W3C. С термина се обозначава и множеството от спецификации, дефиниращи езика (SVG Full, SVG Tiny). Последната версия на пълната спецификация, респективно на пълния език е SVG 1.1 (за повече яснота обозначаван още като SVG Full 1.1).

Scalable Vector Graphics
Информация
Тип MIME	image/svg+xml
Тип на формата	векторна графика
Разширение от	XML
Първо издание	4 септември 2001 г.
Стандарт	W3C SVG
Scalable Vector Graphics в Общомедия

Освен пълната спецификация, е създадена и опростената SVG Tiny. Тя представлява подмножество на пълната и е предназначена за устройства с ограничени възможности, като мобилни устройства, вградени системи и др.

Файловете със SVG графика обикновено имат разширение *.svg а техният MIME тип е image/svg+xml.

Възможности

Един SVG файл може да съдържа векторна графика, растерна графика и текст. В SVG 1.1 възможностите на езика са групирани в 14 раздела:

• Пътеки – могат да се създават прави линии, многосегментни линии, криви на Безие.
• Основни форми – включва правоъгълници, окръжности, елипси, линии, многосегментни линии, полигони. Всички те могат да бъдат създадени и чрез пътеки, но готовите форми са по-лесни за използване.
• Текст – използва се Уникод. Върху символите могат да бъдат прилагани ефекти. Текстът може да бъде двупосочен, вертикален и разположен по протежение на крива.
• Оцветяване – SVG формите могат да бъдат запълвани и очертавани с цвят. Запълването може да бъде и с градиент или шарка, а също се задава и степента му на прозрачност. Очертанията от пътеки, линии, полигони имат и свойството наконечник (marker), който представлява графичен обект, поставян в краищата на линии или по ъглите на сложни очертания – най-често използван за създаване на стрелки. Може да се прилага и разнообразие от пунктировки, задавани чрез дължини на отделните съставящи ги чертици.
• Цвят – задава се чрез своите RGB (червено, зелено, синьо) компоненти.
• Градиенти и шарки – градиентите са линейни и радиални и могат да включват неопределен брой цветове. Шарките се дефинират чрез растерни или векторни обекти, които се повтарят по x, y или и двете координати.
• Изрезки, маски и съчетаване – очертания на пътеки, текст и основни форми могат да се използват за дефиниране на изрезки и маски. Обектите, попадащи в очертанията на изрезките се изобразяват, а тези извън тях – не. Маските задават и прозрачността на обектите, попадащи в тях – прозрачността на всеки пиксел от обекта, използван като маска, дефинира прозрачността на обектите, към които е приложена маската. Самите обекти, използвани като маски или изрезки, не се изобразяват.
• Филтърни ефекти – разнообразни графични трансформации, които могат да се прилагат върху графичните обекти.
• Интерактивност – в този раздел на спецификацията се дефинират отделните събития (движение на мишката, натискане на клавиш и др.), в отговор на които могат да се задействат анимации или скриптове.
• Свързаност – за описание на отношенията между отделни документи се използва езика XLink, това включва и възможност за създаване на еднопосочни препратки по подобие на HTML.
• Скриптиране – всеки аспект на SVG документа е достъпен за скриптиране чрез документен обектен модел (DOM). По подразбиране се използва ECMAScript, а скриптът се изпълнява в отговор на възникнало събитие, както е дефинирано в раздел Интерактивност на спецификацията.
• Анимиране – с помощта на анимиращи елементи се описват промени на графичните елементи във времето. Алтернативно анимация може да се постигне и посредством скриптиране.
• Шрифтове – могат да се използват външни файлове с шрифтове по подобие на HTML. Има възможност и за вграждане на глифите на шрифта в документа чрез SVG шрифтове.
• Метаданни – има възможност за добавяне на информация, описваща самия документ, като автор, описание и др.

Примери

Правоъгълник

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      width="236" height="120" viewBox="0 0 236 120">
  <rect x="14" y="23" width="200" height="50" fill="#55FF55"
      stroke="black" stroke-width="1" />
</svg>

Изображението, описано от този SVG документ, изглежда така:

Горният пример използва основната форма правоъгълник, описана с етикета <rect />. Чрез атрибутите x и y се задават координатите на горния му ляв ъгъл спрямо координатното начало. В случая координатното начало е горния ляв ъгъл на изображението, но може да бъде и друго. width и height атрибутите задават съответно ширина и височина на правоъгълника, fill – цвят за запълване, а stroke и stroke-width – съответно цвят и дебелина на очертанието.

Външни препратки

• Информационна страница за SVG на сайта на Уеб Консорциума