Uvođenje SVG-a na web stranicu
SVG, kao grafički format, suštinski predstavlja sliku i kao takav se i može uvesti na HTML stranicu. Pošto se SV beleži kao XML format, može se uvesti i kao eksterni objekat ili XML ostrvo. Da bi se grafika prikazala na ispravan način, potrebno je ispravno podesiti viewport i viewbox.
Ako imamo već gotovu SVG sliku a nemamo neke spcijalne potrebe, koristićemo <img> element kome prosto zadajemo URL slike i eventualno širinu i visinu. Pod "specijalnim potrebama" se misli da želimo kasnije da menjamo sliku na stranici (dodajemo elemente, menjamo boje i sl). SVG slike takođe možemo koristiti i preko CSS-a kao pozadine.
-- KAO SLIKA:
<img src="url" width="širina" height="visina />
-- KAO POZADINA:
background-image: url("url putanja"
Ovakva SVG grafika se u web čitaču ponaša potpuno isto kao bilo koja druga slika.
SVG sliku možemo uvesti i kao eksterni objekat, korišćenjem <object> elementa. Na prvi pogled, dobićemo isti rezultat kao kada koristimo oznaku <img>, međutim, u ovom slučaju pomoću JavaScripta možemo manipulisati unutrašnjim elementima SVG-a. Ovo nam je bitno kada želimo da naša grafika bude interaktivna, kao npr. grafikoni koji zavise od unetih podataka.
<object data="URL" type="image/svg+xml">
Tekst koji se vidi ako web čitač ne podržava SVG
</object>
Konačno, web čitač će se snaći i ako SVG uvedemo kao XML "ostrvo" u HTML-u. Na taj način su svi elementi SVG grafike integrisani u sam HTML. Nema nikakvog dodatnog fajla sa slikom - slika je deo HTML-a. Ovo bi bilo isto kao kada bismo otvorili SVG fajl u tekst editoru i kopirali ceo sadržaj unutar HTML dokumenta.
U ovom slučaju koristimo element <svg> (koji inače ne postoji u HTML standardu). Ako želimo baš sve po pravilima, treba da zadamo i xmlns parametar (XML namespace) koji upućuje web čitač na specifikaciju XML "aplikacije" kao što je SVG, gde je definisan standard. On predstavlja osnovni element SVG dokumenta (slično kao što se HTML dokument nalazi unutar elementa <html>).
<svg xmlns="http://www.w3.org/2000/svg">
...SVG elementi
</svg>
<svg>
...SVG elementi
</svg>
Ovaj način je pogodan ako želimo ručno da ubacimo grafičke elemente ili da ih programski kreiramo "od nule".
Primer: Uvođenje SVG-a na web stranicu
Evo primera kako bismo uveli SVG grafiku kao običnu sliku, kao sliku u pozadini i kao XML "ostrvo" na stranici. Kada koristimo ovaj poslednji pristup, možemo sami da kreiramo elemente grafike, direktno u HTML-u.
<style>
.blok {
background-color: #fff;
background-size: 30px;
/* SVG SLIKA U POZADINI PREKO CSS-a */
background-image: url("img/pic-green-alien.svg");
}
</style>
<h2>SVG KAO OBIČNA SLIKA</h2>
<p style="text-align:center;">
<img src="img/pic-green-alien.svg" height="260" width="400" />
</p>
<h2>SLIKA U POZADINI</h2>
<div class="blok">SLIKA U POZADINI</div>
<h2>SVG KAO XML OSTRVO</h2>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" fill="#900" />
</svg>
Kao što vidimo, unutar svg elementa koristimo elemenat circle, koji (sasvim logično) predstavlja krug. Zadali smo mu koordinate centra i poluprečnik, a opciono smo dodali i boju, koja se zadaje na isti način kao boje u CSS-u.
SVG viewport i viewbox
Kao štpo smo videli, bez obzira da li je unutar HTML stranice ili kao eksterni dokument, elementi SVG grafike se uvek navode unutar elementa <svg>. Svi grafički objekti koji se nalaze unutar slike, zadaju se putem koordinata u 2D prostoru, gde je koordinatni početak gore-levo. Ovaj 2D prostor je praktično neograničen, onosno mogu se zadati pozitivne ili negativne koordinate bilo koje veličine.
Zbog toga što možemo da se odlučimo za razne moguće dimenzije, kada želimo da prikažemo SVG, moramo da zadamo šta se vidi i koje je veličine. Deo naše SVG slike koji se prikazuje definišemo kao viewbox. Viewbox zadajemo preko 4 numeričke vrednosti, odvojene razmacima. Prve dve predstavljaju koordinate početka, a druge dve širinu i visinu. Dakle zadaje se kao:
<svg viewbox="x y širina visina">
Tako smo definisali odsečak SVG slike koji se prikazuje. Već znamo da se kod vektorske grafike slika može prikazivati u bilo kojoj veličini. Tako deo koji smo izabrali za prikaz, možemo prikazati koliko god veliki želimo da bude.
Veličina prikaza SVG slike se definiše kao viewport i zadaje se kroz dva parametra - width i height. Ove veličine mogu biti obične numeričke vrednosti (tada predstavljaju piksele), a mogu imati i CSS jedinicu mere (pt, em...)
<svg width="širina" height="visina" viewbox="x y širina visina">
Ako ne zadamo width i height, odnosno viewport, web čitač će prikazati SVG grafiku tako da zauzme koliko god ima slobodnog mesta (po širini). Sa druge strane, ako ne zadamo viewbox, podrazumevaće se koordinatni početak (0,0) i širina i visina jednake viewportu (dakle, onoliko koliko smo zadali u width i height).
Možda uviđate, a možda i ne u čemu bi mogao da bude problem. Ako se ne poklope proporcije viewboxa i viewporta, slika može biti deformisana. To nije nešto što obično želimo. Kada nacrtamo krug, želimo da on i bude prikazan kao krug, a ne kao elipsa. Srećom, postoji i parametar koji vodi računa o tome - preserveAspectRatio. On može imati velik broj kombinacija vrednosti, pa ćemo se sada pozabaviti njima.
Web čitač se prilično brine oko ovih stvari, tako da ako ništa ne zadamo, slika se neće deformisati, već će da "sedne" u sredinu viewporta. Inače, objekti koje nacrtamo van viewboxa neće biti "sasečeni" tamo gde je viewport veći - i oni će se videti.
U stvari, jedini način da "zeznemo" proporcije je ako parametru preserveAspectRatio zadamo vrednost none. Ovo je ujedno i najjednostavnija vrednost koju možemo zadati.
<svg width="..." height="..." viewbox="..." preserveAspectRatio="none">
Kada zadamo none to u stvari znači da će se ivice viewboxa "lepiti" za ivice viewporta, tj. proporcije neće biti zadržane i slika će biti deformisana. Bilo koja druga vrednost znači da će se proporcije zadržati, s tim što onda mora da se odredi način kako se viewbox prikazuje unutar dimenzija viewporta.
Parametar preserveAspectRatio inače ima vrednost u obliku kombinacije dve vrednosti razdvojene razmakom. Prva definiše poziciju unutar viewporta, a druga veličinu.
<svg width="..." height="..." viewbox="..." preserveAspectRatio="pozicija veličina">
Pozicija označava gde će se naći SVG slika unutar viewporta, i zadaje se kao jedna od sledećih vrednosti:
- xMinYMin - levo u vrhu
- xMinYMid - levo na sredini
- xMinYMax - levo-dole
- xMidYMin - centrirano, u vrhu
- xMidYMid - skroz na sredini
- xMidYMax - centrirano, dole
- xMaxYMin - desno u vrhu
- xMaxYMid - desno na sredini
- xMaxYMax - desno-dole
Veličina se može zadati kao:
- meet - viewbox se prilagođava manjoj dimenziji viewporta - biće prikazan ceo, ali će u viewportu ostati "lufta"
- slice - viewbox se prilagođava većoj dimenziji viewporta - biće sve popunjeno, ali se možda neće videti cela slika
Po defaultu, vrednost je preserveAspectRatio="xMidYMid meet" - dakle, grafika će biti prikazana na sredini i videće se cela (a možda i malo više od onog što smo planirali).
Primer: Viewbox, viewport i proporcije
Počećemo prvo sa primerom u kome zadajemo samo viewport, odnosno širinu i visinu. U tom slučaju se uzima da je viewbox definisan od koordinata (0,0) sa širinom i visinom jednakom zadatom viewportu.
<svg width="300" height="200">
<circle cx="150" cy="150" r="40" fill="blue" />
</svg>
Zadali smo dimenzije SVG-a kao 300x200, pa je tako postavljen i podrazumevani viewbox.
Sada ćemo videti kako to izgleda kada zadamo viewbox i viewport.
Obratite pažnju najpre na viewbox. Prostor u kome smo odlučili da crtamo je kvadrat veličine 1, koji počinje od tačke (0,0). Dakle sve što prevazilazi veličinu 1 se neće spadati u viewbox, kao i sve što je "otišlo u minus".
E, sad, taj naš kvadrat od 0 do 1, prikazujemo kao sliku veličine 400x200 tačkica, kao što smo i naveli u parametrima width i height.
<svg width="400" height="200" viewbox="0 0 1 1">
<rect x="0" y="0" width="1" height="1" fill="#ccc" />
<circle cx="-0.10" cy="0.15" r="0.3" fill="blue" />
<circle cx="0.75" cy="0.45" r="0.35" fill="green" />
<circle cx="0.50" cy="0.75" r="0.22" fill="red" />
</svg>
Međutim web čitač neće dozvoliti da se slika deformiše. Uz to, iako smo definisali viewbox, videće se i elementi koji "ispadaju", iz viewboxa (oni koji su van sive zone), ali samo tamo gde ima mesta (u ovom slučaju levo i desno). Ovo je zbog toga što se viewbox po defaultu prilagodio manjoj stranici viewporta (ovde je to visina) - vrednost meet, i smestio na sredinu, pa je tako ostalo praznog prostora levo i desno.
Sada hoćemo da isprobamo deformaciju slike. U parametru preserveAspectRatio smo zadali vrednost none, što znači da će se onaj naš kvadrat 1x1, "razvući" na 400x200.
<svg width="400" height="200" viewbox="0 0 1 1" preserveAspectRatio="none">
<rect x="0" y="0" width="1" height="1" fill="#ccc" />
<circle cx="-0.10" cy="0.15" r="0.3" fill="blue" />
<circle cx="0.75" cy="0.45" r="0.35" fill="green" />
<circle cx="0.50" cy="0.75" r="0.22" fill="red" />
</svg>
Na slici se nalazi sivi kvadrat koji pokriva celu površinu (kao pozadina) i tri kruga. Međutim, pošto je slika razvučena, svi krugovi se vide kao elipse.
Sada ćemo pokušati da vidimo šta se dešava kada zadamo neke konkretne vrednosti za preserveAspectRatio.
<svg width="400" height="200" viewbox="0 0 1 1" preserveAspectRatio="xMinYMax slice">
<rect x="0" y="0" width="1" height="1" fill="#ccc" />
<circle cx="-0.10" cy="0.15" r="0.3" fill="blue" />
<circle cx="0.75" cy="0.45" r="0.35" fill="green" />
<circle cx="0.50" cy="0.75" r="0.22" fill="red" />
</svg>
Pošto smo zadali vrednost slice, viewbox se prilagodio većoj dimenziji viewporta (znači, širini). Inače vidimo donji deo slike zato što smo zadali i vrednost xMinYMax - znači po vertikali će slika biti "povučena" na dno. Pozicija po horizontali u ovom slučaju nije bitna, pošto je slika prilagođena širini - vidi se cela horizontzala, pozicioniranje nema efekta.