SVG

от Уикипедия, свободната енциклопедия
Направо към: навигация, търсене

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

Освен пълната спецификация, създадени са и съкратени такава, като подмножества на пълната, предназначени предимно за мобилни устройства. Това са SVG Tiny спецификацията подходяща за мобилни телефони и SVG Basic — за цифрови помощници (PDA). Тези две спецификации са обединени под общото название SVG Mobile.

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

Възможности[редактиране | edit source]

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

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

Примери[редактиране | edit source]

Правоъгълник[редактиране | edit source]

<?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 документ изглежда така:

Svg example1.png

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

Външни препратки[редактиране | edit source]