Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Основни SVG

Векторни графики с мащабиране (SVG) в HTML5

Маркиращият език HTML5 поддържа действащи векторни графики с мащаберане SVG (Scalable Vector Graphics). SVG се използва за определяне на векторни графики в уеб приложенията с XML формат. Графиките не губят от качеството си когато се увеличават или намаляват. Всеки елемент и атрибут на SVG файловете могат да бъдат анимирани. SVG се препоръчва от W3C.

Предимствата на SVG пред други формати като JPEG и GIF са следните:
  • Могат да се създават и редактират с произволен текстов редактор, като по-удобния начин за създаване на SVG изображения е използването на графичен редактор като Inkscape;
  • Могат да бъдат търсени, индексирани, скриптирани и компресирани;
  • Могат да се мащабират без проблем за качеството;
  • Могат да се отпечатват с високо качество за произволна резолюция;
  • Могат да се увеличават и намаляват без деградация.

Действащи векторни графики се поддържат от браузърите Explorer 9, Firefox, Opera, Chrome и Safari.

Пример за SVG

Файловете с SVG са с разширение .svg. По-долу е даден прост пример за изчертаване на SVG. В първият ред на кода е включено деклариране на XML. Атрибутът standalone определя дали SVG файла е самостоятелен или е свързан с външен файл. Опцията standalone="no" означава, че SVG документа е свързан с външен файл, в случая DTD (Document Type Definition), който определя изграждащите блокове за XML документа. Вторият и третият ред се отнасят за SVG DTD. Този DTD се намира в w3.org и съдържа всички възможни SVG елементи.

<?xml version="1.0" standalone="no"?>
<!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">
    <circle cx="120" cy="80" r="65" stroke="#FF0000"
    stroke-width="5" fill="coral" />
</svg>

Кодът на SVG започва с елемента <svg>. Това е основният елемент. Атрибутът xmlns дефинира SVG пространството, а атрибута version определя версията на SVG, която да се използва. Елементът <circle> се използва за изчертаване на окръжност, където cx и cy определят координатите на центъра x и y. Когато тези два атрибута не се зададат, центъра на окръжноста се разполага в координати 0,0. С атрибутът r се определя радиуса на окръжността. С атрибутите stroke и stroke-width се задава цвета и дебелината на контура на окръжността. Цветът на окръжността се задава от атрибута fill. Както се вижда от примера, цветовете се задават в шестнадесетичен код или наименование. Основният елемент и документа се затварят с </svg>.

SVG фигури

Векторните графики имат някои готови фигури, които могат да се използват директно:

  • Правоъгълник <rect>
  • Окръжност <circle>
  • Елипса <ellipse>
  • Права линия <line>
  • Начупена линия <polyline>
  • Многоъгълник <polygon>
  • Траектория <path>

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

Атрибутите x и y определят положението на правоъгълника в пиксели, съответно от лявото и от горното поле. Атрибутите rx и ry закръгляват в пиксели ъглите на правоъгълника. Свойствата (CSS) fill-opacity и stroke-opacity определят прозрачността на елементите в диапазона 0-1.

<!DOCTYPE html> 
<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <rect x="50" y="10" rx="20" ry="20" width="100" height="130"
    style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,255);
    fill-opacity:0.8;stroke-opacity:0.5;" /> 
</svg> 
 
</body> 
</html> 

Окръжност

Атрибутите cx и cy определят координатите на центъра x и y. Когато тези два атрибута не се зададат, центъра на окръжноста се разполага в координати 0,0. С атрибутът r се определя радиуса на окръжността. С атрибутите stroke и stroke-width се задава цвета и дебелината на контура на окръжността. Цветът на окръжността се задава от атрибута fill. Както се вижда от примера, цветовете се задават в шестнадесетичен код или наименование.

<?xml version="1.0" standalone="no"?>
<!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">
    <circle cx="120" cy="80" r="65" stroke="#FF0000"
    stroke-width="5" fill="coral" />
</svg>

Елипса

Елипсата е частен случай на окръжността с тази разлика, че има два различни радиуса x и y. Атрибути: cx и cy са координати в пиксели, които определят центъра на елипсата; rx и rx определят в пиксели хоризонталния и вертикалния радиус на елипсата.

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="100" cy="60" rx="80" ry="40" 
    style="fill:coral;stroke:red;stroke-width:2" />
</svg>

</body>
</html>

Прави линии

За изчертаване на права линия се използва елемента <line>. Атрибути на елемента са началната точка x1, y1 и крайната точка x2, y2 на правата, съответно по осите x и y.

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="10" y1="20" x2="100" y2="140" 
style="stroke:coral;stroke-width:5" />
</svg>

</body>
</html>

За изчертаване на свързани прави линии се използва елементът <polyline>, като се започне с координатите на първата права линия и се продължи с крайните коорзинати на следващите прави. С други думи, края на всяка права линия се явявя като начало на следващата.

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    < polyline points="20,10 20,25 40,10 20,60 30,80 50,60" 
    style="fill:none;stroke:red;stroke-width:3" />
</svg>

</body>
</html>

Многоъгълник

Елементът <polygon> се използва за създаване на фигура, която има поне три страни. Многоъгълникът е съставен от прави линии, като последната затваря фигурата. Думата Polygon произлиза от гръцки, в която Poly означава много, а gon, означава ъгъл.

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="118,92 177,4 236,82 165,105" 
    style="fill:coral; stroke:red; stroke-width:2" />
</svg>

</body>
</html>

Траектории

Елементът <path> се използва за описание на траектории, като за тях се използват следните команди:

  • M(m) – придвижване до определена точка;
  • L(l) – на права линия до определена точка;
  • H(h) – хоризонтална права линия;
  • V(v) – на вертикална права линия;
  • Q(q) – квадратична крива на Безие
  • T(t) – гладка квадратична крива на Безие
  • C(c) – кубична крива на Безие;
  • S(s) – гладка кубична крива на Безие
  • A(a) – елипсовидна дъга
  • Z(z) – затваряне на траектория

Горните команди се изразяват и като главни и малки букви. Главните букви означават абсолютно позициониране, а малките относително.

Команда M(m) за придвижване до определена точка

Командата с наименование "moveto" M или m създава нова точка в определена позиция (x,y). Всяка отделна траектория трябва да започва с тази команда. Когато в командата moveto са включени повече от една двойка координати, те се възприемат като команда lineto.
Примерно записване на команда за придвижване до определена точка (x1, y1):

<path d="Mx1, y1 />

Команди L(l), H(h) и V(v) за изчертаване на прави линии

Различните команди "lineto" изчертават права линия от текущата точка до нова точка.
Командата L(l), известна под името lineto, изчертава права линия от текущата точка (x1,y1) до точка (x2,y2), която става новата текуща точка. Като параметри за командата се задават(x2 y2). Когато са зададени повече координатни двойки се изчертават свързани последователни прави линии.
Примерно записване на траектория за изчертаване на права линия от точка (x1, y1) до (x2,y2) :
<path d="Mx1, y1 x2,y2  stroke="black" stroke-width="2"   />

Командата H(h), известна под името horizontal lineto, изчертава прова линия от текущата точка (x1, y1) до (x2, y1). Като параметър за командата се задава х2. Новата текуща точка е (x2, y1).
Примерно записване на траектория за изчертаване на хоризонтална права линия от точка (x1, y1) до точка (x1,y2) :
<path d="Mx1, y1 x2  stroke="black" stroke-width="2"   />

Командата V(v), известна под името vertical lineto, изчертава прова линия от текущата точка (x1, y1) до (x1, y2). Като параметър за командата се задава у2. Новата текуща точка е (x1, y2).
Примерно записване на траектория за изчертаване на вертикална права линия от точка (x1, y1) до точка (x1,y2) :
<path d="Mx1, y1 y2  stroke="black" stroke-width="2"   />

Команди Q(q) и T(t) за изчертаване на квадратични криви на Безие

Командата Q(q), известна под името quadratic Bézier curveto, изчертава квадратична крива на Безие от текущата точка (x1, y1) до крайната точка (x2,y2) като използва за контролна точка (x1’, y1’). Като параметри за командата се задават (x1’y1’ x2y2).
Примерно записване на такава траектория може да се илюстрира със следния пример:
<path d="Mx1, y1 Qx1’y1’ x2y2"  stroke="red" stroke-width="3"  />
Командата T(t), известна под името smooth quadratic Bézier curveto, изчертава кубична крива на Безие от текущата точка (x1, y1) до крайната точка (x2,y2). Контролна точка се приема отражението на контролната точка от предишната команда относно текущата точка. Когато няма предишна команда или предишната команда не е Q, q, T или t се приема, че първата контролна точка съвпада с текущата точка. Като параметри за командата се задават (x2y2).

Команди C(c) и S(s) за изчертаване на кубични криви на Безие

Кубичните криви на Безие се определят от начална точка, крайна точка и две контролни точки
Командата C(c), известна под името curveto, изчертава кубична крива на Безие от текущата точка (x1, y1), като използва за контролна точка в началото на кривата (x1’, y1’) до крайната точка (x2,y2) с контролна точка (x2’,y2’) в края на кривата. Като параметри за командата се задават (x1’y1’ x2’y2’ x2y2).
Примерно записване на такава траектория може да се илюстрира със следния пример:
<path d="Mx1, y1 Cx1’y1’ x2’y2’ x2y2"  stroke="red" stroke-width="3"  />

Командата S(s), известна под името smooth curveto, изчертава кубична крива на Безие от текущата точка (x1, y1) до крайната точка (x2,y2). Първата контролна точка се приема отражението на втората контролна точка от предишната команда относно текущата точка. Когато няма предишна команда или предишната команда не е C, c, S или s се приема, че първата контролна точка съвпада с текущата точка. Точката (x2’,y2’) е втората контролна точка за края на кривата. Като параметри за командата се задават (x2’y2’ x2y2).
Примерно записване на такава траектория може да се илюстрира със следния пример:
<path d="Mx1, y1 Sx2’y2’ x2y2"  stroke="red" stroke-width="3"  />

За горните команди могат да се задават повече комплекти от координати за изчертаване на свързани последователни кубични криви на Безие. В дясно са показани примери за изчертаване на кубични криви на Безие.

Примери на команда за изчертаване на кубична крива на Безие Показани са примери за командите "C" и"S", заедно с анотация за контролните и крайни точки M100,200 C100,100 400,100 400,200 M100,500 C25,400 475,400 400,500 M100,800 C175,700 325,700 400,800 M600,200 C675,100 975,100 900,200 M600,500 C600,350 900,650 900,500 M600,800 C625,700 725,700 750,800 S875,900 900,800

Елиптични дъги

Елементът "a" се използва за за изчертаване на елиптична дъга от текущата точка x1,y1 до определена точка x2,y2. Тази команда започва със стойностите на радиусите по rx и по ry и завършва с координатите на крайната точка x2,y2. Между тези две стойности са зададени други три стойности, а именно завъртане на оста x (sx в обхвата от 0 до 360), флаг за широчина на дъгата (lf със стойности 0 или 1, валиден само при sx=0 или 360) и флага за посока за изчертаване на кривата (sf със стойности 0 или 1). Параметърът rx се използва за завъртане на елипсата, върху която е разположена дъгата. При завъртането се запазват началната и крайната точки на дъгата.
Командата за изчертаване на елиптична дъга би и зглеждала така:
<path d = "M x1 w1 a rx ry sx lf sf x2 y2"/>

По-долу е даден пример за изчертаване на svg елиптични дъги.
Началото и края на всички елиптични дъги са с еднакви координати. Отделните елептични дъги имат следните стойности:
  • Дъга с розов цвят - <path d = "M 150 300 a 100 50 0 1 1 250 50>
  • Дъга с кафяв цвят - <path d = "M 150 300 a 100 50 0 1 0 250 50>
  • Дъга с зелен цвят - <path d = "M 150 300 a 100 50 90 1 1 250 50>
  • Дъга с син цвят - <path d = "M 150 300 a 100 50 90 1 0 250 50>
  • Дъга с черен цвят - <path d = "M 150 300 a 100 50 135 1 1 250 50>
  • Дъга с червен цвят - <path d = "M 150 300 a 100 50 135 1 0 250 50>