Napredni Web Dizajn 3

Napredni veb-dizajn
SVG format
Šta ćete naučiti na ovom času
● Upotreba SVG formata u HTML dokumentima
SVG format
SVG (Scalable Vector Graphics)
● Format vektorske slike koji je osmislio W3C za potrebe
prikazivanja vektorske grafike na vebu
SVG format
● Vektorska grafika, SVG format:
– skaliranje bez gubitka kvaliteta
– veličina dokumenta uglavnom manja u odnosu na ekvivalent
u rasterskom obliku
● SVG upotreba:
– gotove ilustracije (slike) – HTML, CSS
– animirane slike (CSS, JS)
– interaktivne slike (CSS, JS)
● Vektorska slika je fleksibilnija od rasterske
SVG format
● SVG je tekstualni XML bazirani format
● Primer SVG slike:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="25" y="25" width="200" height="200"
fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100"
stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue"
stroke-width="4" />
</svg>
SVG format
● SVG slika se sastoji od elemenata oblika (eng. shape elements):
– linija ( line )
– krug ( circle )
– pravougaonik ( rect )
– putanja ( path )
● Izgled elemenata se određuje preko atributa:
– za ivice ( stroke, stroke-width )
– za ispunu ( fill )
● Ovakav način organizacije slike omogućava pristupiti uz pomoć CSS-a i
JavaScript-a.
SVG format
● Crtanje u tekst editoru, kucanjem kȏda, nije uvek
praktično, zato se koriste programi za vektorsko
crtanje kao što su:
– Inkscape
– Adobe Illustrator
● Specifikacija SVG formata nalazi se na adresi:
https://www.w3.org/TR/2011/REC-SVG11-
20110816/
SVG i HTML
SVG sliku možemo dodati u HTML dokument na tri
načina:
– referenciranjem kao i svake druge slike (<img>)
– uključivanjem SVG kȏda. tzv. inline način (<svg>)
– referenciranjem kao objekta upotrebom
<object> , <embed> ili <iframe> elemenata
Referenciranje SVG slike
Sliku možemo referencirati kao i rastersku sliku, upotrebom <img> oznake:
<img src=“slika.svg“ alt=“Vektorska slika“>
Možemo je referencirati i u CSS kȏdu, na primer kao pozadinsku sliku:
h1 {backgorund-image: url('slika.svg')}
Prilikom referenciranja slike kao spoljnjeg dokumenta treba obratiti pažnju da
je definicija za namespace i verziju obavezna. To su atributi u početnoj
<svg> oznaci:
version="1.1" xmlns="http://www.w3.org/2000/svg"
Kada uključujemo SVG sliku referenciranjem na ovaj način onda ne možemo
da utičemo na njen sadržaj putem CSS-a ili JavaScript-a koji se nalazi u
HTML dokumentu
Inline uključivanje SVG slike
SVG kȏd direktno mešamo sa HTML kȏdom. SVG kȏd se stavlja unutar <svg/> oznaka na ono
mesto gde želimo da se pojavi slika. Definisanje xmlns i version atributa nije potrebno. Primer:
<body>
<svg viewBox="0 0 200 400" width="200" height="400">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<polygon points="0,0 0,400 200,200" filter="url(#f1)" />
</svg>
</body>
Ovaj način štedi jedan poziv serveru, i otvara mogućnost da manipulišemo elementima slike preko
CSS-a i JavaScript-a koji se nalazi u HTML dokumentu
Definisanje veličine slike
Atributi za određivanje veličine SVG slike su:
– width – konačna širina slike za prikaz na ekranu.
Dodatno, vrši se odsecanje slike, ako nije definisano
vidno polje
– height – konačna visina slike za prikaz na ekranu.
Dodatno, vrši se odsecanje slike, ako nije definisano
vidno polje
– viewbox – vidno polje slike. Područje u slici koje će se
prikazati na ekranu
Definisanje veličine slike
Ako veličina slike (width ili height) nije definisana slika će se
raširiti koliko joj kontekst dozvoljava. Primer upotrebe atributa:
<svg width="80" height="80">
<svg width="80" height="80" viewBox="0 0 80 80">
<svg width="80" height="80" viewBox="0 0 180

180">
Referenciranje SVG kao objekta
● Ovaj način referenciranja omogućava da se delovi
SVG slike registruju kao objekti DOM-a
<object type="image/svg+xml" data="shapes2.svg"></object>

Napredni veb-dizajn
Stilizacija SVG formata
Šta ćete naučiti na ovom času
● Različiti načini stilizacije SVG slike i njenih delova
Manipulacija SVG slike uz pomoć
CSS-a
Ako smo dodali SVG sliku preko <img> elementa onda
možemo da utičemo na nju dodavanjem svojstva za <img>
element. I tada utičemo na celu sliku
Kada je SVG kȏd uključen u HTML dokument, onda
manipulišemo celom slikom dodavanjem svojstva za <svg>
element, i imamo mogućnost uticaja na elemente koji čine sliku
Kada je SVG slika dodata preko <object> elementa imamo
iste mogućnosti kao kada je SVG kȏd uključen u HTML
dokument
CSS-a
Za stilizaciju unutrašnjih delova (elemenata) SVG
slike, kada je dodata kao <svg> element, razlikujemo
dva pristupa:
– unutar SVG kȏda:
● style atribut SVG strukturalnih elemenata
● <style/> element u okviru <svg> elementa
– izvan SVG kȏda – klasični ugrađeni ili spoljni CSS

CSS-a
Stilizacija unutar SVG kȏda style atribut:
<svg viewBox="25 25 225 225">
<rect x="25" y="25" width="200" height="200"
fill="lime" stroke-width="4" stroke="pink"
style="fill: yellow; stroke: blue; stroke-width: 3"/>
<polyline points="50,150 50,200 200,200 200,100"
stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue"
stroke-width="4" />
</svg>
CSS-a
Stilizacija unutar SVG kȏda style element:
<svg viewBox="20 20 225 225">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4"
stroke="pink"/>
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-
width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
stroke="pink"/>
<style>
rect {fill: yellow; stroke: blue; stroke-width: 3}
</style>
</svg>
CSS-a
Stilizacije izvan SVG kȏda
<head>
<style>
rect {fill: yellow; stroke: blue; stroke-
width: 3}
rect:hover {fill: red;}
</style>
</head>
Ovde smo dodali i hover stanje. Delove SVG slike možemo da
tretiramo isto kao i da su to HTML elementi
CSS-a
● Kada je slika dodata preko <img> elementa kȏd za
stilizaciju unutar SVG dokumenta će raditi, ali spoljni
CSS neće
● Kada je slika dodata preko <object> elementa onda
radi i unutrašnji i spoljni CSS. Spoljni CSS u SVG
dokumentu referenciramo na sledeći način:
<?xml-stylesheet href="stil.css" type="text/css"?>
CSS-a
● Primer spoljnog CSS-a referenciranog unutar SVG
dokumenta:
<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<svg viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg">
<rect x="200" y="100" width="600" height="300"/>
</svg>
CSS-a
● SVG slika se može menjati i medija upitima, tako da
se jedna verzija slike prikaže za mobilne uređaje, a
druga tablet itd.
Napredni veb-dizajn
Animiranje SVG slike
Animiranje SVG slike
● Moguće je primeniti principe CSS keyframe animacije i CSS
tranzicija na SVG elemente
● Razlozi za animiranje SVG elemenata mogu biti različiti. Ako je
SVG slika deo interfejsa veb-aplikacije, mogu se dodati suptilne
CSS tranzicije da bi se naglasila interaktivnost elemenata, za
animiranje ikona ili iskoristiti SVG sliku kao animiranu reklamu koja
se savršeno skalira za sve veličine prozora internet pregledača
● Primer animacije:
http://codepen.io/chrisgannon/post/my-first-svg-banner-ad
http://codepen.io/shshaw/pen/JDEsG
Primena tranzicija na SVG element
Stilizacija unutar SVG kȏda style element:
<svg viewBox="20 20 225 225">
stroke="pink"/>
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-
width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
stroke="pink"/>
<style type="text/css">
rect {fill: yellow; stroke: blue; stroke-width: 3;transition: 1s all;}
</style>
</svg>
Priprema slike za animaciju
Pre nego se animiraju SVG slike potrebno ih je pripremiti da bi animacija bila lakša i
uopšte moguća. Priprema se vrši na osnovu ideje kako će biti konkretno animirani
sami delovi, pa usled toga mogu postojati neki specifični zahtevi. No, određene
pripreme su univerzalne:
– objekti koji se kreću trebaju biti razdvojeni – na konačnoj vizuelnoj prezentaciji
oblici mogu izgledati kao da su razdvojeni, ali ovo je potrebno učiniti na nivou
entiteta
– koristiti slojeve – SVG format podržava slojeve (eng. layers). Slojevi se mogu
koristiti za grupaciju, odnosno razdvajanje entiteta
– izbaciti nepotrebne elemente (geometriju) – ostaviti samo one entitete koji čine
sliku, sve ostalo obrisati i na taj način smanjiti veličinu datoteke i olakšati animaciju
– kad god je moguće koristiti osnovne oblike ( rect , circle ) umesto path
elementa
Priprema slike za animaciju
– ukupna dimenzija SVG slike treba biti onolika koliko prostora
zauzima sam sadržaj u njoj – sav višak i beline oko sadržaja slike
ukloniti. Smanjiti sliku na minimalnu dimenziju
– imenovati slojeve i elemente na smislen način – imenovani elementi
dobijaju ID atribute koji kasnije mogu biti korisni za CSS selektore
– upotrebiti programe za optimizaciju SVG kȏda – moguća je pojava
nepotrebnih podataka koje programi za rad sa vektorskom grafikom
upisuju u SVG datoteku. Ove podatke treba ukloniti. Ako se koristi
program Inkscape sliku snimiti u „plain SVG“ formatu
Sve ove pripreme i optimizacije mogu se obaviti u programu za rad sa
vektorskom grafikom ili editovanjem u tekst editoru
Interna SVG animacija
● Pored upotrebe CSS-a za animiranje delova SVG
slike, sama SVG specifikacija omogućava animiranje
preko animate elementa
● Uz pomoć programa Blender moguće se napraviti
animirani SVG crtež, koji može zameniti ulogu
animacioni GIF-a
Napredni veb-dizajn
Alati za rad sa SVG slikom
Programi za kreiranje SVG slike
● Inkscape – https://inkscape.org
● Adobe Illustrator
Online alati za optimizaciju
● https://jakearchibald.github.io/svgomg/
● https://petercollingridge.appspot.com/svg-editor
JavaScript biblioteke za rad sa SVG
● http://snapsvg.io/
● http://svgjs.com/
● https://dmitrybaranovskiy.github.io/raphael/
Dodatak za izvoz SVG animacije iz
Adobe After Effects
● https://aescripts.com/bodymovin/
● http://airbnb.io/lottie/
Korisne veze
● SVG tutorijal i objašnjenja
http://tutorials.jenkov.com/svg/index.html
Pitanja za proveru znanja
● Šta je SVG format?
● Kako uključujemo SVG sliku u HTML dokument?
● Kako se definiše veličina slike?
● Kako sve možemo da stilizujemo SVG sliku uz pomoć
CSS-a?
● Koja je razlika između referenciranja slike uz pomoć
<img> elementa i <object> elementa?
Najava sledećeg časa
● HTML elementi za multimediju

Napredni Web Dizajn 3

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 3

Uploaded by

Copyright:

Available Formats

Napredni veb-dizajn

<svg width="80" height="80">

<svg width="80" height="80" viewBox="0 0 80 80">

<svg width="80" height="80" viewBox="0 0 180

<object type="image/svg+xml" data="shapes2.svg"></object>

● <style/> element u okviru <svg> elementa

– izvan SVG kȏda – klasični ugrađeni ili spoljni CSS

You might also like