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.