Seminar - SVG

SVG - Scalable Vector Graphics

SVG je jezik za opis 2D vektorske grafike u XML-u.

• prikaz bogatih grafičkih sadržaja za web
• 3 tipa grafičkih objekata
  •    oblici vektorske grafike
  •    slike
  •    tekst
• objekti mogu biti grupirani, stilizirani, transformirani, u kompoziciji
• SVG grafika ne gubi kvalitetu kod zumiranja i promjene veličine elemenata
• svaki element i atribut može biti animiran
• SVG integrira druge W3C standarde kao što je DOM, XSL...
• SVG je W3C preporuka - posljednja verzija 2011.g. SVG 1.1

Scalable Vector Graphics

Scalable - ravnomjerno povećavati ili ravnomjerno smanjivati
Može se interpretirati kao "ne biti ograničen"

Vector - sadrži geometrijske objekte (linije, krivulje...)
Veća fleksibilnost u usporedbi s rasterskim formatima.

Graphics - SVG nudi bogate strukturirane opise vektorske i mješane vektorsko rasterske grafike.
Može se koristiti kao "stand-alone" ili kao XML namespace.

SVG koncepti

• Grafički objekti
• Simboli
• Rasterski efekti
• Fontovi
• Animacije

SVG prednosti

• SVG slika može biti kreirana i editirana u bilo kojem text editoru
• Može se pretraživati, indeksirati, komprimirati, skriptirati
• SVG slike su skalabilne
• Mogu se printati u bilo kojoj rezoluciji s visokom kvalitetom
• Mogu se zumirati bez degradacije
• SVG je otvoreni standard
• SVG datoteka je čisti XML
• SVG se koristi u suradnji s drugim standardima (DOM, XSL)

SVG i CANVAS

Canvas crta grafiku "on the fly" koristeći JavaScript. Možemo reći da je Canvas "ovisan" o JavaScriptu.
Canvas se renderira pixel po pixel što za posljedicu ima problem ponovnog iscrtavanja. Browser "zaboravlja" nacrtanu grafiku te ako se pozicija nekog elementa promijeni (ili njegova veličina), potrebno je kompletnu scenu ponovno iscrtavati.

                CANVAS
                    - Ovisan o rezoluciji
                    - Nema podrške za event handlere
                    - Loša sposobnost renderiranja teksta
                    - Slika se može spremiti kao .png ili .jpg
                    - Dobar za graphic-intensive igre

                SVG
                    - Neovisan o rezoluciji
                    - Podrška za event handlere
                    - Najbolji za aplikacije s velikim područjem renderiranja (G Maps)
                    - Sporo renderiranje (DOM)
                    - Nije pogodan za igre

                

SVG i HTML5

HTML5 pruža podršku za Inline SVG.
To znači da je moguće uključiti SVG direktno u web stranicu putem <svg> taga.

SVG Styling

SVG koristi stilska svojstva za opis mnogih parametara dokumenta.
Svojstva definiraju kako će se grafički elementi sadržaja renderirati.
Svojstva se koriste za:

• Parametre koji se jasno prikazuju u prirodi
• parametre koji se koriste kod teksta(font-family, font-size)
• Parametre koji utječu na način kako su grafički elementi renderirani

SVG dijeli mnoga svojstva stilova sa CSS-om i XSL-om.

Koordinatni sustav i transformacije

SVG canvas - prostor gdje se SVG sadržaj renderira
SVG viewport - vidljivo područje gdje korisnik vidi SVG sadržaj

Viewport coordinate system = user coordinate system

Ishodište sustava nalazi se u gornjem lijevom kutu. Jedinica kojim se mjeri prostor je 1 pixel. Podržane jedinice su: em, ex, px, pt, pc, cm, mm, in, %

Transformacije koje se mogu izvoditi su rotacije, iskrivljenja, skaliranja i translacije
Transformacijom možemo uspostaviti koordinatni sustav korisnika bilo gdje u SVG dokumentu.

path element

Path prezentira obris oblika koji može biti ispunjen.
Drugačije interpretirano, path prezentira geometriju obrisa nekog objekta, definiranog u smislu moveto , lineto , curveto, arc ili closepath.

Put ili staza se definira uključujući "path" element koji sadrži d=("path data") atribut.
Path data može biti bilo koja vrijednost ili niz vrijednosti od sljedećih:
M = moveto, L = lineto, H = horizontal lineto, V = vertical lineto,  C = curveto, S = smooth curveto, Q = quadratic Bézier curve,  T = smooth quadratic Bézier curveto, A = elliptical Arc, Z = closepath

SVG osnovni oblici

• Pravokutnik (rect)
  
• Krug (circle)
  
• Elipsa (ellipse)
  
• Linija (line)
  
• Polilinija (polyline)
  
• Mnogokut (polygon)
  

Napomena: primjeri preuzeti s W3Schools tutoriala.

Ostale mogućnosti SVG-a

• painting(filling, stroking, marker)
• tekst
• boje
• gradijenti
• predlošci (patterns)
• clipping, masking, compositing
• filterski efekti
• interaktivnost
• povezivanje (linking)
• scripting
• animacije
• fontovi

Ove mogućnosti SVG-a su zanimljive i vrlo lako se nauče.
Rad s bojama, gradijentom, filterima, efekti nad tekstom, fontovi čine SVG korisnijim.

Ovdje nisu prikazani detalji svake pojedine mogućnosti, ali svatko koga ovi elementi zanimaju usmjerit ću na par linkova koji ih detaljnije opisuju i objašnjavaju:

• Painting
• SVG text
• Gradient and patterns
• Clipping and Masking
• Filter Effects
• Interactivity

Animacije

Jedno od zanimljivijih stvari koje pruža SVG sasvim sigurno su animacije.
Animacije se mogu izvoditi na 2 načina. Putem ugrađenog animate elementa, ili koristeći skripte.

Više o animacijama u SVG-u može se pronaći ovdje.

Primjeri SVG animacija

Jednostavan primjer animacije koji koristi <animate> tag.


Izvor

Još jedan jednostavan primjer:

Izvor