Pogled u skalabilnu vektorsku grafiku (SVG)
Vektorska grafika široko se primjenjuje u tiskanim medijima. Na web stranici možemo dodati vektorsku grafiku sa SVG ili Skalabilna vektorska grafika. Pozivajući se na službene specifikacije na W3.org, SVG je opisan kao:
Jezik za opisivanje dvodimenzionalne grafike u XML-u. SVG omogućuje tri tipa ßgrafskih objekata: vektorske grafičke oblike (npr. Staze koje se sastoje od ravnih linija i krivulja), slike i tekst.
To je zapravo bilo od 1999. godine i od 16. kolovoza 2011. postalo je preporuka W3C-a. Ipak, SVG je još uvijek prilično nedovoljno iskorišten, dok za posluživanje grafike ili slike na web-mjestu ima mnogo prednosti u korištenju vektorske nego Bitmapove..
SVG Prednosti
U smislu posluživanja grafike na web-lokacijama, SVG nudi nekoliko prednosti u odnosu na Bitmap, od kojih neke uključuju:
Neovisna rezolucija
Bitmap / raster grafika je rezolucija ovisna - ona je izgrađena na pikselima. Prikazane grafike izgledat će pikselirane kad se promijene na određenoj razini zumiranja. To se ne događa vektorskoj grafici, koja je u prirodi neovisna o rezoluciji, jer se grafika izražava matematičkom jednadžbom koja ga čini mogućnost skaliranja na bilo kojoj razini zumiranja uz održavanje kvalitete, čak i na retina zaslonu.
Smanjenje HTTP zahtjeva
SVG se može ugraditi izravno u HTML dokument s svg tako da preglednik ne mora napraviti zahtjev za posluživanje grafike. To također rezultira boljom izvedbom učitavanja za web-lokaciju.
Styling i skriptiranje
Ugrađivanje izravno s svg tag također će nam omogućiti da jednostavno stiliziramo grafiku putem CSS-a. Možemo promijenite svojstva objekta kao što su boja pozadine, neprozirnost, granice, itd. na isti način kao i kod uobičajene HTML oznake. Slično tome, možemo manipulirati i grafikom putem JavaScripta.
Može se animirati i uređivati
SVG objekt može biti animiran kada koristi element animacije ili kroz JavaScript biblioteku poput jQuery. SVG objekt može se uređivati s bilo kojim uređivačem tekstualnog koda ili grafičkim softverom kao što je Inkscape (koji je besplatan) ili Adobe Illustrator.
Manja veličina datoteke
SVG ima manju veličinu datoteke u odnosu na Bitmap, koja ima sličan grafički prikaz.
Crtanje osnovnih oblika pomoću SVG-a
Prema specifikacijama, možemo nacrtati neke osnovne oblike kao što je pravokutnik, krug, crta, elipsa, polilinija i poligon sa SVG-om i kako bi preglednik mogao prikazati SVG grafiku, svi ti grafički elementi moraju biti umetnuti unutar označiti. Da vidimo primjere u nastavku za više pojedinosti:
Crta
Crtati redak u SVG možemo koristiti
Kao što možete vidjeti gore, koordinata početne točke linije izražava se s prva dva atributa x1 i x2, dok se koordinata krajnje točke linije izražava s Y1 i y2.
Postoje i dva druga atributa: udar i udar širine koji se koriste za definiranje boje i širine granice. Alternativno, te atribute možemo definirati i unutar umetnutog stila, na primjer:
na kraju samo radi isto.
- Prikaži demo “Crta”
Alat za linije
Gotovo je sličan
bodova atribute koji pohranjuju sve koordinate koje tvore linije.
- Prikaži demo “Alat za linije”
pravokutnik
Crtanje pravokutnika također je jednostavno
- Prikaži demo “pravokutnik”
Krug
Također možemo nacrtati krug s 100 radijus koji je definiran s r atribut:
Prva dva atributa, CX i cy definiraju središnju koordinatu kruga. U gornjem primjeru smo postavili 102 oboje za x i y koordinate, ako ti atributi nisu specificirani, 0 će se uzeti kao zadana vrijednost.
- Prikaži demo “Krug”
Elipsa
Možemo nacrtati elipsu x radijus linije i y radijus linije s rx i ry atribut;
- Prikaži demo “Elipsa”
Poligon
Sa
- Prikaži demo “Poligon”
Korištenje Vector Graphic Editor
Kao što možete vidjeti, crtanje jednostavnih objekata sa SVG-om u HTML-u vrlo je jednostavno. Međutim, kada objekt postane složeniji, ta praksa više nije idealna i pružit će vam glavobolju.
Srećom, kao što smo već spomenuli, možemo koristiti uređivač vektora Adobe Illustrator ili Inkscape obaviti posao. Ako ste upoznati s ovim softverom, zasigurno je puno lakše crtati objekte pomoću njihovog grafičkog korisničkog sučelja, a ne sami kodirati grafički u HTML oznaci.
Ako radite s Inkscapeom, možete spremiti svoju vektorsku grafiku kao običan SVG, a zatim je otvoriti u uređivaču tekstualnog koda. Sada bi trebali pronaći SVG kodove u datoteci. Kopirajte sve kodove i zalijepite ih u HTML dokument.
Ili, također možete ugraditi .svg provesti kroz jedan od ovih elemenata; ugraditi, iframe i objekt, na primjer;
Rezultati će na kraju biti isti.
U ovom primjeru koristim ovaj Apple iPod s OpenClipArt.org.
- Prikaži demo “iPod”
Podrška za preglednik
Što se tiče podrške za preglednike, SVG je vrlo dobro podržan u svim većim preglednicima, osim u IE8 i ranije. Ali ovo se pitanje može riješiti ovom JavaScript bibliotekom, nazvanom Raphael.js. Kako bismo olakšali stvari, koristit ćemo ovaj alat, ReadySetRaphael.com za pretvaranje SVG koda u Raphael-podržan format. Evo kako.
Prije svega, preuzmite i uključite Raphaël.js u svoj HTML dokument. Zatim prenesite .svg datoteku na web-lokaciju, kopirajte i zalijepite generirani kod unutar sljedećeg opterećenja funkcija;
window.onload = function () // ovdje dolazi Raphaelov kôd
Unutar tijelo stavite sljedeće div s RSR atribut id;
To je to, gotovi ste. Pogledajte primjer na donjoj vezi.
- Prikaži demo “Raphael”
Završne misli
To su osnove za SVG. Nadamo se da sada imate pošteno razumijevanje ove teme. To je najbolji način da optimizirate svoju web-lokaciju za bilo koju razlučivost zaslona, čak i za korištenje na retina zaslonu.
Kao i uvijek, ako ste avanturistička osoba, ovdje smo stavili još nekoliko referenci i diskusiju da dublje proučimo ovu temu..
- Uvod u SVG - W3 škole
- Rezolucija neovisna uz SVG - Smashing Magazine
- Zašto ne koristite SVG? - NetTuts
Hvala za čitanje i nadamo se da ste uživali u ovom postu.
- Prikaži demo
- Preuzimanje izvora
