Napredni Web Dizajn Seminar Nikola - Ozanic VER2

TEHNIČKO VELEUČILIŠTE U ZAGREBU
POLITEHNIČKI SPECIJALISTIČKI DIPLOMSKI STUDIJ

Specijalizacija informatika
SVG
Seminarski rad iz kolegija Napredni Web Dizajn
Nikola Ožanić
Sadržaj
1 Uvod................................................................................................................................... 3
2 Nastanak i razvoj SVG-a ................................................................................................... 4
2.1 Verzije kroz povijest .................................................................................................. 4
3 SVG – struktura i osnovni elementi ................................................................................... 5
3.1 SVG koordinatni sustav ............................................................................................. 5
3.2 Korijenski element ..................................................................................................... 6
3.3 Osnovni oblici ............................................................................................................ 6
LINIJA ............................................................................................................................... 6
VIŠESTRUKA LINIJA ..................................................................................................... 6
POLIGON .......................................................................................................................... 7
PRAVOKUTNIK............................................................................................................... 7
KRUG ................................................................................................................................ 7
ELIPSA .............................................................................................................................. 7
PUTANJA .......................................................................................................................... 8
3.4 Ispune i linije.............................................................................................................. 9
Atributi linije...................................................................................................................... 9
Ispuna ............................................................................................................................... 10
3.5 Tekst unutar SVG-a ................................................................................................. 10
3.6 Element <g> ............................................................................................................. 10
3.7 Elementi <defs> i <use> .......................................................................................... 11

3.8 Transformacije ......................................................................................................... 11
3.9 Uzorci....................................................................................................................... 13
3.10 Gradijenti ................................................................................................................. 14
3.11 Filteri ........................................................................................................................ 14
3.12 Maske i isječci.......................................................................................................... 16
Isječci ............................................................................................................................... 16
Maske ............................................................................................................................... 16
3.13 Stilovi ....................................................................................................................... 16
3.14 Animacije ................................................................................................................. 17
4 Praktični dio ..................................................................................................................... 18
4.1 Ilustracija 1 „trokuti2.svg” ....................................................................................... 18
4.2 Ilustracija 2 „linije2.svg” ......................................................................................... 23
4.3 Ilustracija 3 „skoljke.svg” ........................................................................................ 27
5 Zaključak.......................................................................................................................... 32
6 Kratice .............................................................................................................................. 33
7 Popis slika ........................................................................................................................ 34
8 Popis tablica ..................................................................................................................... 34
9 Popis primjera .................................................................................................................. 35
10 Literatura ...................................................................................................................... 36
2
1 Uvod
Prvi web preglednici napravljeni su s ciljem pregledavanja tekstualnog sadržaja, prvi <img>
element u upotrebu je ušao 1994. godine, a jedini podržani format za slikovne datoteke bio je
.gif. Nakon .gif datoteka web preglednici postepeno dobivaju mogućnost prikaza .jpg te potom
i .png datoteka. Ti prvi preglednici podržavali su samo prikaz rasterske grafike, koja ima svoja
ograničenja:
• slikovne datoteke zauzimaju puno memorije i dugo su se učitavale zbog slabe

propusnosti kanala u to vrijeme
• rasterska grafika ima fiksnu rezoluciju i dolazi do problema prilikom prilagodbe na
ekrane različitih formata
• u početku je bilo teško napraviti hipervezu na drugu lokaciju koja ovisi o tome na koji
dio slike smo kliknuli mišem
• onemogućena interakcija i animacija [1] [2]
Prije pojave XML-a (EXtensible Markup Language) vektorska grafika na webu bila je
dostupna u formatima kao što su CGM (Computer Graphics Metafile) ili Flash. Oni su pak
imali svoje mane, zapisi nisu bili čitljivi ljudima i za uređivanje datoteka koristili su se
specijalni programi koji nisu bili besplatni. Također za njihovo prikazivanje u web
preglednicima moraju se instalirati posebni dodaci. [1] Vremenom se uvidjelo da Flash format
ima puno sigurnosnih propusta. Također, zbog toga što je bio instaliran na velikom broju
računala, bio je česta meta hakerskih napada pa se naposlijetku i prestao koristiti. [3]
1997. godine postalo je jasno da će XML napraviti veliku razliku u načinu na koji će se razvijati
Web. Prvo izdanje XML-a postalo je preporuka W3C-a (World Wide Web Consortium) u
veljači 1998. godine. [1] [2] Pojavom XML-a otvorio se put za nastajanje SVG-a koji je baziran
na XML jeziku što dizajneru omogućuje stvaranje vektorskih oblika iz oznaka čitljivih ljudima,
praktički bez potrebe za instalacijom nekog posebnog softvera. [4] [5]
3
2 Nastanak i razvoj SVG-a
Radna skupina za razvoj novog jezika formirana je na temelju zahtjeva koji su podneseni W3C-
u da se kreira XML bazirani označni jezik za opisivanje vektorske grafike. Predložena su četiri
standarda: Web Schematics, PGML (Precision Graphics Markup Language), VML (Vector
Markup Language) te DrawML. Od četiri predložena standarda razvijen je jedinstven jezik za
prikaz vektorske grafike na webu nazvan SVG (Scalable Vector Graphics). [1] To je jezik koji
omogućuje stvaranje dvodimenzionalnih vektorskih elemenata, koji su jednostavni
matematički prikazi grafičkih objekata, beskonačno su skalabilni i mogu se transformirati
unutar granica 2D koordinatnog sustava. SVG je jedinstven po tome što je otvorenog tipa,
standard mu je definiran od strane W3C. Zbog toga je kompatibilan s drugim otvorenim
standardnim jezicima kao što su JavaScript, CSS i HTML koji su također definirani od strane
W3C-a.
SVG se stalno unaprjeđuje te je uvelike sazrio od trenutka svog nastanka. Velika privlačnost
SVG-a je u tome što ga je, poput HTML-a, lako čitati i uređivati, a istovremeno dopušta složenu
interaktivnost i animiranje putem CSS-a i SMIL-a, koji su isto standardi W3C-a. Svi glavni
preglednici sada izvorno podržavaju većinu SVG specifikacija, tako da se više ne moraju
instalirati nikakvi posebni dodaci. Sve ove mogućnosti dopuštaju velik stupanj kreativnosti, uz
složenu interaktivnost koja se miješa s animacijom i podacima u stvarnom vremenu, a sve u
svrhu razvoja novih web aplikacija poboljšanih SVG-om. [6]
2.1 Verzije kroz povijest
Prvi javni nacrt SVG-a objavio je W3C u veljači 1999. Do kraja lipnja 2000. pojavilo se 9
naknadnih radnih nacrta. SVG 1.0 objavljen je kao W3C preporuka u rujnu 2001. Od 2001.
SVG specifikacija je ažurirana na verziju 1.1. SVG 1.1 postao je W3C preporuka 14. siječnja
2003. [7]
Godine 2001. SVG je preinačen kako bi bio podržan na mobilnim uređajima. Preporuka za
Mobilni SVG uvela je dva pojednostavljena profila SVG 1.1, SVG Basic i SVG Tiny za uređaje
sa smanjenim računalnim mogućnostima te smanjenim mogućnostima prikaza grafike. SVG
Tiny i SVG Basic (mobilni SVG profili) postali su W3C preporuke 14. siječnja 2003.
Poboljšana verzija SVG Tiny, nazvana SVG Tiny 1.2, postala je W3C preporuka 22. prosinca
2008. [7]
4
SVG 2 je trenutačno u fazi razvoja, a cilj je poboljšati upotrebljivost i preciznosti jezika. SVG
radna grupa radi na paketu testova za SVG 2 te na temelju provedenih testiranja očekuje izradu
izvješća o implementaciji. [8]
3 SVG – struktura i osnovni elementi

Pošto je SVG baziran na XML-u, pravila koja vrijede pri pisanju XML-a vrijede i za SVG.
Ovo su neka osnovna pravila kojih se treba pridržavati:
• Svi SVG dokumenti moraju imati korijenski element.

• Svi SVG elementi moraju imati početnu i završnu oznaku.
• Oblik početne i završne oznake mora biti identičan. Ako početna oznaka sadrži velika
slova, velika slova mora sadržavati i završna oznaka.
• Svi SVG elementi moraju biti pravilno ugniježđeni.
• Vrijednosti atributa moraju uvijek biti navedeni u navodnicima. [9] [10]
3.1 SVG koordinatni sustav
50 100 150
Ishodište koordinatnog sustava unutar
X(px) kojega je opisana SVG grafika nalazi se u
gornjem desnom uglu. Koordinate
ishodišta su (0,0). Povećanjem parametra
X krećemo se u desno, a povećanjem
50
parametra Y krećemo se prema dolje.

100
150
Y(px)
Slika 1 - SVG koordinatni sustav
5
3.2 Korijenski element
Korijenski element svake SVG datoteke je <SVG> element i unutar njega moraju biti
ugniježđeni svi ostali elementi. Ukoliko želimo SVG datoteku prikazivati u pregledniku,
atributom xmlns u korijenskom elementu moramo definirati imenski prostor (eng. namespace).
Definiranjem imenskog prostora izbjegavamo to da u jednom dokumentu imamo dva ista
imena s različitim značenjem. [11] [12]
<svg xmlns=“http://www.w3.org/2000/svg“ width=“200” height=“200”>

<!—sav sadržaj SVG datoteke mora biti ugniježđen unutar korijenskog elementa-->
</svg>
Primjer 1 – korijenski <SVG> element
U primjeru 1. osim imenskog prostora, atributima width i height definirane su širina i visina
dokumenta. Pošto nije definirana nikakva mjerna jedinica podrazumijeva se da su visina i širina
izražene u pikselima (px). [13]
3.3 Osnovni oblici
LINIJA
U SVG-u ravnu liniju crtamo upotrebom elementa <line> atributima x1 i y1 definiramo

koordinate početne točke a atributima x2 i y2 definiramo koordinate krajnje točke linije. [14]
<line x1=“0” x2=“100” y1=“50” y2=“70” />

Primjer 2 - crtanje osnovne linije
VIŠESTRUKA LINIJA
Ukoliko želimo nacrtati višestruku i izlomljenu liniju, upotrebljavamo element <polyline>. Za

crtanje koristimo jedan atribut points u kojem unosimo parove brojeva, koji nam predstavljaju
koordinate točaka u kojima se linija prelama. [14]
<polyline points=“0 100, 50 70, 60 40, 20 0” />

Primjer 3 - crtanje višestruke linije
6
POLIGON
Za crtanje poligona koristi se element <polygon>, on je vrlo sličan elementu <polyline>, s

jedinom razlikom što on početnu i završnu točku spaja linijom te tako dobijemo zatvoreni oblik.
Za definiranje samog oblika koristi se jedan atribut points u kojem unosimo parove brojeva,
koji nam predstavljaju koordinate vrhova poligona. [14]
<polygon points=“0 100, 50 70, 60 40, 20 0” />

Primjer 4 - crtanje poligona
PRAVOKUTNIK
Pravokutnik se u SVG-u crta upotrebom elementa <rect>. Atributima x i y definiramo

koordinate gornjeg lijevog ugla pravokutnika, atributima width i height definiramo širinu i
visinu pravokutnika. Ukoliko želimo da nam pravokutnik ima zaobljene uglove, dodajemo
atribute rx i ry kojima definiramo zaobljenost po osi x i y. [14]
<rect x=“0” y=“0” width=“100” height=“50” rx=“10” ry=“10” />

Primjer 5 - crtanje pravokutnika
KRUG
Za crtanje kružnica koristi se element <circle>. Atributima cx i cy definiraju se koordinate

središta kružnice a atributom r definira se radijus. [14]
<circle cx=“100” cy=“100” r=“50” />

Primjer 6 - crtanje kružnice
ELIPSA
Elipsa se crta elementom <ellipse>, kao i kod kružnice atributima cx i cy definiraju se

koordinate središta. Za razliku od kružnice za crtanje elipse moramo definirati dva radijusa,
atributom rx definiramo radijus po osi x a atributom ry definiramo radijus po osi y. [14]
<ellipse cx=“100” cy=“100” rx=“50” ry=“20” />

Primjer 7 - crtanje elipse
7
PUTANJA
<path> element je najmoćniji element za crtanje osnovnih oblika. Pomoću njega mogu se
nacrtati gotovo svi mogući oblici, zatvoreni i otvoreni. Oblik nacrtanog elementa definiramo
pomoću samo jednog atributa d koji u sebi sadrži niz naredbi i parametara koje te naredbe
koriste.
<svg xmlns=“http://www.w3.org/2000/svg”
xmlns:xlink=“http://www.w3.org/1999/xlink”>
<path d=“M50,50 L20,200 200,150 400,100 500,300 450,5 575,5 700,5 650,300”
fill=“none” stroke=“blue” stroke-width=“4” />
<path d=“M50,50 Q20,200 200,150 400,100 500,300 450,5 575,5 700,5 650,300”
fill=“none” stroke=“red” stroke-width=“4” />
</svg>
Primjer 8 - crtanje krivulja elementom <path>
Naredbe koje se koriste prilikom definiranja atributa d u elementu <path>
M – naredba moveto – njome se pomičemo na točku koja je određena koordinatama koji se

nalaze iza komande M
L – naredba lineto – vuče ravnu liniju do točke koja je definirana koordinatama koje se nalaze
iza naredbe L
H – naredba horizontal lineto – vuče horizontalnu liniju čija duljina je definirana brojem koji
se nalazi iza komande H
V – vertical lineto – vuče vertikalnu liniju čija duljina je definirana brojem koji se nalazi iza
komande V
C – naredba cubic curve – crta Bezierovu krivulju, prva dva para brojeva su koordinate
kontrolnih točaka a zadnji par brojeva iza komande C je točka u kojoj završava putanja.
Q – naredba quadratic curve – slična je kao i naredba C samo što se u ovom slučaju prva i
druga kontrolna točka nalaze na istim koordinatama pa za definiciju koristimo samo dva para
brojeva, prvi za definiranje kontrolnih točaka a drugi za definiranje koordinata završne točke.
A – naredba Arc – njome crtamo lukove
Z – naredba closepath – spaja prvu i zadnju točku putanje i time zatvara nacrtani oblik.
8
Slika 2 – slika krivulje iz Primjera 8. Obje putanje imaju iste koordinate s time da je plava linija nacrtana
naredbom L a crvena linija je nacrtana naredbom Q.
3.4 Ispune i linije
Svakoj putanji koja je nacrtana unutar SVG-a možemo definirati karakteristike linije i ispune.
Atributi linije
Kako biste vidjeli liniju ili obris oblika, morate navesti karakteristike linije pomoću njenih
atributa. Linija nekog oblika iscrtava se nakon što se nacrta ispuna. Osnovne karakteristike
linije su debljina linije i boja, sve karakteristike linije su navedene u tablici 1. [14]
naziv atributa opis
stroke Njime definiramo boju linije.
stroke-width
Njime definiramo debljinu linije, debljina linije je centrirana sa
putanjom, zadana vrijednost je 1.
Služi za definiranje prozirnosti, vrijednost se kreće od 0 do 1,

stroke-opacity ukoliko je vrijednost 0 linija je prozirna, ukoliko je vrijednost 1
linija je neprozirna, 1 je ujedno i zadana vrijednost.
stroke-dasharray
Sastoji se od niza brojeva kojim definiramo duljinu crtica i
praznina ukoliko želimo nacrtati crtkanu liniju.
stroke-linecap
Njime oblikujemo završetak linije, može imati jednu od ove tri
vrijednosti: butt, round i square.
stroke-linejoin Njime definiramo oblik uglova poligona ili spojenih linija.
To je atribut koji definira ograničenje omjera duljine kuta i

stroke-miterlimit širine linije, koristi se za crtanje spoja kuta. Kada se granica
prekorači, spoj se pretvara iz kosog u špičasti.
Tablica 1 - atributi linije
9
Ispuna
Ispunu nekog oblika možemo kontrolirati korištenjem atributa ispune, prikazanih u Tablici 2.
[14]
naziv atributa opis
fill Njime definiramo boju ispune, zadan vrijednost je crna.
Služi za definiranje prozirnosti ispune, vrijednost se kreće od 0

fill-opacity
do 1, ukoliko je vrijednost 0 ispuna je prozirna, ukoliko je
vrijednost 1 ispuna je neprozirna, 1 je ujedno i zadana
vrijednost.
Ovaj atribut može imati dvije vrijednosti nonzero i evenodd,

fill-rule njima definiramo na koji način će se ispuniti likovi koji imaju
preklapajuće linije.
Tablica 2 - atributi ispune
Osim definiranja ispune navedenim atributima, zatvorene putanje možemo ispuniti uzorkom
ili gradijentom. Ako ih koristimo kao putanju isječka onda ih možemo ispuniti i rasterskom
grafikom.
3.5 Tekst unutar SVG-a
Primarni način dodavanja teksta unutar SVG datoteke je pomoću <text> elementa te
najjednostavniji oblik sadrži samo dva atributa x i y koji određuju koordinate donjeg lijevog
ugla teksta. Pošto element <text> ima sadržaj, njegov sadržaj mora biti ugniježđen između
početne i završne oznake. [15]
<text x=“20” y=“30”>Tekstualni sadržaj</text>

Primjer 9 - najjednostavniji <text> element
3.6 Element <g>
U SVG-u nacrtane oblike možemo grupirati pomoću elementa <g>. Mogućnost grupiranja
olakšava nam dodavanje stilova, transformacija, interaktivnosti, pa čak i animacija cijelih
grupa objekata. [6]
<g id=“kvadrat_i_krug”>
<rect x=“100” y=“100” width=“100” height=“100” />
10
<circle cx=“100” cy=“100” r=“100” />
</g>
Primjer 10 - primjer upotrebe elementa <g>
U Primjeru 10 unutar elementa <g> dodan je i atribut id, vrijednost tog atributa koja se nalazi
unutar navodnika služi nam da bi kasnije mogli nacrtati isti oblik samo pozivajući id bez da
ponovo ispisujemo kod unutar elementa <g>.
3.7 Elementi <defs> i <use>
Element <defs> služi za smještaj svih onih oblika i stilova koje želimo kasnije koristiti u SVG
datoteci. Smještanjem objekata unutar početne i završne oznake elementa <defs> samo smo ih
definirali, te oni neće biti prikazani sve dok ih ne pozovemo po potrebi.
<svg>
<defs>
<g id=“grupa1”>
<rect x=“50” y=“50” width=“50” height=“50” />
<circle cx=“50” cy=“50” r=“50” />
</g>
</defs>
<use href=“#grupa1” x=“50” y=“50” />

<use href=“#grupa1” x=“200” y=“50” />
</svg>
Primjer 11 - primjer primjene elemenata <defs> i <use>
Oblik koji je definiran u elementu <defs> i kojem je dodijeljen jedinstveni id kasnije možemo
u datoteci pozvati elementom <use>. U primjeru 11 oblik koji se sastoji od pravokutnika i
kružnice te kojem je dodijeljen id grupa1, kasnije je upotrijebljen dva puta. [16]
Unutar elementa <defs> ne moraju biti definirani samo oblici, već unutar njega možemo
definirati filtere, gradijente, uzorke, odnosno sve one elemente koje ćemo kasnije
upotrebljavati u SVG dokumentu. [16]
3.8 Transformacije
Elemente koje smo definirali i kasnije upotrijebili možemo i transformirati. SVG nam nudi
četiri funkcije za transformaciju
11
funkcija opis
translate() Ovom funkcijom pomičemo koordinatni sustav nacrtanog oblika, u
zagrade unosimo dva broja, prvi broj definira pomak po x osi a drugi
broj definira pomak po y osi.
rotate() Ovo je funkcija za rotaciju koordinatnog sustava, u zagradu unosimo
vrijednost u stupnjevima. Zadana koordinata osi rotacije je 0,0. Ukoliko
želimo promijeniti centar rotacije, iza prve vrijednosti unosimo još dvije
koje nam definiraju koordinate novog centra rotacije.
scale() Funkcija scale() povećava ili smanjuje veličinu oblika. Ona skalira i
dimenzije oblika i koordinate njegovog položaja. Npr. pravokutnik
postavljen na 10,10 sa širinom 20 i visinom 30, skaliran faktorom 2,
pojaviti će se na 20,20 sa širinom 40 i visinom 60.
Funkcija scale() također skalira debljinu linije putanje.
Ukoliko u zagradu unesemo dvije različite vrijednosti odvojene
zarezom onda će skaliranje biti neproporcionalno jer prva vrijednost
nam definira skaliranje po x osi a druga po y osi
skew() Funkcije skewX() i skewY() ukose oblik po x i y osi za iznos koji se
navodi u stupnjevima
matrix() Ova funkcija nam omogućuje da vrijednost pojedine transformacije
izrazimo u obliku matrice.
Tablica 3 - funkcije za transformaciju
Navedene funkcije ne transformiraju sami oblik već transformiraju koordinatni sustav u kojem
je oblik nacrtan. [17]
xmlns:xlink=“http://www.w3.org/1999/xlink” >
<defs>
<g id=“oblik” >
<rect x=“0” y=“0” width=“60” height=“60” rx=“0” ry=“0”
style=“fill:yellow; stroke:green; stroke-width:4”/>
</g>
</defs>
<use href=“#oblik” transform=“translate(20 20)”/>
<use href=“#oblik” transform=“translate(90 20)”/>
<use href=“#oblik” transform=“translate(170 20) rotate(45 30 30)”/>
<use href=“#oblik” transform=“translate(240 20) skewX(20)”/>
</svg>
Primjer 12 - transformacije
12
U primjeru 12. u elementu <defs> definiran je oblik kojem je pridružen id „oblik”. Taj oblik je
upotrijebljen četiri puta. Prvi puta je translatiran po osi x za 20 px i po osi y za 20 px, drugi
puta je translatiran po osi x za 90 px i po osi y za 20 px. Transformacije možemo i kombinirati,
pa je treći puta oblik translatiran po osi x za 170 px i po osi y za 20 px te je zarotiran za 45
stupnjeva sa centrom rotacije u točki (30, 30). Četvrti puta je isti oblik translatiran po osi x za
240 px i po osi y za 20 px te je nakon toga ukošen po osi x za 20 stupnjeva.
Slika 3 - izgled crteža iz Primjera 12.
3.9 Uzorci
SVG uzorak definira blok SVG grafike koji će se koristiti kao ponavljajuća ispuna za druge
oblike ili putanje. Kod kreiranja uzorka može se koristiti bilo koji sadržaj podržan u SVG-u,
uključujući slike, tekst i putanje, ispunjene bojom ili gradijentima. Uzorak se ponavlja u formi
pravokutnika. Uzorke također možemo i kombinirati, tako da prilikom kreiranja uzorke
možemo ispuniti drugim uzorkom.
Uzorak se definira unutar <pattern> elementa, dodjeljujući mu jedinstven id kako bi ga kasnije

mogli pozvati. Atributi koji se koriste unutar elementa <pattern> su uglavnom <rect> (ili bilo
koji drugi oblik) ili <image>, x, y, width, i height. Jedan od važnih atributa unutar <pattern>
elementa je i patternUnits. Njime definiramo ishodište koordinatnog sustava u kojem se
iscrtava uzorak. Ukoliko odaberemo vrijednost userSpaceOnUse onda se uzorak ravna po
koordinatnom sustavu unutar kojega je iscrtan oblik koji želimo ispuniti. Ukoliko odaberemo
vrijednost objectBoundingBox onda se uzorak ravna prema obliku kojeg ispunjava. [18]
xmlns:xlink=“http://www.w3.org/1999/xlink” width=“200” height=“100” >
<defs>
<pattern id=“uzorak-1” x=“0” y=“0” width=“10” height=“10”
patternUnits=“userSpaceOnUse”>
13
<circle cx=“5” cy=“5” r=“5” fill=“#00ff00” />
</pattern>
</defs>
<rect x=“0” y=“0” width=“200” height=“100” fill=“url(#uzorak-1)”/>
</svg>
Primjer 13 - primjena uzorka
Slika 4 - slika pravokutnika ispunjenog uzorkom iz primjera 13
3.10 Gradijenti
Gradijenti su tonski prijelazi iz jedne boje ili stanja prozirnosti u drugo. SVG podržava dvije
vrste gradijenata, linearne i radijalne. Kod linearnih gradijenata, svaka je boja u prijelazu
razvučena duž paralelnih linija, dok su kod radijalnih gradijenata boje u prijelazu razvučene
duž koncentričnih kružnica.
<linearGradient id=“grad1”>
<stop stop-color=“red” offset=“0”/>
<stop stop-color=“lightSkyBlue” offset=“1”/>
</linearGradient>
Primjer 14 - osnovna struktura linearnog gradijenta sa dvije boje
Gradijente definiramo unutar elemenata <linearGradient> i <radialGradient>. Dva elementa

<stop> definiraju boje koje bi se trebale izmiješati da bi se stvorio gradijent. Svaki <stop>
element ima novi atribut, offset, koji postavlja tu boju duž gradijenta. Vrijednost pomaka
izražava se ili kao broj između 0 i 1 ili kao postotak. U primjeru 14. je sam početak gradijenta
čisto crven, a sam kraj svijetloplav. [18]
3.11 Filteri
Filteri nam služe za izmjenu sloja grafike mijenjanjem pojedinih piksela na način da se
primjenom određenih matematičkih funkcija mijenjaju njihove vrijednosti. Kada se
14
primjenjuju na vektorske oblike ili tekstualne elemente, SVG filtri omogućuju dodavanje
zamućenja ili neku drugu vrstu promjene kako bi izmijenili izgled postojeće grafike. Kada se
primjenjuju na umetnute slike, filteri također mogu dinamički prilagoditi boju i kontrast. [19]
Filteri se renderiraju na strani klijenta, pa se prijenosom malih datoteka mogu opisati vrlo
složene grafike, umjesto da se prenose velike slikovne datoteke sa velikim brojem piksela. [1]
SVG filteri se definiraju u elementu <filter> unutar kojega se nalazi niz funkcija. Te funkcije
su definirane u djeca elementima koji su ugniježđeni unutar <filter> elementa. U SVG-u postoji
17 funkcija filtera, to su:
• feGaussianBlur
• feDropShadow
• feMorphology
• feTurbulence
• feDisplacementMap
• feColorMatrix
• feConvolveMatrix
• feComponentTransfer
• feOffset
• feMerge
• feFlood
• feComposite
• feImage
• feBlend
• feDiffuseLighting
• feSpecularLighting
Prefiks fe u nazivu funkcije dolazi od engleskog filter effect a sama imena daju nam naslutiti
koji efekt se postiže kojim filterom. [20]
<svg>
<defs>
<filter id=“blur_filter”>
<feGaussianBlur in=“sourceGraphic” stdDeviation=“10”/>
</filter>
15
</defs>
<image href=“neka_slika.jpg” filter=“url(#blur_filter)”/>
</svg>
Primjer 15 - primjer primjene filtera „feGaussianBlur” na JPG datoteku
3.12 Maske i isječci
Isječci
Kada u <svg> elementu definiramo atribute width i height tada smo zapravo definirali vidno
polje unutar kojega će biti vidljivi grafički elementi. Svi elementi koji se nalaze van tog polja
jednostavno će biti isječeni, na taj način smo kreirali prvi isječak. Međutim unutar tog vidnog
polja možemo definirati i upotrijebiti nove isječke i njima ograničiti prikaz nekog grafičkog
elementa. Isječke definiramo unutar elementa <clipPath> i kasnije ih pozivamo koristeći id.
Za isječak možemo koristiti bilo koji od elemenata za crtanje osnovnih oblika a također kao
isječak možemo koristiti i tekst. Isječke možemo primijeniti na bilo koji sadržaj unutar SVG-
a, neku putanju, tekst ili umetnutu rastersku grafiku. [14]
Maske
Sličan efekt možemo postići i upotrebom maske. Za razliku od isječka maska nam daje
mogućnost da osim što možemo sakriti neki dio grafike, također možemo učiniti da on postane
djelomično vidljiv. Maska radi na principu da ispod onih dijelova maske koji su bijeli grafika
je neprozirna a ispod onih dijelova maske koji su crni ili imaju neku drugu vrijednost boje osim
bijele i grafika je također prozirna odnosno poluprozirna. Stupanj prozirnosti nam može ovisiti
i o alfa vrijednosti na pojedinom pikselu maske.
Kao masku možemo upotrijebiti bilo koji grafički element unutar SVG-a, tekst, rastersku
grafiku, putanju sa bilo kakvom ispunom i obrubom. Također masku možemo primijeniti na
bilo koji grafički element. Masku definiramo unutar elementa <mask> i pozivamo je pomoću
id-a. [14]
3.13 Stilovi
SVG koristi stilove i njihova svojstva za opisivanje mnogih parametara unutar dokumenta.
Svojstva stila definiraju kako će se SVG grafički elementi prikazati. Ukupno postoji 87
16
svojstava stilova koje možemo definirati unutar SVG-a. Ta svojstva se mogu definirati na način
da unutar nekog elementa svojstvo bude navedeno kao atribut te njegovu vrijednost unesemo
unutar navodnika. Pošto SVG podržava CSS, stilovi se mogu definirati i pomoći CSS-a.
Možemo ih umetnuti unutar linije koda (eng. inline), možemo ih definirati u posebnom
elementu <style>. Element <style> može biti smješten unutar elementa <svg> ili unutar
HTML-a u kojem se nalazi SVG. Također CSS može biti spremljen u vanjskoj datoteci i
dodijeljen nekom SVG-u putem poveznice. [21] [22]
<style>
.C1 {fill:blue; stroke:pink; stroke-width:4}
</style>
<rect class=“C1” x=“10” y=“10” width=“60” height=“60/>
Primjer 16 - definicija stila unutar elementa <style> i primjena na elementu <rect>
U primjeru 16. za klasu C1 definiran je stil koji je kasnije primijenjen na pravokutnik <rect>
pozivajući ga preko imena klase class=“C1”. Kao rezultat iscrtava se kvadrat dimenzija
60x60piksela ispunjen plavom bojom, sa debljinom obruba 4 piksela roza boje.
3.14 Animacije
Vizualno vrlo atraktivan aspekt SVG-a je njegova mogućnost animacije. Većina grafičkih
elemenata unutar SVG slike može se animirati - položaj na zaslonu, širina, visina, boja,
neprozirnost, zaustavne boje u gradijentu, atributi SVG filtera itd.. Vizualni efekti su
mnogobrojni a postoji i mogućnost kombiniranja različitih tehnika animacije, čime dobivamo
gotovo beskrajno mnogo mogućnosti. [23]
SVG možemo animirati metodama koje ne koriste vanjske programske biblioteke, tzv.
izvornim metodama. Tu spadaju CSS, SCSS, Sass, requestAnimationFrame(), Web
Animations API. Od metoda animacije koje koriste vanjske programske biblioteke valja
izdvojiti: GreenSock (GSAP), Mo.js, Bodymovin’, Velocity.js, SMIL. [24]
17
4 Praktični dio
Kao praktični dio rada napravljene su tri ilustracije u čijoj izradi su korištene tehnike opisane
u uvodnom dijelu rada. Sve tri ilustracije umetnute su u jednu HTML datoteku kojoj se može
pristupiti na poveznici: http://poligon.tragduo.hr/ver2/
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“style.css”>
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8” />
</head>
<body>
<div class=“flex-container”><object type=“image/svg+xml”
data=“trokuti2.svg”></object></div>
data=“linije2.svg”></object></div>
data=“skoljke.svg”></object></div>
</body>
</html>
Primjer 17 - kod HTML datoteke unutar koje su smještene SVG ilustracije
SVG kao vanjske datoteke mogu se smjestiti unutar HTML-a pomoću slijedećih elemenata:
<img>, <object>, <iframe>, <embed> i <svg>. U ovom slučaju je odabran element <object>
jer SVG unutar njega zadržava sve interakcije i animacije [25]
4.1 Ilustracija 1 „trokuti2.svg”
Ova ilustracija je zamišljena kao neka vrsta interaktivne pozadine, na kojoj se isprva ništa ne
vidi, osim ispune pozadine. Kako korisnik prelazi mišem preko ekrana, polako postaju vidljivi
geometrijski oblici.
Osnovni oblici za ovu ilustraciju kreirani su u programu Adobe Illustrator, nacrtana je mreža
pravokutnih jednakokračnih trokuta kojima su krakovi duljine 50 piksela. Trokuti su smješteni
u okvir dimenzija 400x200 piksela.
18
Slika 5 - geometrijski oblici za ilustraciju 1
Neki trokuti su spojeni u jedan oblik upotrebom funkcije UNITE koja se nalazi u prozoru
PATHFINDER unutar programa Adobe Illustrator. Ti spojeni oblici na slici 5. označeni su
sivom bojom. Datoteka nacrtana u Illustratoru otvorena je u programu Visual Studio Code i iz
nje je uzet samo dio koda koji predstavlja putanje nacrtanih trokuta i kvadrata. Nakon toga u
VSC-u su umetnuta još dva kruga, na slici 5. krugovi su označeni roza bojom.
Kada su osnovni oblici bili nacrtani na red je došlo kreiranje stilova. Svi stilovi ugniježđeni su
unutar elementa <style>
<style type=“text/css”>
.tro1{
fill: #0000aa;
opacity: 20%;
transition: all 3s ease-out;
}
.tro1:hover {
opacity: 50%;
}
.krug {
fill: #0000aa;
opacity: 0%;
}
.krug:hover {
opacity: 30%;
}
</style>
19
Primjer 18 - element <style> iz ilustracije 1
Kreirane su dvije klase .tro1 i .krug sa pripadajućim „hover” stanjima. U zadanom stanju klasa
.tro1 ima postavljenu neprozirnost na 20% a klasa .krug na 0%. Kada se oblici kojima su
pridružene klase prekriju mišem, neprozirnost im se popne na 50% za klasu .tro1 odnosno
30% za klasu .krug. Tranzicija između dva stanja traje 3 sekunde a naredba ease-out je tu kako
bi povratak u početno stanje bio malo sporiji.
Nakon stilova definiran je gradijent kojim je ispunjena pozadina.
<defs>
<linearGradient id=“grad1” x1=“0%” y1=“0%” x2=“100%” y2=“0%”>
<stop offset=“0%” style=“stop-color:rgb(190, 204, 249);stop-opacity:1” />
<stop offset=“100%” style=“stop-color:rgb(0, 32, 71);stop-opacity:1” />
</linearGradient>
</defs>
Primjer 19 - definicija linearnog gradijenta za ispunu pozadine
Gradijentu je dodijeljen id grad1, atributi x1, y1 i y2 su postavljeni na vrijednost 0 a atribut x2

postavljen je na vrijednost 100%. Takve postavke daju nam gradijent koji počinje u skroz
lijevom rubu a završava u skroz desnom, a boje se izmjenjuju duž vertikalnih paralelnih linija.
Nakon elementa <defs> prvo se crta pravokutnik koji pokriva cijelu površinu ilustracije. On je
nacrtan elementom <rect> ispunjen je gradijentom grad1 i neprozirnost mu je postavljena na
50%. Nakon pozadinskog pravokutnika iscrtavaju se ostali geometrijski oblici, trokuti
elementom<polygon>, kvadrat elementom <rect> te kružnice elementom <circle>. Na samom
kraju dokumenta nalazi se i element <tekst>. Pošto je to jedini <tekst> element u dokumentu
njegov stil je definiran u samom elementu koristeći atribute font-family, font-size, font-weight,
fill i opacity.
<rect width=“400” height=“200” fill=“url(#grad1)” opacity=“50%”/>

<polygon class=“tro1” points=“0,0 50,0 0,50 “/>
20
<rect x=“50” y=“100” class=“tro1” width=“50” height=“50”/>
<circle class=“krug” cx=“100” cy=“50” r=“35”/>
21
<circle class=“krug” cx=“300” cy=“100” r=“25”/>
<text x=“30” y=“30” font-family=“Helvetica” font-weight=“bold” font-size=“12px”

fill=“#0000aa” opacity=“50%”>Pronađi geometrijske oblike!</text>
</svg>
Primjer 20 - završni dio prve ilustracije u kojem su iscrtani grafički elementi.
Slika 6 - izgled prve ilustracije
Na slici 6. vidi se izgled prve ilustracije na kojoj se miš nalazi na poziciji tako da nam otkriva
kružnicu.
22
4.2 Ilustracija 2 „linije2.svg”
Na ovoj ilustraciji prevladava uzorak koji se sastoji od kvadrata u pozadini preko kojega su
nacrtane plava deblje valovite isprekidane linije. Linije su animirane na način da kada se mišem
pređe preko linije pomakne se početna točka prekida što nam daje dojam kao da se valovi
gibaju. Sa desne strane je nacrtana jedrilica koja je animirana pomoću CSS animacije a u
lijevom donjem uglu se nalaze ribe koje postanu vidljive tek kada se preko njih pređe mišem.
Crtanje ilustracije je započeto u programu Adobe Illustrator u kojem su nacrtani jedrilica, jedna
riba i jedna valovita linija. Te datoteke su otvorene i VSC-u i iz njih je preuzet samo dio koda
koji opisuje tražene putanje. Taj kod je spremljen u novu SVG datoteku koja je kreirana u VSC-
u.
Unutar elementa <defs> definirane su putanje za valovitu liniju te za ribu, putanja za brod nije
definirana unutar elementa <defs> jer će se ona iskoristiti samo jedanput.
<defs>
<path id=“linija” d=“M0,15c18.2,0,18.2,20,36.4,20c18.2,0,18.2-20,36.4-
20c18.2,0,18.2,20,36.4,20c18.2,0,18.2-20,36.4-20
c18.2,0,18.2,20,36.4,20c18.2,0,18.2-20,36.4-
20c18.2,0,18.2,20,36.4,20c18.2,0,18.2-20,36.4-20c18.2,0,18.2,20,36.4,20
c18.2,0,18.2-20,36.4-20c18.2,0,18.2,20,36.4,20”/>
<path id=“riba” d=“M55,10.4c-9-18.1-30.9-9.5-
40.6,2.8C11.6,16.6,4.7,8.2,0,9.6c7,7.8,7.9,17.3,6.4,27.8c4.8-1.4,8.1-
12.2,13.7-9.9 C37.8,34.7,51.1,27.1,55,10.4z”/>
</defs>
Primjer 21 - element <defs> unutar kojega su definirane putanje za valovitu liniju i ribu
Liniji je dodijeljen id linija a ribi id riba.
Stilovi su definirani u elementu <style>. Kreirane su četiri klase sa pripadajućim „hoover”

stanjima. Klasa .kva1 za pozadinski kvadrat, klasa .lin1 za valovitu liniju, klasa .ribice za ribice
te klasa .brod za brod.
<style type=“text/css”>
.kva1{
fill: #02B3E9;
opacity: 60%;
transition: all 3s ease-out
}
.kva1:hover {
23
opacity: 75%;
}
.lin1{
fill: none;
stroke: #34b7e2;
stroke-width: 17;
opacity: 90%;
stroke-dasharray: 32, 1;
stroke-dashoffset: 20;
}
.lin1:hover {
stroke-dashoffset: 0;
opacity: 100%;
stroke: #30a9d2;
}
.ribice {
fill: #175367;
opacity: 0%;
transition: all 0.6s ease-out;
}
.ribice:hover {
opacity: 30%;
}
@keyframes ljuljanje {
0%, 100% {
transform: rotate(-2deg);
transform-origin: bottom;
}
50% {transform: rotate(2deg);}
}
.brod {
fill: #175367;
animation: ljuljanje infinite 7s cubic-bezier(0.5, 0.885, 0.32, 1.275);
}
</style>
Primjer 22 - stilovi za drugu ilustraciju
24
Kod klase .kva1 definirana je boja ispune te neprozirnost od 60%, kada se grafički elementi sa
klasom .kva1 prekriju mišem, neprozirnost se promijeni na vrijednost 75%. Ta tranzicija traje
3 sekunde sa usporenim povratkom u početno stanje.
Kod klase .lin1 osim debljine i boje linije definirana je duljina crtice i praznine (stroke-
dasharray: 32, 1;) gdje je crtica duljine 32 piksela a praznina između susjednih crtica 1 piksel.
Također je pomaknut početak crtice za 20 piksela (stroke-dashoffset: 20;) da bi u stanju kada
je linija prekrivena mišem ta vrijednost bila 0. Na taj način je napravljen pomak samih crtica
duž linije. U stanju „hoover” također se promijene boja i vrijednost neprozirnosti a sama
tranzicija traje 1 sekundu.
Klasi .ribice u stanju „hoover” mijenja se samo neprozirnost sa vrijednosti 0 na vrijednost 30%
te na taj način ribice postanu vidljive kada se preko njih prijeđe mišem.
Kod klase .brod definirali smo samo boju ispune i pozvali animaciju kojoj smo prethodno
dodijelili naziv ljuljanje te joj zadali karakteristike ključnih okvira naredbom @keyframes. U
animaciji smo mijenjali samo vrijednost atributa transform. Na početnom i krajnjem okviru
zarotirali smo cijelu putanju za -2 stupnja. Definirali smo također i jedan ključni okvir na
sredini animacije gdje je brod zarotiran za 2 stupnja. Time smo dobili efekt ljuljanja broda na
valovima. Centar rotacije je pomaknut na dno broda tako da smo atributu transform-origin
postavili vrijednost bottom. Sama animacija traje 7 sekundi, ponavlja se beskonačno mnogo
puta a vremenska krivulja definirana je cubic-bezier funkcijom. Definicija stilova i animacije
prikazana je u primjeru 22.
Nakon definiranja stilova i animacije te definiranja osnovnih korištenih putanja na red je došlo
iscrtavanje samih grafičkih elemenata.
<rect class=“kva1” width=“400” height=“200”/>
<use xlink:href=“#linija” class=“lin1” transform=“translate(0 -25)”/>

<use xlink:href=“#linija” class=“lin1”/>
<use xlink:href=“#linija” class=“lin1” transform=“translate(0 25)”/>
25
<path class=“brod” d=“M289.8,145.8c9.7-0.1,22.3,0.4,27.9,0c8.3-0.6,21.4-1.4,26.7-
5.5c0.9-2.6,2-5.7,3.2-9.2c-14.5,0-28.1,0-41.9,0 c0-0.7-0.1-1.1-0.1-1.5c0-24.5,0-
49,0-73.5c0-0.2,0-0.4,0.1-0.6c0.5,0,0.9-0.2,1.3-0.6c2.9,22.2,2,43.9,0.7,65.7
c12.3,1.7,24.7,2.3,35.6,9.4c-4.9-28.5-16.5-53.4-36.2-75.1c0.3-0.3,0.5-0.8,0.5-
1.3c0-0.5-0.2-1-0.6-1.4c3.1-3.3,6.3-1.9,9.5-0.8 c2,0.7,4,0.8,5.5-0.5c-1.7-0.6-3.4-
1-5-1.7c-1.7-0.9-3.2-2.2-5-3.1c-3.2-1.6-5.1-0.4-5.1,3.2c0,0.8,0,1.6,0,2.9 c-0.3-
0.2-0.7-0.4-1.1-0.4c0-1.7,0.3-3.5,0.3-5.2c0-0.9-0.5-1.9-1-2.8c-0.1-0.2-1.4-0.2-
1.6,0c-0.5,0.8-1,1.8-1,2.7 c0,1.7,0.3,3.5,0.3,5.3c0,0-0.1,0-0.1,0c-0.6,0-1,0.2-
1.4,0.6c0.2-1.5,0.4-2.8,0.6-4c-20,23.8-31.8,51.1-36.9,81.9 c11.9-3.6,23.6-
4.9,35.7-3.6c-3.8-24.4-3.6-48.4,0.1-
72.5c0.2,0.8,1,1.4,1.9,1.4c0.1,0,0.1,0,0.2,0c0,0.4,0,0.7,0,1.1
c0,24.1,0,48.1,0,72.2c0,0.7-0.1,1.5-0.2,2.4c-13.8,0-27.4,0-
41.9,0c1.4,3.8,2.7,7,4,10.5C267.4,145.9,281.7,145.9,289.8,145.8z”
transform=“translate(10 0)”/>

<g class=“ribice”>
<use xlink:href=“#riba” transform=“translate(30 120)”/>
<use xlink:href=“#riba” transform=“translate(80 145) scale(0.7 0.7)”/>
<use xlink:href=“#riba” transform=“translate(20 160) scale(1.1 1.1)”/>
</g>
<text x=“30” y=“30” font-family=“Helvetica” font-weight=“bold” font-size=“12px”

fill=“#175367”>Pronađi ribice!</text>
</svg>
Primjer 23 - iscrtavanje grafičkih elemenata u ilustraciji 2
Prvo je iscrtan kvadrat koji se nalazi u pozadini, on je nacrtan elementom <rect> i dodijeljena
mu je klasa .kva1. Nakon pozadinskog kvadrata iscrtavaju se valovite linije koristeći element
<use>. Svaka naredna linija pomaknuta je za 25 piksela po y osi funkcijom za transformaciju
translate().
Nakon šeste linije iscrtava se putanja koja nam predstavlja jedrilicu i kojoj je dodijeljena klasa
.brod. Radi bolje kompozicije slike pomaknuta je u desno funkcijom za transformaciju
translate().
Nakon što je iscrtana i posljednja linija kreirana je grupa putanja elementom <g> kojem je
dodijeljena klasa .ribice. Unutar grupe elementom <use> iscrtavaju se tri ribice koristeći ranije
definiranu putanju kojoj je dodijeljen id riba. Svaka riba je funkcijama za transformaciju,
translate() i scale() pomaknuta na željenu poziciju, te joj je prilagođena veličina.
26
Na samom kraju dokumenta nalazi se i element <tekst>. Pošto je to jedini <tekst> element u
dokumentu, kao i u prethodnoj ilustraciji, njegov stil je definiran u samom elementu koristeći
atribute font-family, font-size, font-weight, i fill .
Slika 7 - izgled druge ilustracije
Na slici 7. prikazana je druga ilustracija kada se miš nalazi na dijelu slike ispod kojeg se nalaze
ribe, koje zbog toga postanu vidljive.
4.3 Ilustracija 3 „skoljke.svg”
U ovoj posljednjoj ilustraciji naglasak je stavljen na upotrebu isječka, maske i filtera.

Upotrjebljeni su tekstualni isječak, maska definirana putanjom te dvije kombinacije filtera.
Prva kombinacija filtera feFlood i feBlend iskorištena je za promjenu boje na isječenom dijelu
slike, dok nam je druga kombinacija filtera feOffset i feGaussianBlur poslužila za kreiranje
sjene na maskiranom dijelu slike.
U pozadini ilustracije nalazi se fotografija sa motivom školjkica, sama slika je dimenzija

3888x1944 piksela, omjer širine i visine je 2:1. Fotografija u pozadini ima neprozirnost
postavljenu na 0,5. Sama SVG ilustracija je dimenzija 400x200 piksela, također sa omjerom
širine i visine 2:1.
Sa lijeve strane ilustracije nalazi se tekstualni isječak „#MORE” koji nam ograničava vidljivi
dio iste fotografije koja je upotrjebljena kao i pozadina. Preko tog isječka primijenjena je
27
kombinacija filtera feFlood i feBlend. Filteri su promijenili boju fotografije unutar isječka i
omogućili da tekstualni dio postane vidljiv.
Sa desne strane ilustracija upotrjebljena je maska u obliku školjke koja nam maskira dio iste
fotografije koja je upotrjebljena kao i pozadina, taj dio slike ima vrijednost neprozirnosti 1 pa
time odskače od pozadine. Ispod maskiranog dijela fotografije nalazi se sjena koja je dobivena
kombinacijom filtera filtera feOffset i feGaussianBlur.
U prvom dijelu koda nalazi se element <style> u njemu je definiran stil za putanju koja će nam
kasnije poslužiti kao maska (primjer 24). Definirana je samo boja ispune kako bi na tom dijelu
maske fotografija bila vidljiva u potpunosti.
<style>
.maska {
fill: rgb(255,255,255);
}
</style>
Primjer 24 - element <style> u 3. ilustraciji
Nakon elementa <style> dolazi element <defs> unutar kojega su definirani:
• putanja koja nam je poslužila kao maska i podloga za sjenu

• filter za promjenu boje
• filter za sjenu
• isječak
• maska
<path id=“skoljka_path” d=“M177.8,131.7C199.3,13.2,77-24,30,14.7c-

73.6,61,6.6,135.9,46.2,95.1c18.6-18.4,7-49.8-18.6-46.1 c-18.6,4.4-
16.2,31.8,2.2,26.5c7.1-3,5-15.3-3.6-11.6c-3.2,1.2-1.5,7.2,2.3,5.3c1.7-0.7-0.1-4.4-
1.8-2c1.3-2.7,4.8,1.6,0.9,2.8 c-5,0.7-5.1-6.5,0-7.5c8.5-1.6,10.3,9.6,3.9,14.1c-
9.1,6.7-21.8-3.4-19.8-13.9c7.6-40.6,77.6-6.3,36.9,37.7 c-1.5,1.7-2.6,1.6-
0.1,3.7C101.3,143,174,155.7,177.8,131.7z”/>
Primjer 25 - putanja koja nam je poslužila kao maska i podloga za sjenu
U primjeru 25 prikazan je kod putanje koja nam je poslužila kao maska te kao podloga za sjenu
na desnoj strani ilustracije. Sama putanja je nacrtana u programu Adobe Illustrator i spremljena
ka SVG datoteka. Nakon toga je otvorena u VSC-u i iz nje je uzet samo ovaj dio koji predstavlja
putanju. Putanji je dodijeljen id „skoljka_path”.
28
Slika 8 - izgled putanje iz primjera 25
Nakon putanje definiran je filter kojim smo promijenili boju onom dijelu ilustracije koji je
isječen tekstualnim isječkom.
<filter id=“boja”>
<feFlood result=“ispuna” x=“0” y=“0” width=“100%” height=“100%” flood-
color=“#00A0E1” flood-opacity=“0.8” />
<feBlend in=“SourceGraphic” in2=“ispuna” mode=“overlay” />
</filter>
Primjer 26 - kombinacija filtera feFlood i feBlend
Kako je definiran filter možemo vidjeti u primjeru 26. Prva funkcija u definiciji filtera je
feFlood, njome se područje na kojem se primjenjuje filter ispunjava željenom bojom. Boja
ispune je #00A0E1 a neprozirnost ispune je postavljena na 0,8. Rezultat ove funkcije ima svoj
id „ispuna” koji definiramo unutar atributa result. Druga funkcija u definiciji ovog filtera je
feBlend, ova funkcija stapa dva sloja u jedan. Prvi sloj je definiran atributom in i njegova
vrijednost je postavljena na SourceGraphic, time smo odredili da je prvi sloj grafički element
na koji smo primijenili filter. Drugi sloj je pak definiran atributom in2, njegova vrijednost je
vrijednost atributa result iz prethodne funkcije, a to je „ispuna”, odnosno rezultat prve funkcije.
<filter id=“sjena”>
<feOffset result=“pomak” in=“SourceGraphic” dx=“5” dy=“5” />
<feGaussianBlur in=“pomak” stdDeviation=“5”/>
</filter>
Primjer 27 - kombinacija filtera feOffset i feGaussianBlur
29
Dugi filter smo također dobili kombinacijom dvaju filtera a njegovu definiciju vidimo u
primjeru 27. Prva funkcija koju smo koristili je feOffset i ona nam kao rezultat pomakne
grafički element na koji je primijenjena za iznos koji definiramo atributima dx i dy, gdje nam
dx određuje pomak po x osi a dy pomak po y osi. Rezultat ove funkcije pozivamo dodijeljenim
id-om kojeg smo definirali kao vrijednost atributa result, to je u ovom slučaju „pomak”. Nakon
toga koristimo funkciju feGaussianBlur koja zamuti onaj grafički element čiji id navedemo kao
vrijednost atributa in, u ovom slučaju to je „pomak”. Stupanj zamućenja određujemo atributom
stdDeviation.
Nakon filtera definirali smo isječak i masku, isječak vidimo u primjeru 28 a masku u
primjeru 29.
<clipPath id=“isjecak”>
<text x=“10” y=“150” font-family=“Helvetica” font-weight=“bold” font-
size=“50px” fill=“#175367”>#MORE</text>
</clipPath>
Primjer 28 - definicija isječka
Isječak je definiran unutar elementa <clipPath>, dodijeljen mu je id „isjecak”. Za isječak je

odabran tekst sadržaja #MORE, stil teksta definiran je unutar elementa <tekst>
<mask id=“maska_desno”>
<use href=“#skoljka_path” class=“maska” width=“100%” height=“100%”
transform=“translate(200 25) rotate(3)”/>
</mask>
Primjer 29 - definicija maske
Maska je definirana unutar elementa <mask>, dodijeljen joj je id „maska_desno”. Putanju od

koje je kreirana maska smo ranije definirali i sada je pozivamo preko njenog id-a
„#skoljka_path” i dodjeljujemo joj klasu „maska” kako bi je ispunili bijelom bojom. Bijela
boja nam je potrebna jer sve ono što je prekriveno bijelom bojom postaje u potpunosti vidljivo.
Maska je pomaknuta u desnu stranu ilustracije funkcijom za transformaciju translate() te je
zarotirana funkcijom za transformaciju rotate().
Ovime smo definirali sve elemente koje ćemo koristiti prilikom crtanja grafičkih elemenata.

<image opacity=“50%” width=“100%” height=“100%” href=“slike/skoljke.jpg”/>

30
<image clip-path=“url(#isjecak)” filter=“url(#boja)” width=“100%”
height=“100%” href=“slike/skoljke.jpg”/>

<use href=“#skoljka_path” filter=“url(#sjena)” transform=“translate(200 25)
rotate(3)” opacity=“0.9”/>

<image mask=“url(#maska_desno)” width=“100%” height=“100%”
href=“slike/skoljke.jpg”/>
</svg>
Primjer 30 - iscrtavanje grafičkih elemenata 3. ilustracije
Prvi element koji se postavlja je pozadinska slika, to je datoteka skoljke.jpg kojoj smo
neprozirnost definirali atributom opacity čija je vrijednost 0,5.
Nakon pozadinske slike iscrtava se lijevi dio ilustracije koji vidimo kao tekst #MORE. U
elementu <image> pozivamo sliku skoljke.jpg i iz vidnog polja isijecamo dio koji smo
definirali isječkom, to radimo preko atributa clipPath, čija je vrijednost „url(#isjecak)”. Na taj
isječak primjenjujemo filter kojeg smo ranije definirali i dodijelili mu id „boja”.
Desni dio ilustracije započinjemo iscrtavanje sjene ,tako da na ranije definiranu putanju koju
ćemo koristiti i kao masku, primjenjujemo ranije definirani filter sa id-om „sjena”. Preko sjene
iscrtavamo sliku školjke. To radimo na način da uzimamo istu sliku koju smo koristili i kao
pozadinu, te ju maskiramo ranije definiranom maskom sa id-om „maska_desno”.
Slika 9 - konačni izgled 3. ilustracije
31
5 Zaključak
Uvođenjem SVG-a kao standarda za prikaz vektorske grafike na webu, od strane W3C-a,
dogodila se prava revolucija u smislu povećanja broja mogućnosti koji nam prikaz grafike nudi.
Pošto je gotovo svaki atribut kojim je opisana SVG grafika moguće animirati pomoću CSS-a
ili Java Scripta, moguće je u datoteci od samo par megabajta, vrlo brzo prenijeti kompleksne
animacije i vizualizacije. Također dijelove SVG koda moguće je na zahtjev kreirati u drugim
programima čime se otvaraju mogućnosti interaktivnog prikaza grafike, crtanja grafikona ili
raznih drugih grafičkih prikaza koji se mijenjaju ovisno o nekim vanjskim faktorima. Veliki
pomak uvođenje SVG-a napravio je i na polju kartografije na webu.
U praktičnom dijelu rada napravljene su tri ilustracije koristeći tek nekoliko osnovnih oblika i
funkcija. Cijeli rad zauzima 5,4mb od čega 4,9mb otpada na rastersku grafiku korištenu u 3.
ilustraciji, time je potvrđeno da stvarno sa malim datotekama možemo napraviti kvalitetan
Grafički prikaz. SVG nam daje mogućnost prikaza grafike koja nije statična, te koja se
kvalitetno prilagođava svim formatima ekrana na kojima se prikazuje.
Uskoro se očekuje nova SVG specifikacija 2.0, koja se nadograđuje se na drugo izdanje SVG
1.1 s ciljem poboljšavanja upotrebljivost jezika i dodavanja novih značajki koje korisnici često
traže. To nam daje osnove za konstataciju da će se ovaj standard koristiti još dugo vremena.
32
6 Kratice
XML – EXtensible Markup Language
CGM – Computer Graphics Metafile
W3C – World Wide Web Consortium
SVG – Scalable Vector Graphics
PGML – Precision Graphics Markup Language
VML – Vector Markup Language
CSS – Cascading Style Sheets
HTML – Hypertext Markup Language
PX – Pixel
XMLNS – Extensible Markup Language Name Space
SCSS – Sassy Cascading Style Sheets
SASS – Syntactically Awesome Stylesheet
GSAP – GreenSock Animation Platform
VSC – Visual Studio Code
33
7 Popis slika
Slika 1 - SVG koordinatni sustav............................................................................................................................. 5
Slika 2 – slika krivulje iz Primjera 8. Obje putanje imaju iste koordinate s time da je plava linija nacrtana naredbom
L a crvena linija je nacrtana naredbom Q. ............................................................................................................... 9
Slika 3 - izgled crteža iz Primjera 12. .................................................................................................................... 13
Slika 4 - slika pravokutnika ispunjenog uzorkom iz primjera 13 .......................................................................... 14
Slika 5 - geometrijski oblici za ilustraciju 1 .......................................................................................................... 19
Slika 6 - izgled prve ilustracije .............................................................................................................................. 22
Slika 7 - izgled druge ilustracije ............................................................................................................................ 27
Slika 8 - izgled putanje iz primjera 25 ................................................................................................................... 29
Slika 9 - konačni izgled 3. ilustracije ..................................................................................................................... 31
8 Popis tablica
Tablica 1 - atributi linije .......................................................................................................................................... 9
Tablica 2 - atributi ispune ...................................................................................................................................... 10
Tablica 3 - funkcije za transformaciju ................................................................................................................... 12
34
9 Popis primjera
Primjer 1 – korijenski <SVG> element ................................................................................................................... 6
Primjer 2 - crtanje osnovne linije ............................................................................................................................. 6
Primjer 3 - crtanje višestruke linije .......................................................................................................................... 6
Primjer 4 - crtanje poligona ..................................................................................................................................... 7
Primjer 5 - crtanje pravokutnika .............................................................................................................................. 7
Primjer 6 - crtanje kružnice...................................................................................................................................... 7
Primjer 7 - crtanje elipse .......................................................................................................................................... 7
Primjer 8 - crtanje krivulja elementom <path> ........................................................................................................ 8
Primjer 9 - najjednostavniji <text> element .......................................................................................................... 10
Primjer 10 - primjer upotrebe elementa <g> ......................................................................................................... 11
Primjer 11 - primjer primjene elemenata <defs> i <use> ...................................................................................... 11
Primjer 12 - transformacije .................................................................................................................................... 12
Primjer 13 - primjena uzorka ................................................................................................................................. 14
Primjer 14 - osnovna struktura linearnog gradijenta sa dvije boje ........................................................................ 14
Primjer 15 - primjer primjene filtera „feGaussianBlur” na JPG datoteku ............................................................. 16
Primjer 16 - definicija stila unutar elementa <style> i primjena na elementu <rect> ........................................... 17
Primjer 17 - kod HTML datoteke unutar koje su smještene SVG ilustracije ........................................................ 18
Primjer 18 - element <style> iz ilustracije 1 .......................................................................................................... 20
Primjer 19 - definicija linearnog gradijenta za ispunu pozadine ........................................................................... 20
Primjer 20 - završni dio prve ilustracije u kojem su iscrtani grafički elementi. .................................................... 22
Primjer 21 - element <defs> unutar kojega su definirane putanje za valovitu liniju i ribu ................................... 23
Primjer 22 - stilovi za drugu ilustraciju ................................................................................................................. 24
Primjer 23 - iscrtavanje grafičkih elemenata u ilustraciji 2 ................................................................................... 26
Primjer 24 - element <style> u 3. ilustraciji .......................................................................................................... 28
Primjer 25 - putanja koja nam je poslužila kao maska i podloga za sjenu ............................................................ 28
Primjer 26 - kombinacija filtera feFlood i feBlend................................................................................................ 29
Primjer 27 - kombinacija filtera feOffset i feGaussianBlur ................................................................................... 29
Primjer 28 - definicija isječka ................................................................................................................................ 30
Primjer 29 - definicija maske ................................................................................................................................. 30
Primjer 30 - iscrtavanje grafičkih elemenata 3. ilustracije .................................................................................... 31
35
10 Literatura
[1] D. Duce, I. Herman i B. Hopgood, »SVG tutorial,« u Proceedings of the WWW2002 Conference, 2002.
[2] D. Duce, I. Herman i B. Hopgood, »Web 2D Graphics File Formats,« Computer Graphics Forum, svez. 21,
br. 1, pp. 43-64, 2002.
[3] J. Watson, »What makes Flash so insecure and what are the alternatives?,« 8 June 2017. [Mrežno].
Available: https://www.comparitech.com/blog/information-security/flash-vulnerabilities-security/.
[4] D. Bogaard, R. P. Vullo i C. D. Cascioli, »Better than HTML Web: Dynamically Generated SVG Web
sites,« 2021.
[5] M. Rebrović, Programska podrška za dvodimenzijsku grafiku na web-u, Zagreb: SVEUČILIŠTE U

ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA, 2008.
[6] D. Dailey, J. Frost i D. Strazzullo, Building Web Applications with SVG, Microsoft Press, 2012.
[7] L. Jusheng, SVG 3D Graphical Presentation for Web-based Applications, Gloucestershire: University of
Gloucestershire, 2015.
[8] A. Bellamy-Royds, B. Brinza, C. Lilley, D. Schulze, D. Storey i E. Willigers, »Scalable Vector Graphics
(SVG) 2,« W3C, 4 10 2018. [Mrežno]. Available: https://www.w3.org/TR/SVG2/. [Pokušaj pristupa 5 2
2023].
[9] »Chapter 1: Introduction,« W3C, [Mrežno]. Available: https://www.w3.org/TR/SVG/intro.html.
[10] »XML Syntax Rules,« IBM Corporation, 3 11 2022. [Mrežno]. Available:

https://www.ibm.com/docs/en/scbn?topic=syntax-xml-rules.
[11] J. Jenkov, »SVG svg element,« 3 1 2015. [Mrežno]. Available: https://jenkov.com/tutorials/svg/svg-

element.html.
[12] D. Kirasić, »XML tehnologija i primjena u sustavima procesne informatike,« u Proceedings of the 28th
International Convention, Rijeka, 2005.
[13] J. Jenkov, »SVG Coordinate System,« 14 9 2014. [Mrežno]. Available:

https://jenkov.com/tutorials/svg/svg-coordinate-system.html.
[14] J. D. Eisenberg i A. Bellamy-Royds, SVG Essentials, Sebastopol: O’Reilly Media, Inc., 2015.
[15] P. Cook, Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation, Leanpub, 2022.
[16] »SVG 1.1 (Second Edition) – 16 August 2011, 5 Document Structure,« W3C, 16 8 2011. [Mrežno].
Available: https://www.w3.org/TR/SVG11/struct.html#DefsElement. [Pokušaj pristupa 11 2 2023].
[17] J. Jenkov, »SVG Transformation,« 10 3 2021. [Mrežno]. Available: https://jenkov.com/tutorials/svg/svg-

transformation.html. [Pokušaj pristupa 12 2 2023].
[18] A. Bellamy-Royds i K. Cagle, SVG Colors, Patterns & Gradients, Sebastopol: O’Reilly Media, Inc., 2016.
[19] A. Bellamy-Royds, K. Cagle i D. Storey, Using SVG with CSS3 and HTML5, Sebastopol: O’Reilly Media,
Inc., 2018.
36
[20] O. Jite-Orimiono, »A complete guide to using CSS filters with SVGs,« LogRocket, 22 6 2022. [Mrežno].
Available: https://blog.logrocket.com/complete-guide-using-css-filters-svgs/#filter-primitives. [Pokušaj
pristupa 16 2 2023].
[21] R. Larsen, Mastering SVG, Birmingham: Packt Publishing, 2018.
[22] A. Bellamy-Royds, K. Cagle i D. Storey, »Using SVG with CSS3 and HTML5 — Supplementary Material,«
O'Reilly Media, [Mrežno]. Available: https://oreillymedia.github.io/Using_SVG/guide/style.html.
[23] A. H. Watt, Designing SVG Web Graphics, Pearson Education, 2001.
[24] S. Drasner, SVG Animations, Sebastopol: O’Reilly Media, 2017.
[25] S. Soueidan, »Styling And Animating SVGs With CSS,« SMASHING MAGAZINE, 3 11 2014. [Mrežno].
Available: https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/. [Pokušaj
pristupa 18 2 2023].
37

Napredni Web Dizajn Seminar Nikola - Ozanic VER2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Napredni Web Dizajn Seminar Nikola - Ozanic VER2

Uploaded by

Copyright:

Available Formats

TEHNIČKO VELEUČILIŠTE U ZAGREBU

POLITEHNIČKI SPECIJALISTIČKI DIPLOMSKI STUDIJ

Seminarski rad iz kolegija Napredni Web Dizajn

2 Nastanak i razvoj SVG-a ................................................................................................... 4

2.1 Verzije kroz povijest .................................................................................................. 4

3 SVG – struktura i osnovni elementi ................................................................................... 5

3.1 SVG koordinatni sustav ............................................................................................. 5

3.2 Korijenski element ..................................................................................................... 6

3.3 Osnovni oblici ............................................................................................................ 6

VIŠESTRUKA LINIJA ..................................................................................................... 6

3.4 Ispune i linije.............................................................................................................. 9

3.5 Tekst unutar SVG-a ................................................................................................. 10

3.6 Element <g> ............................................................................................................. 10

3.7 Elementi <defs> i <use> .......................................................................................... 11

3.10 Gradijenti ................................................................................................................. 14

3.11 Filteri ........................................................................................................................ 14

3.12 Maske i isječci.......................................................................................................... 16

3.13 Stilovi ....................................................................................................................... 16

3.14 Animacije ................................................................................................................. 17

4 Praktični dio ..................................................................................................................... 18

4.1 Ilustracija 1 „trokuti2.svg” ....................................................................................... 18

4.2 Ilustracija 2 „linije2.svg” ......................................................................................... 23

4.3 Ilustracija 3 „skoljke.svg” ........................................................................................ 27

7 Popis slika ........................................................................................................................ 34

8 Popis tablica ..................................................................................................................... 34

9 Popis primjera .................................................................................................................. 35

• slikovne datoteke zauzimaju puno memorije i dugo su se učitavale zbog slabe

2.1 Verzije kroz povijest

3 SVG – struktura i osnovni elementi

• Svi SVG dokumenti moraju imati korijenski element.

3.1 SVG koordinatni sustav

parametra Y krećemo se prema dolje.

Slika 1 - SVG koordinatni sustav

<svg xmlns=“http://www.w3.org/2000/svg“ width=“200” height=“200”>

3.3 Osnovni oblici

U SVG-u ravnu liniju crtamo upotrebom elementa <line> atributima x1 i y1 definiramo

<line x1=“0” x2=“100” y1=“50” y2=“70” />

Ukoliko želimo nacrtati višestruku i izlomljenu liniju, upotrebljavamo element <polyline>. Za

<polyline points=“0 100, 50 70, 60 40, 20 0” />

Za crtanje poligona koristi se element <polygon>, on je vrlo sličan elementu <polyline>, s

<polygon points=“0 100, 50 70, 60 40, 20 0” />

Pravokutnik se u SVG-u crta upotrebom elementa <rect>. Atributima x i y definiramo

<rect x=“0” y=“0” width=“100” height=“50” rx=“10” ry=“10” />

Za crtanje kružnica koristi se element <circle>. Atributima cx i cy definiraju se koordinate

<circle cx=“100” cy=“100” r=“50” />

Elipsa se crta elementom <ellipse>, kao i kod kružnice atributima cx i cy definiraju se

<ellipse cx=“100” cy=“100” rx=“50” ry=“20” />

Naredbe koje se koriste prilikom definiranja atributa d u elementu <path>

M – naredba moveto – njome se pomičemo na točku koja je određena koordinatama koji se

3.4 Ispune i linije

naziv atributa opis

stroke Njime definiramo boju linije.

Služi za definiranje prozirnosti, vrijednost se kreće od 0 do 1,

stroke-linejoin Njime definiramo oblik uglova poligona ili spojenih linija.

To je atribut koji definira ograničenje omjera duljine kuta i

naziv atributa opis

fill Njime definiramo boju ispune, zadan vrijednost je crna.

Služi za definiranje prozirnosti ispune, vrijednost se kreće od 0

Ovaj atribut može imati dvije vrijednosti nonzero i evenodd,

3.5 Tekst unutar SVG-a

<text x=“20” y=“30”>Tekstualni sadržaj</text>

3.6 Element <g>

3.7 Elementi <defs> i <use>