Скалабилна векторска графика

С Википедије, слободне енциклопедије
Пређи на навигацију Пређи на претрагу
Скалабилна векторска графика
SVG logo.svg
Екстензија фајла:.svg, .svgz
Развио:W3C
Прво појављивање:2001.
Тип формата:Вектор

Сразмјерна векторска графика (SVG, енгл. Scalable Vector Graphics) је XML језик за приказивање дводимензионалне векторске графике, било непомичне или анимиране. То је отворени стандард створен од стране Конзорцијума за Веб, који је одговоран, исто тако, за познате стандарде као HTML и XHTML.

Преглед[уреди | уреди извор]

SVG се развија од 1999. од групе компанија укључених у удружење W3C, послије прегледа стандарда предложених од компанија Адоби Системс (Precision Graphics Markup Language - (PGML)) и Мајкрософт (Vector Markup Language - VML) развијеног од RTF – предатих у W3C 1998. За формулацију SVG су кориштена искуства оба формата.

SVG дозвољава 3 типа графичких објеката:

Графички објекти могу бити постављени у групе и трансформирани у претходно рендероване објекте. Нису директно подржани Z-индикатори (z-indices) [1], који раздвајају поредак цртања од поретка докумената за преклапајуће објекте. Текст може да буде у било којем XML именском простору (namespace) што олакшава претрагу.

Од 2001. спецификација је на верзији 1.1, а на верзији 1.2 се ради.

SVG Mobile препорука је укључила два једноставнија профила SVG 1.1, SVG Basic and SVG Tiny, намијењене за уређаје са смањеним могућностима.

SVG Tiny је касније постао посебна препорука са тренутном верзијом 1.2 и база за предложени SVG 1.2.

Постоји и SVG Print спецификација на којој се још ради и која садржи упуте за штампање за SVG 1.2 и SVG Tiny 1.2 документе.

Платно (канвас) елемент у HTML5 даје помало другачији приступ приказа динамичке графике у HTML. Нажалост, он не дозвољава статичко рендеровање и нацртани елементи нису идентификовани као код DOM.

Штампање[уреди | уреди извор]

Иако је примарно створен као графички језик, спецификација има и основне способности као језик за опис страница (page description language (PDL)) као и ПДФ формат. Има могућности кориштења сложене графике, а компатибилан је и са CSS.

Анимација и скриптовање[уреди | уреди извор]

SVG цртежи могу бити динамички и интерактивни. Модификације у времену се могу описати у SMIL, или програмиране у неком језику као што је Јаваскрипт. W3C експлицитно препоручује SMIL као стандард за анимацију у SVG.[2] Било којем графичком SVG објекту се може придружити програмски код, који се извршава рецимо при клику или прелазом показивача рачунарског миша преко објекта.

Компресија[уреди | уреди извор]

Пошто текстуалне датотеке обично садрже доста дијелова текста који се понављају, посебно су подесне за компресију програмима као што су на примјер zip, gzip и arj.

Примјери[уреди | уреди извор]

SVG је XML језик, те је SVG датотека обична текстуална датотека, која се може уређивати у било којем уређивачу текста.

Квадрат или правоугаоник[уреди | уреди извор]

Како изгледа приказан сљедећи 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"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

Прво су дате димензије читаве слике. Затим су дате координате горњег лијевог угла квадрата. Затим слиједи ширина, висина, радијус заобљености угла квадрата, боја квадрата, боја ивица и ширина ивица квадрата.

Линија[уреди | уреди извор]

Код за приказивање линије:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" >
     <line x1="10" y1="10" x2="50" y2="100" stroke="red" stroke-width="2"/>
</svg>

Послије димензија слике, слиједе координате почетка линије, затим координате краја линије, боја, ширина линије.

Круг[уреди | уреди извор]

Код за приказивање испуњеног круга:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" >
     <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

Послије димензија слике, слиједе координате центра круга, радијус круга и боја којом је испуњен.

Елипса[уреди | уреди извор]

Код за приказивање неиспуњене елипсе:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" >
     <ellipse cx="50" cy="50" rx="30" ry="12" fill="none" stroke="red" stroke-width="3"/>
</svg>

Текст[уреди | уреди извор]

Код за приказивање текста, који може бити уникодни:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" >
     <text x="80%" y="80%" font-family="sans-serif">Поздрав корисницима википедије!</text>
</svg>

Комплексне фигуре[уреди | уреди извор]

Код за приказивање фигуре која се састоји од закривљених секција:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" >
     <path id="Inv_V_MCcZ" style="fill:#00DD00;stroke:none;" d=" M 25 360 C 60 360 80 275 75 260 c -5 15 15 100 50 100 Z "/>
</svg>

Извори[уреди | уреди извор]

  1. ^ „SVG(W3C) § 4.2-Drawing Order”. World Wide Web Consortium. 15. 11. 2002. Приступљено 19. 10. 2009. 
  2. ^ Paul, Festa (9. 1. 2003). „W3C releases scripting standard, caveat”. CNet. Приступљено 24. 2. 2010. 

Спољашње везе[уреди | уреди извор]