SVG (Scalable Vector Graphics – „мащабируема векторна графика“) е маркиращ език, базиран на XML, за описване на двумерна векторна графика с възможност за включване и на растерни изображения, създаден от W3C.[1] С термина се обозначава и множеството от спецификации, дефиниращи езика (SVG Full, SVG Tiny). Последната версия на пълната спецификация, респективно на пълния език е SVG 1.1 (за повече яснота обозначаван още като SVG Full 1.1).
Освен пълната спецификация, е създадена и опростената SVG Tiny. Тя представлява подмножество на пълната и е предназначена за устройства с ограничени възможности, като мобилни устройства, вградени системи и др.[2]
Файловете със 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 – съответно цвят и дебелина на очертанието.
