Vektorska grafika ima široku primjenu u tiskanim medijima. Na web stranici također možemo dodati SVG vektorsku grafiku (Skalabilna vektorska grafika). Pozivajući se na službenu specifikaciju na W3.org, SVG je opisan kao jezik za opisivanje dvodimenzionalne grafike u XML-u. SVG vam omogućuje stvaranje vektorskih grafičkih oblika (kao što je obris sastavljen od ravnih linija i krivulja), slika i teksta.
Prednosti SVG-a
SVG nudi nekoliko prednosti u odnosu na rasterske grafike, evo nekih od njih:
Skalabilnost
Rasterska slika sastoji se od piksela i gubi kvalitetu kad se skalira, dok vektorska grafika zadržava svoje proporcije bez obzira na skalu.
Ubrzavanje HTTP zahtjeva
SVG datoteka može se ugraditi izravno u HTML dokument pomoću svg oznake, tako da preglednik ne mora postavljati zahtjev. To dovodi do bolje performanse i manje opterećenja na stranici.
Stilizacija i skripte
Ugrađivanje svg oznake izravno u HTML dokument također nam omogućuje jednostavno postavljanje grafičkih stilova pomoću . Možemo promijeniti svojstva objekta kao što su boja pozadine, prozirnost obruba itd. Štoviše, također možemo manipulirati grafikom pomoću .
Slike se mogu animirati i uređivati
SVG objekt može se animirati korištenjem animacije elementa pomoću css-a ili JavaScript-a (JQuery). SVG objekt se može uređivati bilo kojim uređivačem teksta ili uređivačem vektorske grafike, kao što su Inkscape ili Adobe Illustrator.
Manja veličina datoteke
SVG ima manju veličinu datoteke u usporedbi s rasterskom slikom.
Stvaranje jednostavnih oblika pomoću SVG-a
Prema specifikaciji, možemo izraditi neke osnovne oblike kao što su pravokutnici, krugovi, linije, elipse, polilinije i poligoni koristeći SVG i kako bi preglednik prikazao SVG grafiku, svi ovi grafički elementi moraju biti umetnuti u oznaku označiti. Pogledajmo primjere u nastavku:
Crta
Do nacrtaj liniju u SVG-u možete koristiti element
Kao što možete vidjeti gore, početna točka linije izražena je s prva dva atributa x1 i x2, a krajnja točka koordinate linije izražena je s y1 i y2.
Postoje i druga dva atributa, potez i širina poteza, koji se koriste za definiranje boje i širine obruba. Osim toga, ove atribute također možemo definirati u inline stilu:
Style="stroke-width:1; stroke:rgb(0,0,0);"
ona završi radeći istu stvar.
izlomljena linija
Ovaj element je sličan
Pravokutnik
Crtanje pravokutnika je također lako s ovim
Krug
Također možemo nacrtati krug s
Prva dva atributa, cx i cy, definiraju koordinate središta kruga. U gornjem primjeru, stvorili smo 102 kao x i y koordinate, ako ti atributi nisu navedeni, 0 će se tretirati kao zadana vrijednost.
Elipsa
Pomoću oznake možemo nacrtati elipsu
Poligon
Korištenje elementa
Korištenje uređivača vektorske grafike
Kao što vidite, korištenje jednostavnih SVG objekata u HTML dokumentu prilično je jednostavno. Međutim, kada objekt postane složeniji, ova metoda više nije idealna.
Srećom, kao što smo gore spomenuli, možemo koristiti, na primjer, uređivač vektorske grafike Adobe Illustrator ili Inkscape .
Ako radite s Inkscapeom, možete spremiti svoje vektorske datoteke u SVG formatu i zatim ih otvoriti u uređivaču tekstualnog koda. Kopirajte sve kodove i zalijepite ih u svoj HTML dokument.
Možete ugraditi .svg datoteke pomoću oznaka embed, iframe i object, na primjer;
Rezultat će na kraju biti isti.
*U ovom primjeru koristimo sliku
Danas ćemo razgovarati o SVG-u, kakav je to format, za što se koristi i vrijedi li ga koristiti. Iako format nije osobito nov, svoju je popularnost stekao zahvaljujući svojoj implementaciji. svi najnovije verzije preglednici su već dobili podršku za ovaj format.
Zašto je toliko popularan? I što ga točno čini drugačijim od drugih? Danas ćemo odgovoriti na ova pitanja i također vam reći što trebate znati da počnete raditi s ovim vrstama datoteka.
Što je SVG?
SVG – Scalable Vector Graphics – vektorski je format za web programere. Ovaj tip format je postao toliko popularan zbog činjenice da se njegove slike mogu prikazati u visokim rezolucijama bez gubitka kvalitete, budući da je SVG vektorski format.
Poticaj za razvoj ovog jezičnog označavanja prvi je dao Konzorcij Svjetska mreža(World Wide Web Consortium), koji je 1999. godine bio poznatiji kao W3C. W3C je dao koncept SVG - označni jezik za stvaranje dvodimenzionalnog grafička sučelja i slike.
Koristiti u praksi
Što SVG čini tako popularnim i zašto ga sve više dizajnera počinje koristiti? Vrlo je jednostavno, radi kako treba.
SVG je lagan u usporedbi s drugim formatima. Ovaj format jednostavno nevjerojatne mogućnosti. Zastavice, simboli, elementi sučelja. A ovo je samo mali popis načina na koji se može koristiti. Najveća prednost korištenja je to što je vektorski format, odnosno može se koristiti na bilo kojem zaslonu - kakva god rezolucija bila, svugdje će biti jednako prikazan.
SVG datotekama prilično je lako upravljati jer se datoteke spremaju kao statična slika. Svojoj web stranici možete dodati interaktivnost izradom vrlo jednostavnih, ali lijepih animacija pomoću SVG-a.
Nekoliko primjera gdje se može koristiti:
- Logotipi
- Pozadinska slika
- Koristite kao gumb
- Kartice
- Dijagrami ili crteži
SVG se u pravilu najčešće koristi pri izradi responzivnih web stranica, animacija i drugih dinamičkih efekata.
Prednosti korištenja SVG-a
Pa zašto bismo trebali napustiti uobičajeni JPG ili GIF u korist SVG-a? Postoji nekoliko razloga zašto biste ga ipak trebali koristiti u svom projektu.
- SVG je vektorski format, zbog čega ga se isplati koristiti za responzivne stranice gdje veličina slika ovisi o razlučivosti zaslona korisnika, a SVG savršeno odgovara.
- SVG slike koriste XML za definiranje svojih svojstava i stoga imaju mogućnost još veće kompresije.
- SVG slikama vrlo je lako manipulirati, a to otvara još više mogućnosti dizajnerima koji mogu mijenjati boje, dodavati sjene, filtre, zamućenja i mnoge druge efekte.
- SVG je prilično jednostavan za razumijevanje
- SVG radi s otvorenim web standardima
- Za izradu SVG-a možete koristiti uobičajeni uređivač tekstualnog koda. To vam daje određenu slobodu u vašem djelovanju, sve ovisi o vašim potrebama i razini stručnog znanja u ovom području.
Nedostaci korištenja SVG-a
Vjerojatno ste šokirani koliko prednosti ima SVG. I možda su mislili da to nema loših strana. Ali ne, sigurno ih ima par, a evo nekih od njih:
- Ne postoji podrška za starije preglednike kao što je Explorer 8 i niži.
- SVG se ne može koristiti na fotografijama jer je to vektorski format i koristi se za stvaranje raznih oblika i linija.
Što je sljedeće?
Budućnost SVG-a tek počinje. Kao prihvaćeni format slike (i standard) za mobilne uređaje, SVG će samo nastaviti dobivati zamah.
Ovaj je post prvi u nizu članaka o SVG (Scalable Vector Graphic) koji pokrivaju osnove vektorske grafike na web mjestu.
Vektorska grafika ima široku primjenu u tiskarstvu. Za web stranice postoji SVG, koji prema službenoj specifikaciji na w3.org jest jezik za opisivanje dvodimenzionalne grafike u XML-u. SVG uključuje tri vrste objekata: oblike, slike i tekst. SVG postoji od 1999., a od 16. kolovoza 2011. uvršten je u W3C preporuke. SVG je visoko podcijenjen od strane web programera, iako ima nekoliko važnih prednosti.
Prednosti SVG-a
- Skaliranje: Za razliku od rasterske grafike, SVG ne gubi na kvaliteti kada se skalira, tako da je pogodan za korištenje za razvoj mrežnice.
- Smanjenje HTTP zahtjeva: kada koristite SVG, broj poziva prema poslužitelju se smanjuje, a brzina učitavanja stranice se povećava u skladu s tim.
- Stiliziranje i skriptiranje: pomoću CSS-a možete promijeniti grafičke postavke na web mjestu, poput pozadine, prozirnosti ili obruba.
- Animacija i uređivanje: pomoću javascripta možete animirati SVG, kao i uređivati tekst ili grafički urednik(InkScape ili Adobe Illustrator).
- Mala veličina: SVG objekti teže mnogo manje od rasterskih slika.
Osnovni SVG oblici
Prema službenoj specifikaciji, pomoću oznake SVG možete crtati jednostavne objekte: pravokutnik, krug, liniju, elipsu, poliliniju ili poligon svg.Jednostavna linija pomoću oznake crta sa samo dva parametra - početne točke (x1 i x2) i krajnje točke (y1 i y2):
Također možete dodati atribute poteza i širine poteza ili stilove za postavljanje boje i širine:
Style="stroke-width:1; stroke:rgb(0,0,0);"
izlomljena linija
Sintaksa je slična prethodnoj, koristi se oznaka polilinija, atribut bodova postavlja bodove:
Pravokutnik
Pozvan rect tagom, možete dodati neke atribute:
Krug
Poziva se oznakom krug, u primjeru pomoću atributa r postaviti radijus, cx I cy odredite koordinate centra:
Elipsa
Poziva se oznakom elipsa, radi slično krug, ali možete navesti dva radijusa - rx I ry:
Poligon
Poziva se oznakom poligon, mnogokut može imati različit broj stranica:
Korištenje urednika
Kao što možete vidjeti iz primjera, crtanje osnovnih SVG oblika je vrlo jednostavno, ali objekti mogu biti mnogo složeniji. Za njih morate koristiti uređivače vektorske grafike, kao što su Adobe Illustrator ili Inkscape, gdje možete spremati datoteke u SVG formatu i zatim ih uređivati u uređivaču teksta. Možete umetnuti SVG na stranicu koristeći embed, iframe i object:
Primjer je slika iPod-a s OpenClipArt.org.
SVG (Scalable Vector Graphics) je standard vektorske grafike koji je razvio konzorcij W3C.
SVG je označni jezik za opisivanje dvodimenzionalnih grafičkih aplikacija i slika te je podskup Extensible Markup Language XML. Ovo također uključuje brojne povezane grafičke skripte.
SVG podržavaju svi moderni preglednici za računala i mobilne telefone. Neke značajke, kao što su SMIL animacije i SVG fontovi, nisu toliko raširene.
Najnovija verzija pune specifikacije je SVG 1.1.
SVG 2 je u razvoju. Dodat će nove značajke jednostavne za korištenje za SVG, a također radi na čvršćoj integraciji s HTML-om, CSS-om i DOM-om.
Prednosti SVG-a
- SVG grafika se stvara pomoću matematičkih formula koje se mogu prilagoditi kada se promijeni veličina slike. Tako vektorske slike mjerilo bolje od rasterskih.
- Veličina vektorske slike obično je manja od usporedivih slika u formatima JPEG, GIF ili PNG.
- SVG grafika ima format teksta, koji se mogu uređivati u bilježnici ili crtati u grafičkim vektorskim uređivačima Adobe Illustrator, CorelDRAW.
- SVG skripte i animacije omogućuju vam stvaranje dinamične i interaktivne grafike.
- Tekst u SVG grafici je tekst, a ne slika, pa ga tražilice indeksiraju.
- Možete dodati više veza na SVG sliku.
- Vanjske tablice možete spojiti na SVG format CSS stilovi, globalni stilovi unutar spremnika ili dodajte interne stilove pomoću atributa stila na oznakama oblika i putanje.
Umetanje SVG u web stranicu
Postoji nekoliko načina za umetanje SVG slike u web stranicu. Prvi od njih je jednostavno umetanje SVG koda u stranicu (s velikom slikom, HTML kod stranice će postati ogroman i teško čitljiv). S drugim metodama prvo trebate spremiti SVG kod u datoteku s ekstenzijom .svg.
Dakle, evo načina za umetanje SVG slike u web stranicu:
- izravno umetanje koda u HTML dokument u spremniku ;
- korištenje SVG datoteke kao pozadinske slike;
- povezivanje SVG datoteke s HTML dokumentom pomoću oznaka img, ugraditi, objekt I iframe;
- povezivanje SVG datoteke s PHP dokumentom pomoću funkcije uključiti.
1. Izravno umetanje SVG koda u web dokument
2. Korištenje SVG datoteke kao pozadinske slike
3. Povezivanje SVG datoteke pomoću img oznake
