Razvoj tekstualnih vektorskih formata i nastanak SVG-a

Na samom kraju 20. stoljeća World Wide Web Consortium (W3C) je osnovao SVG radnu grupu kako bi pronašao alternativu PostScript formatu zapise koji je mogao koristiti skalabilne fontove i objekte, no s velikim utjecajem na veličinu dokumenta. Sredinom 1998. godine Adobe, IBM, Netscape i Sun Microsystems su predložili PGML (Precision Graphics Markup Language), a Hewlett Pacard, Macromedia, Microsoft i Visio su predložili VML (Vector Markup Language). SVG radna grupa je u nekoliko mjeseci napravila prvi predložak SVG formata uzimajući u obzir oba predloška. Odlučeno je da će novi format koristiti XML kao zapis i da će biti optimiziran za Web.

SVG dokument

Svaki SVG dokument je istovremeno i XML dokument. Zato mora poštovati neke XML standarde kao što su strukturiranost (well-formedness) i valjanost (validity) i uz to zadana pravila propisana SVG standardom. XML je kroz godine korištenja pokazao svoje vrline i mane.

Neke od vrlina:

  • Čitljiv je ljudima.
  • Podržava Unicode čime se može zapisati skoro svaka informacija u svim ljudskim jezicima.
  • Može prikazati učestale računalne strukture: zapise, liste i stabla.
  • Format opisuje samog sebe.
  • Ima strogu sintaksu čime je olakšano analiziranje podataka.
  • Baziran je na međunarodnim standardima.
  • Neovisan je o platformi.

Neke od mana:

  • XML sintaksa je redundantna ili vrlo velika u usporedbi s binarnim formatima koji prikazuju slične podatke.
  • Postoje manje redundantni formati koji su čitljivi ljudima.
  • Hijerarhijska struktura nije pogodna za sve strukture podataka.
  • Razlika između sadržaja elemenata i atributa nekad nije očita što otežava dizajn podatkovnih struktura.

SVG podržava sljedeći skup osnovnih oblika: pravokutnik, krug, elipsa, linija (niz linija) i poligon. Svi osnovni oblici se mogu dobiti korištenjem krivulja, no zbog jednostavnosti i intuitivnosti atributa tih oblika su osnovni oblici često korišteni u jednostavnijim grafikama. Krivulje su vrlo vjerojatno najvažniji oblik u SVG formatu, a svakako najsvestranije. One rade na principu trenutne točke. Početna točka krivulje je na poziciji (0,0) i do svake sljedeće zadane točke se povlači i iscrtava dio krivulje. Taj dio ovisi o zadanim parametrima krivulje i njenom putu.

SVG platno opisuje prostor gdje se iscrtava sadržaj. To platno je beskonačno u veličini u svim dimenzijama, no iscrtavanje se ipak odvija u nekom pravokutnom prostoru koji se naziva prozor. Taj prozor može biti implicitno određen veličinom oblika ili može biti ekspilictno zadan u prvom <svg> elementu ili u vanjskom dokumentu koji sadrži cijeli SVG dokument.

Prilikom inicijalizacije prozora koordinatni sustav prozora i korisnički koordinatni sustav su jednaki. Ishodište oba sustava je u gornjem lijevom uglu prozora, a vrijednost koordinate se pozitivno povećava prema desno i prema dolje. Novi koordinatni sustav se može inicijalizirati korištenjem novog <svg> elementa koji u sebi može sadržavati informacije o novom položaju. Svi elementi unutar tog <svg> elementa će računati poziciju prema njemu, a ne prema osnovnom koordinatnom sustavu prozora. Korisnički koordinatni sustav se mijenja nakon prve transformacije elementa. Na svaki element se može primjeniti više transformacija i to onim redom kako su ugniježđene. Podržane transformacije su: translacija, rotacija, skaliranje – promjena mjerila i smik – uzdužna transformacija. Kompozicija transformacija je zapravo preslikavanje korisničkih koordinata elementa u koordinate SVG prozora.


<?xml version="1.0" standalone="yes"?> 
<!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"
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <rect x="30" y="30" width="400" height="200"
        fill="red" stroke="green" stroke-width="10" />
    <circle cx="360" cy="200" r="100" opacity="0.5"
        fill="lightskyblue" stroke="blue" stroke-width="10" />
</svg> 

Vrh stranice

Animiranje SVG-a

Svi statički elementi u SVG-u imaju mogućnost animacije. Dva su načina animacije podržani specifikacijom. Jedan od njih je deklarativni način pomoću SMIL-a.

SMIL (Synchronized Multimedia Integration Language) je jezik baziran na XML-u kojim se integrira i upravlja multimedijalnim sadržajima kao što su video, audio, tekst i grafika na Webu. Neki od najvažnijih mogućnosti SMIL-a su specifikacija rasporeda elemenata i sinkronizacija, prilagodba protoku informacija, rezoluciji ekrana i dubini boje. No iako SMIL postoji već 10 godina, njegova upotreba je vrlo rijetka i zapravo ne postoji neka veća ili vrlo raširena aplikacija ili tehnologija koja ga koristi. SMIL je imao malog doticaja s multimedijalnim porukama u mobilnoj telefoniji (MMS) i nedavno s HD DVD-om, no kako je Toshiba početkom 2008. godine objavila da prestaje s proizvodnjom i podrškom tog formata u korist Blu-raya pitanje je kako će se SMIL razvijati.

Zbog slabe podrške SMIL-a u web preglednicima razvojni se inženjeri okreću imperativnoj animaciji pomoću ECMAScripta. ECMAScript je interpretirani jezik koji je najčešće znan kao JavaScript (dalje u tekstu će se koristiti ovo ime) ili Jscript po svojim najpoznatijim dijalektima. JavaScript je stekao ogromnu popularnost u vrlo kratko vrijeme i sada je dominatni jezik za skriptiranje klijentske strane na Webu. Podržan je od svih poznatih web preglednika, a odnedavno se mogu naći i web preglednici na mobilnim uređajima koji ga podržavaju. Upravo su standardiziranost i raširenost JavaScripta doprinijeli korištenju istog za animiranje, interaktivnost ili bilo kakvu manipulaciju SVG-a.

Da bi JavaScript mogao dinamički mijenjati neki sadržaj on mora imati neku predodžbu o njegovom izgledu. Dugo vremena su web preglednici prezentirali HTML svatko na svoj način i zato se JavaScript morao prepisivati za svaki preglednik. Da bi se to sučelje standardiziralo, stvoren je DOM. DOM (Document Object Model) je objektni model neovisan o platformi i jeziku za prikaz HTML-a, XML-a i sličnih formata. Ti formati su hijerarhijski i mogu se opisati stablom. Web preglednici nisu dužni prikazivati HTML pomoću DOM-a, no u želji za kompatibilnošću većina najpoznatijih preglednika se većim dijelom ili potpuno oslanja na DOM.

Vrh stranice