HTML5 - SVG

Šta je SVG?

Scalable Vector Graphics (SVG) je format slike zasnovan na XML-u koji se koristi za definisanje dvodimenzionalne vektorske grafike za web. Za razliku od rasterske slike npr. .jpg, .gif, .png itd., vektorska slika se može povećati ili smanjiti u bilo kojoj mjeri bez gubitka kvaliteta slike. SVG slika izvlači se pomoću niza naredbi koje slijede XML šemu - što znači da se SVG slike mogu kreirati i uređivati bilo kojim uređivačem teksta, kao što je Notepad++. Postoji nekoliko drugih prednosti upotrebe SVG-a u odnosu na druge formate slika kao što su: JPEG, GIF, PNG itd.

  • SVG slike mogu se pretraživati, indeksirati, skriptirati i kompresovati.
  • SVG slike mogu se kreirati i modifikovati pomoću JavaScript u stvarnom vremenu.
  • SVG slike mogu se prikazati u visokom kvalitetu u bilo kojoj rezoluciji.
  • SVG sadržaj se može animirati pomoću ugrađenih elemenata animacije.
  • SVG slike mogu da sadrže hiperveze do drugih dokumenata.

Ugrađivanje SVG-a u HTML stranice

Možete ugraditi SVG grafiku direktno u dokument pomoću HTML5 <svg> elementa. Pogledajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcioniše: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ugrađivanje SVG u HTML stranicu</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <text x="10" y="20" style="font-size:14px;">
            Vaš pretraživač podržava SVG.
        </text>
        Žao nam je, vaš pretraživač ne podržava SVG.
    </svg>
</body>
</html>

Crtanje putanje i oblika pomoću SVG-a

Sljedeći dio objasniće vam kako crtati osnovne staze i oblike zasnovane na vektorima web stranica pomoću novopredstavljenog HTML5 <svg> elementa.


Crtanje linija

Najosnovnija putanja koju možete nacrtati pomoću SVG-a je ravna linija. Sljedeći primjer će vam pokazati kako stvoriti ravnu liniju pomoću SVG <line> elementa: 

<svg width="300" height="200">
    <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stvaranje liniju pomoću HTML5 SVG</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
    </svg>
</body>
</html>

Atributi x1, x2, y1 i y2 elementa <line> povlače liniju od (x1, y1) do (x2, y2).


Crtanje pravougaonika

Možete stvoriti jednostavne oblike pravougaonika i kvadrata pomoću SVG <rect> elementa. Sljedeći primjer će vam pokazati kako stvoriti i oblikovati pravougaonik pomoću SVG: 

<svg width="300" height="200">
    <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kreiranje pravougaonika pomoću HTML5 SVG</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
    </svg>
</body>
</html>

Atributi x i y elementa <rect> definišu koordinate gornjeg lijevog ugla pravougaonika. Atributi width i height određuju širinu i visinu oblika.


Crtanje kruga

Takođe možete stvoriti oblike kruga pomoću SVG elementa <circle>. Sljedeći primjer će vam pokazati kako stvoriti i oblikovati krug pomoću SVG-a: 

<svg width="300" height="200">
    <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kreiranje kruga pomoću HTML5 SVG</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
    </svg>
</body>
</html>

Atributi cx i cy elementa <circle> definišu koordinate središta kruga, a atribut r specifikuje radijus kruga. Međutim, ako su atributi cx i cy izostavljeni ili nisu navedeni, središte kruga postavljeno je na (0,0).


Crtanje teksta pomoću SVG

Takođe možete crtati tekst na web stranicama pomoću SVG-a. Tekst u SVG-u prikazuje se kao grafika, tako da na njega možete primijeniti svu grafičku transformaciju, ali on i dalje djeluje poput teksta. To znači da ga korisnik može odabrati i kopirati kao tekst. Pokušajmo na primjeru da vidimo kako ovo funkcioniše: 

<svg width="300" height="200">
    <text x="20" y="30" style="fill:purple; font-size:22px;">
        Dobrodošli na sajt IT TUTORIJALI!
    </text>
    <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
       Ovdje ćete naći puno korisnih informacija.
    </text>
</svg>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Renderovanje tekst sa HTML5 SVG</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <text x="20" y="30" style="fill:purple; font-size:22px;">
            Dobrodošli na sajt IT TUTORIJALI!
        </text>
        <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
            Ovdje ćete naći puno korisnih informacija.
        </text>
    </svg>
</body>
</html>

Atributi x i y elementa <text> definišu lokaciju gornjeg lijevog ugla u apsolutnom smislu, dok atributi dx i dy specifikuju relativnu lokaciju. Možete čak koristiti element <tspan> za preoblikovanje ili premještanje raspona teksta koji se nalazi u elementu <text>. Tekst je sadržan u odvojenim tspans, ali unutar istog elementa teksta. Može se odjednom odabrati sve - kada klikom i povlačenjem odaberete tekst. Međutim, tekst u zasebnim elementima ne može se odabrati istovremeno. Pogledajmo primjer: 

<svg width="300" height="200">
    <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
        <tspan style="fill:purple; font-size:22px;">
            Dobrodošli na sajt IT TUTORIJALI!
        </tspan>
        <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
            Ovdje ćete naći puno korisnih informacija.
        </tspan>
    </text>
</svg>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rotiranje i prikazivanje tekst pomoću HTML5 SVG</title>
<style>
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
            <tspan style="fill:purple; font-size:22px;">
                Dobrodošli na sajt IT TUTORIJALI!
            </tspan>
            <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
                Ovdje ćete naći puno korisnih informacija.
            </tspan>
        </text>
    </svg>
</body>
</html>

Razlike između SVG i Canvas

HTML5 je predstavio dva nova grafička elementa <canvas> i <svg> za stvaranje bogate grafike, ali oni se bitno razlikuju. Sljedeća tabela sažima neke osnovne razlike između ova dva elementa, što će vam pomoći da shvatite kako te elemente učinkovito i prikladno koristiti.

SVG Canvas
Vektorski (sastavljen od oblika). Raster (sastavljen od piksela).
Višestruki grafički elementi, koji postaju dio DOM stabla stranice. Pojedinačni element sličan ponašanju elementa <img>. Dijagram platna (canvas) može se sačuvati u PNG ili JPG formatu.
Izmjene su moguće putem skripte i CSS-a. Izmjene su moguće samo putem skripte.
Dobre mogućnosti prikazivanja teksta. Loše mogućnosti prikazivanja teksta.
Omogućava bolje performanse sa manjim brojem predmeta ili većom površinom ili oboje. Omogućava bolje performanse sa većim brojem predmeta ili manjom površinom ili oboje.
Bolja skalabilnost. Može se štampati visokokvalitetno u bilo kojoj rezoluciji. Pikselacija se ne javlja. Loša skalabilnost. Nije pogodno za ispis na većoj rezoluciji. Može doći do pikselacije.