Programiranje - SVG - 2. Jednostavni elementi - 2.1 Pravokutnici (rect)

Ovo je nastavak posta 1. Uvod.

Nakon što smo u uvodu pokazali neke osnovne mogućnosti, pozabavićemo se u ovom dijelu s mogućom sintaksom elementa već spomenutom u uvodu. Riječ je o elementu rect, kojim možemo crtati pravokutnike (eng. rectangle). 


1. jednostavan primjer s najosnovnijim parametrima ("x", "y", "width", "height"):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>  
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" /> 

</svg>

Bitna sintaksa u gornjem primjeru je istaknuta crvenom bojom. 
Lijevo se vidi izgled rezultat - da bi se lakše snašli, cijela površina slike je uokvirena - gornji lijevi kut okvira ima koordinatu (0;0), a mjereno odande su varijablama "x" i "y" dane koordinate gornjeg lijevog kuta toga pravokutnika (10;10). Širina i visina pravokutnika je dana varijablama "width" i "height". Kako nije dana nikakva informacija o boji kojom će se ispuniti pravokutnik, uzeta je standardna vrijednost za tu varijablu, a to je crna boja.

2. uvođenje parametra "fill" i definiranje boja

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="#ff0000" />

</svg>

 Parametar "fill" definira boju kojom je ispunjen pravokutnik - u našem primjeru je to dano u RGB-formatu - RGB format ima uvijek kao prvi znak "#" za heksadecimalni format, a nakon toga dolazi 6 heksadecimalnih brojeva (brojke 0 - 9 i slova "a" do "f"). Po dva slova stoje za svaku od R, G ili B komponenti jedne boje, pri čemu je "R" red=crveno, "G" green=zeleno, "B" blue=plavo. Ova tri heksimalna broja imaju u decimalnom sistemu vrijednost između 0 i 255, čime se definira intenzitet pojedine komponente. Neke vrijednost RGB kombinacija:

000000 = crna
FF0000 = crvena
00FF00 = zelena
0000FF = plava
FFFF00 = žuta
FF00FF = ljubičasta
00FFFF = turkizna
FFFFFF = bijela




Neke boje su već definirane, pa se mogu dati i bez prefiksa "#" - ukoliko definiramo:

fill="white"

naš pravokutnik će biti ispunjen bijelom bojom. Moguće su i neke druge vrijednosti, ali jednu punu listu definiranih boja moraćete potražiti negdje drugdje. Ukoliko se definira:

fill="none"

pravokutnik neće biti nacrtan (tj. biće providan). Oko njega se još uvijek može, kako ćemo kasnije vidjeti, nacrtati okvir, kako bi ga se ocrtalo.


3. Parametri "stroke" i "stroke-width"

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="red" stroke="blue" stroke-width="4" /> 

</svg>

Ova dva parametra stvaraju okvir oko pravokutnika. Parametar "stroke" označava boju okvira, a "stroke-width" njegovu debljinu u pikselima. Sredina okvira je na rubu prethodno definiranog pravokutnika - u našem slučaju, ako je "stroke-width=4", to znači da su 2 piksela izvan ruba pravokutnika, a 2 piksela ulazi u pravokutnik.


4.Uvođenje parametara "rx" i "ry"

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="red" stroke="blue" stroke-width="4" rx="30" ry="10" /> 

</svg>

S parametrima "rx" i "ry" možemo napraviti zaobljene rubove na pravokutnicima. Ukoliko su definirana oba parametra i imaju različite vrijednosti, zaobljenje će imati oblik dijela elipse; ukoliko je definiran samo jedan od ta dva parametra, zaobljenje će biti kružno.

Programiranje - SVG - 1. Uvod

Kako to obično (barem kod mene) biva, radeći jednu stvar (postovi u vezi CMOS tehnologije), susreo sam se s jednom sasvim drugom temom, koja mi se isto tako čini interesantna i fascinantna.

Gledajući, naime, sve one grafike, koje sam pokupio s wikipedije i koristio ih u tim postovima, spazio sam da se radi o vektorskim grafikama u SVG formatu (SVG je kratica za "scalable vector graphic"). To ima dosta prednosti - može ih se prikazivati u različitim veličinama, a da ne gube na kvaliteti, kao što je to slučaj sa bitmap-grafikama. Osim toga, veličina im je zanemarivo mala, a moguće je raditi i animacije i pretraživati po njima, zbog čega su idealne za npr. mape. Isto tako, njihovi detalji se mogu uvećavati, a da kvalitet uvijek ostane optimalan.

U ovom prvom dijelu pozabavićemo se jednim jednostavnim elementom u SVG-sintaksi, pravokutnikom. Pogledajmo prvi primjer:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" style="fill:red;" />
  <svg x="10" y="10" width="100" height="100">
    <rect x="0" y="0" width="100" height="100" style="fill:blue;" />
  </svg>
</svg>

Dio istaknut crvenom bojom u kodu je standardna sintaksa, koja je stalna za svaku SVG-datoteku. Njega se jednostavno prekopira u svakoj slici u zaglavlje i gotovo. Za sav taj kod postoji i neko objašnjenje, ali na tome se sad ne bih zadržavao.

U preostalom kodu bitno je uočiti hijerarhijsku strukturu - kôd slike počinje elementom <svg>, nakon čega je definirana njena širina i visina (elementi width i height). Tu je i dodatni kôd koji je, kao i onaj na početku, fiksan i neophodan za sintaksu. Isto tako, ovoj hijerarhiji pripada i zaključni element </svg> na kraju datoteke, zbog čega je, u cilju razumjevanja, označen istom (zelenom) bojom.

Dva pravokutnika su nacrtana pomoću naredbe <rect>, pri čemu je dana početna točka obaju četverokuta (0;0) i (10;10), te njihova širina i visina. Osim toga, dana je i boja kojom će svaki od njih biti ispunjen ("red" i "blue"). Kod ispunjavanja slike bitno je imati na umu da se slika crta tako da se prvo slika prvi element, pa nakon toga u redu kojim su elementi kodirani. Zbog toga je plavi četverokut nacrtan preko onog crvenog.

Što se tiče praktičnog vježbanja sa SVG-grafikama, ono je jednostavno - grafike možete pisati u bilo kome tekst-editoru, s kojim možete spremiti tekst u neformatiranom tekstu. Tu datoteku se zatim može učitati u GIMP (najpoznatiji freeware-program za obradu slika), a istu sliku se zatim može spremiti u nekom drugom formatu (za slike ovdje je korišten GIF format).

Nastavak slijedi u prvom dijelu 2. poglavlja.