Poglej v prilagodljivo vektorsko grafiko (SVG)
Vektorska grafika je bila široko uporabljena v tiskanih medijih. Na spletni strani lahko dodamo tudi vektorsko grafiko s SVG ali Scalable Vector Graphic. Sklicujoč se na uradne specifikacije na W3.org, je SVG opisan kot:
Jezik za opisovanje dvodimenzionalne grafike v XML. SVG omogoča tri vrste ßgrafskih objektov: vektorske grafične oblike (npr. Poti, ki jih sestavljajo ravne črte in krivulje), slike in besedilo.
Dejansko je že od leta 1999 in od 16. avgusta 2011 je postal priporočilo W3C. Vendar pa je SVG še vedno precej premajhno izkoriščena, medtem ko je uporaba Vektorja namesto Bitmapa veliko prednosti za prikazovanje grafike ali slike na spletnem mestu..
Prednosti SVG
Če uporabljamo grafike na spletnih mestih, SVG ponuja nekaj prednosti pred Bitmapom, med katerimi so:
Resolucija neodvisna
Bitmap / rastrska grafika je odvisna od ločljivosti - zgrajena je na slikovnih pikah. Prikazane grafike bodo videti, ko bodo spremenjene na določeno stopnjo povečave. To se ne zgodi vektorski grafiki, ki je v naravi neodvisna od ločljivosti, saj je grafika izražena z matematično enačbo, ki jo naredi prilagodljiva pri vseh stopnjah povečave, pri tem pa ohranja kakovost, celo na zaslonu Retina.
Zmanjšanje HTTP zahteve
SVG je mogoče vdelati neposredno v dokument HTML svg tako, da brskalnik ne potrebuje zahteve za prikazovanje grafike. To ima za posledico tudi boljšo učinkovitost nalaganja za spletno mesto.
Styling in Scripting
Vdelava neposredno z svg Tag nam bo tudi omogočil, da zlahka prekrijemo grafiko s pomočjo CSS. Mi lahko spremenite lastnosti objekta kot so barva ozadja, motnost, meje itd., enako kot običajno oznako HTML. Podobno lahko grafiko manipuliramo tudi prek JavaScripta.
Lahko se animira in ureja
Objekt SVG lahko animirate, ko uporablja element animacije ali prek knjižnice JavaScript, kot je jQuery. Objekt SVG lahko urejate tudi z urejevalnikom besedilne kode ali grafično programsko opremo, kot je Inkscape (ki je brezplačen) ali Adobe Illustrator.
Manjša velikost datoteke
SVG ima manjšo velikost datoteke kot Bitmap, ki ima podobno grafično predstavitev.
Risanje osnovnih oblik s SVG
Glede na specifikacije lahko narišemo nekaj osnovnih oblik, kot je pravokotnik, krog, črta, elipse, polilinijo in mnogokotnik z SVG in da bi brskalnik lahko upodobil sliko SVG, je treba vse te grafične elemente vstaviti v oznaka. Za več podrobnosti si oglejte spodnje primere:
Črta
Risati vrstico v SVG lahko uporabimo
Kot lahko vidite zgoraj, se koordinata začetne točke vrstice izrazi s prvima dvema atributoma x1 in x2, medtem ko je koordinata končne točke črte izražena s y1 in y2.
Obstajata tudi dva druga atributa: kap in širina hoda ki se uporabljajo za določanje barve meje oziroma širine obrobe. Lahko pa definiramo tudi te atribute znotraj vgrajenega sloga, na primer:
sčasoma zgodi enako.
- Prikaži predstavitev “Črta”
Polyline
To je skoraj podobno
točk atribute, ki shranjujejo vse koordinate, ki tvorijo črte.
- Prikaži predstavitev “Polyline”
Pravokotnik
S tem je tudi preprosto risanje pravokotnika
- Prikaži predstavitev “Pravokotnik”
Krog
Lahko tudi narišemo krog z 100 polmer, ki je določen z r atribut:
Prva dva atributa, cx in cy določajo srednjo koordinato kroga. V zgornjem primeru smo nastavili 102 oboje za x in y koordinate, če ti atributi niso določeni, 0 bo privzeta vrednost.
- Prikaži predstavitev “Krog”
Elipsa
Z njo lahko narišemo elipso x polmer linije in. \ t y polmer linije s rx in ry atribut;
- Prikaži predstavitev “Elipsa”
Poligon
Z
- Prikaži predstavitev “Poligon”
Uporaba grafičnega urejevalnika Vector
Kot lahko vidite, je risanje enostavnih objektov s SVG v HTML precej enostavno. Vendar, ko je predmet bolj zapleten, ta praksa ni več idealna in vam bo dala glavobol.
Na srečo, kot smo že omenili, lahko uporabimo vektorskega grafičnega urejevalnika Adobe Illustrator ali Inkscape opraviti delo. Če ste seznanjeni s to programsko opremo, je veliko lažje narisati predmete z grafičnim uporabniškim vmesnikom in ne sami kodirati grafike v oznako HTML..
Če delate z Inkscape, vektorsko grafiko lahko shranite kot navaden SVG in jo nato odprete v urejevalniku besedilne kode. Sedaj morate najti kode SVG v datoteki. Kopirajte vse kode in jih prilepite v dokument HTML.
Lahko pa tudi vdelate .svg prek enega od teh elementov; vdelati, iframe in predmet, na primer;
Rezultati bodo na koncu enaki.
V tem primeru uporabljam ta Apple iPod z OpenClipArt.org.
- Prikaži predstavitev “iPod”
Podpora za brskalnik
Glede podpore brskalniku je SVG zelo dobro podprt v vseh večjih brskalnikih, razen v IE8 in starejših. Vendar je to mogoče rešiti s to knjižnico JavaScript, imenovano Raphael.js. Da bi olajšali stvari, bomo uporabili to orodje, ReadySetRaphael.com, da pretvorimo našo kodo SVG v format, ki ga podpira Raphael. Evo kako.
Najprej prenesite in vključite Raphael.js v dokument HTML. Nato prenesite .svg datoteko na spletno mesto, kopirajte in prilepite ustvarjeno kodo znotraj naslednje obremenitve funkcijo;
window.onload = function () // tukaj je Raphaelova koda
V notranjosti telo oznako, postavite naslednje div z rsr atribut id;
To je to, končali ste. Oglejte si primer na spodnji povezavi.
- Prikaži predstavitev “Raphael”
Končne misli
To so osnove za SVG. Upamo, da zdaj imate pošteno razumevanje te teme. To je najboljši način za optimizacijo vašega spletnega mesta za vsako ločljivost zaslona, tudi za uporabo na zaslonu retine.
Kot vedno, če ste pustolovska oseba, smo tu postavili še nekaj referenc in razpravo, da bi poglobili to temo..
- Uvod v šole SVG - W3
- Resolucija neodvisna s SVG - Smashing Magazine
- Zakaj ne uporabljate SVG? - NetTuts
Hvala za branje in upamo, da ste uživali v tej objavi.
- Prikaži predstavitev
- Prenesi vir
