Ieskats mērogojamā vektora grafikā (SVG)
Drukātajos plašsaziņas līdzekļos ir plaši izmantotas vektorgrafikas. Tīmekļa vietnē varam pievienot arī vektorgrafiku ar SVG vai Scalable Vector Graphic. Atsaucoties uz oficiālo specifikāciju W3.org, SVG ir aprakstīts kā:
Valoda, kas apraksta divdimensiju grafiku XML formātā. SVG ļauj izmantot trīs veidu ßgrafiskos objektus: vektorgrafiskas formas (piemēram, ceļus, kas sastāv no taisnām līnijām un līknēm), attēlus un tekstu.
Tas faktiski ir bijis kopš 1999. gada, un no 2011. gada 16. augusta tas kļuva par W3C ieteikumu. Tomēr SVG joprojām ir ievērojami nepietiekams, turpretim, izmantojot vektoru, nevis Bitmap, ir daudz priekšrocību, lai tīmekļa vietnē attēlotu grafiku vai attēlu..
SVG priekšrocības
Sniedzot grafiku tīmekļa vietnēs, SVG piedāvā dažas priekšrocības salīdzinājumā ar Bitmap, no kurām dažas ietver:
Rezolūcija Neatkarīga
Bitmap / rastra grafika ir atkarīga no izšķirtspējas - tā ir balstīta uz pikseļiem. Grafika, kas tiek rādīta, izskatījās pixelated, kad tā tiek mainīta noteiktā tālummaiņas līmenī. Tas nenotiek vektora grafikā, kas ir raksturs neatkarīgi, jo grafika ir izteikta ar matemātisku vienādojumu, kas to padara mērogojams jebkurā tālummaiņas līmenī, vienlaikus saglabājot kvalitāti, pat tīklenes displejā.
HTTP pieprasījuma samazināšana
SVG var ievietot tieši HTML dokumentā ar svg tāpēc pārlūkprogrammai nav nepieciešams pieprasīt grafiskā attēla apkalpošanu. Tas arī nodrošina labāku tīmekļa vietnes slodzes veiktspēju.
Stils un skripts
Iekļaušana tieši ar svg Tag arī ļaus mums stilu grafiku viegli, izmantojot CSS. Mēs varam mainīt objektu rekvizītus piemēram, fona krāsa, necaurredzamība, robežas utt. tāpat kā ar HTML tagu. Līdzīgi mēs varam arī manipulēt ar grafiku, izmantojot JavaScript.
Var tikt animēts un rediģēts
SVG objektu var animēt, ja tas izmanto animācijas elementu vai JavaScript bibliotēku, piemēram, jQuery. SVG objektu var rediģēt arī ar jebkuru teksta kodu redaktoru vai grafisku programmatūru, piemēram, Inkscape (kas ir bezmaksas) vai Adobe Illustrator.
Mazāks faila lielums
SVG ir mazāks faila lielums, salīdzinot ar Bitmap, kam ir līdzīgs grafiskais noformējums.
Pamatformu zīmēšana ar SVG
Saskaņā ar spec, mēs varam izdarīt dažas pamata formas, piemēram, taisnstūris, aplis, līnija, elipse, polilons un daudzstūris ar SVG un, lai pārlūks padarītu SVG grafiku, visi šie grafiskie elementi jāievieto tag. Lai iegūtu sīkāku informāciju, skatiet tālāk minētos piemērus:
Līnija
Zīmēt līnija SVG mēs varam izmantot
Kā redzams iepriekš, līnijas sākuma punkta koordinācija ir izteikta ar diviem pirmajiem atribūtiem x1 un x2, kamēr līnijas beigu punkta koordinātas tiek izteiktas ar y1 un y2.
Ir arī divi citi atribūti insults un gājiena platums kas tiek izmantoti, lai definētu robežas krāsu un robežas platumu. Varat arī definēt šos atribūtus inline stilā, piemēram:
tas galu galā vienkārši dara to pašu.
- Skatīt demonstrāciju “Līnija”
Polyline
Tas ir gandrīz līdzīgs
punktus atribūti, kas saglabā visas koordinātas, kas veido līnijas.
- Skatīt demonstrāciju “Polyline”
Taisnstūris
Ar šo ir vienkāršs taisnstūra zīmējums
- Skatīt demonstrāciju “Taisnstūris”
Aplis
Mēs varam arī zīmēt apli ar 100 rādiuss, kas definēts ar r atribūts:
Pirmie divi atribūti, cx un cy definē apļa centrālo koordinātu. Iepriekšējā piemērā mēs esam iestatījuši 102 gan par x un y koordinēt, ja šie atribūti nav norādīti, 0 tiks uzskatīta par noklusējuma vērtību.
- Skatīt demonstrāciju “Aplis”
Ellipse
Mēs varam izdarīt elipse x līnijas rādiuss un y līnijas rādiuss ar rx un ry atribūts;
- Skatīt demonstrāciju “Ellipse”
Daudzstūris
Ar
- Skatīt demonstrāciju “Daudzstūris”
Izmantojot vektoru grafisko redaktoru
Kā redzat, vienkāršu objektu zīmēšana ar SVG HTML ir diezgan vienkārša. Tomēr, kad objekts kļūst sarežģītāks, šī prakse vairs nav ideāla un sniegs jums galvassāpes.
Par laimi, kā jau iepriekš minēts, mēs varam izmantot vektoru grafisko redaktoru Adobe Illustrator vai Inkscape veikt darbu. Ja esat iepazinies ar šīm programmām, ir daudz vieglāk zīmēt objektus ar to GUI, nevis kodēt grafiku sev HTML tagā.
Ja strādājat ar Inkscape, jūs varat saglabāt savu vektorgrafiku kā vienkāršu SVG, un pēc tam atveriet to teksta koda redaktorā. Tagad failā ir jāatrod SVG kodi. Kopējiet visus kodus un ielīmējiet tos savā HTML dokumentā.
Vai arī varat iegult .svg failu, izmantojot kādu no šiem elementiem; iegult, iframe un objektu, piemēram;
Rezultāti būs vienādi.
Šajā piemērā es izmantoju šo Apple iPod no OpenClipArt.org.
- Skatīt demonstrāciju “iPod”
Pārlūka atbalsts
Attiecībā uz pārlūkprogrammas atbalstu SVG ir ļoti labi atbalstīts visās galvenajās pārlūkprogrammās, izņemot IE8 un agrāk. Taču šo jautājumu var atrisināt ar šo JavaScript bibliotēku, ko sauc par Raphael.js. Lai padarītu lietas vieglāk, mēs izmantosim šo rīku, ReadySetRaphael.com, lai pārvērstu SVG kodu Raphael atbalstītajā formātā. Lūk, kā.
Pirmkārt, lejupielādējiet un ietveriet Raphael.js bibliotēku HTML dokumentam. Pēc tam augšupielādējiet .svg failu, kopējiet un ielīmējiet ģenerēto kodu šādā slodzē funkciju;
window.onload = funkcija () // Raphael kods iet šeit
Iekšpusē ķermeni atzīmējiet, ievietojiet šādu div ar rsr id atribūts;
Tieši tā, jūs esat pabeidzis. Apskatiet piemēru no tālāk redzamās saites.
- Skatīt demonstrāciju “Raphaels”
Galīgās domas
Tātad tas ir SVG pamati. Mēs ceram, ka tagad jums ir taisnīga izpratne par šo tēmu. Tas ir labākais veids, kā optimizēt jūsu vietni jebkurai ekrāna izšķirtspējai, pat izmantošanai tīklenes displejā.
Kā vienmēr, ja jūs esat piedzīvojumu cilvēks, šeit mēs esam ievietojuši vēl dažas atsauces un diskusijas, lai padziļinātu šo tēmu.
- Ievads SVG-W3 skolās
- Izšķirtspēja neatkarīgi no SVG - Smashing Magazine
- Kāpēc jūs neizmantojat SVG? - NetTuts
Paldies, ka lasāt, un mēs ceram, ka jums patiks šis ieraksts.
- Skatīt demonstrāciju
- Lejupielādēt avotu
