Vaata skaleeritavat vektorgraafikat (SVG)
Trükimeedias on laialdaselt kasutatud vektorgraafikat. Veebisaidil saame lisada ka vektorgraafika SVG või Skaalautuva vektorgraafika. Viidates ametlikule kirjeldusele W3.orgis, kirjeldatakse SVG-d järgmiselt:
Keel kahemõõtmelise graafika kirjeldamiseks XML-is. SVG võimaldab kolme tüüpi ßgraafilisi objekte: vektorgraafilisi kujundeid (nt sirgeid ja kõveraid sisaldavad teed), pilte ja teksti.
See on tegelikult olnud alates 1999. aastast ja alates 16. augustist 2011 sai sellest W3C soovitus. Samas on SVG ikka veel märkimisväärselt kasutamata, samas kui vektori asemel kasutatakse veebipõhise graafiku või pildi esitamiseks palju eeliseid vektori asemel..
SVG eelised
Veebilehtede graafika teenindamise ajal pakub SVG Bitmapiga võrreldes mõningaid eeliseid, millest mõned sisaldavad järgmist:
Resolutsioon Sõltumatu
Bitmap / raster graafik sõltub eraldusvõimest - see on üles ehitatud pikslitele. Graafika kuvatakse pikslina, kui seda muudetakse teatud suumitasemel. See ei juhtu vektorgraafikaga, mis on olemuselt iseseisev resolutsioon, sest graafik on väljendatud matemaatilise võrrandiga, mis teeb selle skaleeritav mis tahes suumi tasemel, säilitades samal ajal kvaliteedi, isegi võrkkesta ekraanil.
HTTP taotluse vähendamine
SVG-d saab sisse lülitada otse HTML-dokumendiga svg silt, mistõttu ei pea brauser esitama graafiku esitamise taotlust. Selle tulemuseks on ka veebisaidi parema koormuse jõudlus.
Stiilimine ja skriptimine
Põimimine otse svg tag võimaldab meil ka graafilist stiili CSS-i kaudu lihtsalt kujundada. Me saame muutke objekti omadusi nagu taustavärv, läbipaistmatus, piirid jne, samamoodi nagu tavalise HTML-märgisega. Samamoodi saame ka graafikat manipuleerida JavaScripti kaudu.
Võib olla animeeritud ja redigeeritud
SVG-objekti saab animeerida, kui ta kasutab animatsioonielementi või JavaScripti raamatukogu nagu jQuery. SVG objekti saab redigeerida ka mis tahes tekstikoodiredaktoriga või graafilise tarkvaraga, nagu Inkscape (mis on tasuta) või Adobe Illustrator.
Väiksem faili suurus
SVG-l on Bitmapiga võrreldes väiksem faili suurus, millel on sarnane graafiline esitlus.
Põhiliste kujundite joonistamine SVG-ga
Spetsifikaadi järgi saame joonistada mõned põhilised kujundid nagu ristkülik, ring, joon, ellipsi, polüline ja hulknurk SVG-ga ja selleks, et brauser saaks SVG-graafiku muuta, tuleb kõik need graafilised elemendid sisestada silt. Vaadake lähemalt allpool toodud näiteid:
Rida
Joonistamiseks rida SVG-s saame kasutada
Nagu eespool näete, on rea alguspunkti koordinaat väljendatud kahe esimese atribuudiga x1 ja x2, kui rea lõpp-punkti koordinaat on väljendatud y1 ja y2.
On ka veel kaks atribuuti insult ja löögilaius mida kasutatakse vastavalt piiride värvi ja piiri laiuse määramiseks. Teise võimalusena saame määratleda ka need atribuudid inline stiilis, näiteks:
lõpuks teeb see sama.
- Kuva demo “Rida”
Polyline
See on peaaegu sarnane
punktid atribuudid, mis talletavad kõik jooned moodustavad koordinaadid.
- Kuva demo “Polyline”
Ristkülik
Sellega on samuti lihtne joonistada ristküliku
- Kuva demo “Ristkülik”
Ring
Võime ka joonistada ringi 100 raadius, mis on defineeritud r atribuut:
Kaks esimest atribuuti, cx ja cy määravad ringi keskkoordinaadi. Ülaltoodud näites oleme seadnud 102 mõlemad x ja y koordinaat, kui neid atribuute pole täpsustatud, 0 võetakse vaikeväärtuseks.
- Kuva demo “Ring”
Ellipse
Me võime joonistada ellipsi x joone raadius ja y joone raadius koos rx ja ry atribuut;
- Kuva demo “Ellipse”
Hulknurk
Koos
- Kuva demo “Hulknurk”
Vector Graphic Editori kasutamine
Nagu näete, on lihtsate objektide SVG-ga joonistamine HTML-is üsna lihtne. Ent kui objekt muutub keerulisemaks, ei ole see praktika enam ideaalne ja annab sulle peavalu.
Õnneks, nagu me eelpool mainitud oleme, on võimalik kasutada vektorgraafikut Adobe Illustrator või Inkscape tööd teha. Kui olete tarkvaraga tuttav, on nende GUI-ga esemete tegemine kindlasti lihtsam kui graafika ise HTML-märgisega kodeerida.
Kui te töötate Inkscape'iga, saate salvestada oma vektorgraafiku tavalise SVG-ks ja avada see tekstikoodi redaktoris. Nüüd peaksite leidma failis SVG-koodid. Kopeerige kõik koodid ja kleepige need HTML-dokumendi sisse.
Või võite lisada ka .svg faili ühe neist elementidest; embed, iframe ja objekti, näiteks;
Tulemused on lõpuks samad.
Selles näites kasutan seda Apple iPodit OpenClipArt.org'ist.
- Kuva demo “iPod”
Brauseri tugi
Mis puudutab brauseri tuge, siis SVG-d on kõigis suuremates brauserites väga hästi toetatud, välja arvatud IE8 ja varem. Kuid seda küsimust saab lahendada selle JavaScripti teegiga, mida nimetatakse Raphael.js. Lihtsamaks muutmiseks kasutame seda tööriista, ReadySetRaphael.com, et muuta meie SVG-kood Raphaeli toetatud vorminguks. Siin on, kuidas.
Esiteks, alla laadida ja lisada Raphael.js teie HTML-dokumendile. Seejärel laadige üles .svg kopeerige ja kleepige genereeritud kood järgmise koorma sees funktsiooni;
window.onload = funktsioon () // Raphaeli kood siit
Sisse keha märkige järgmine div koos rsr id atribuut;
See ongi, sa oled valmis. Vaadake näidet allolevast lingist.
- Kuva demo “Raphael”
Lõplikud mõtted
See on SVG põhitõed. Loodame, et teil on selle teema kohta õiglane arusaam. See on parim viis oma saidi optimeerimiseks mis tahes ekraani eraldusvõime jaoks, isegi kui seda kasutatakse võrkkesta ekraanil.
Nagu alati, kui olete seikluslik inimene, oleme siin veel mõned viited ja arutelud selle teema sügavamaks muutmiseks.
- Sissejuhatus SVG - W3 koolidesse
- Eraldusvõime sõltumatu SVG - Smashing Magazine'iga
- Miks te ei kasuta SVG-d? - NetTuts
Täname lugemise eest ja loodame, et see postitus meeldis.
- Kuva demo
- Allalaadimise allikas
