Priekšrocības, izmantojot Scalable Vector Graphics
Scalable Vector Graphics jeb SVG, šodien spēlē svarīgu lomu mājas lapas dizains. Ja jūs pašlaik neizmantojat SVG savā tīmekļa dizaina darbā, šeit ir daži iemesli, kāpēc jums vajadzētu sākt to darīt, kā arī kļūdas, ko var izmantot vecākām pārlūkprogrammām, kuras neatbalsta šos failus.
Izšķirtspēja
SVG lielākais ieguvums ir izšķirtspējas neatkarība. Tā kā SVG faili ir vektorgrafika, nevis pikseļu bāzes rastra attēli, tos var mainīt, nezaudējot attēla kvalitāti. Tas ir īpaši noderīgi, ja veidojat jutīgas tīmekļa vietnes, kurām ir jāizskatās labi un jāstrādā arī dažādos ekrāna izmēros un ierīcēs .
SVG failus var palielināt vai samazināt, lai pielāgotos jūsu pielāgojamās vietnes mainīgajiem izmēriem un izkārtojuma vajadzībām, un jums nav jāuztraucas par tām grafikām, kuru kvalitāte ir apgrūtināta.
Faila lielums
Viens no uzdevumiem, izmantojot rastra attēlus (JPG, PNG, GIF) uz atsaucamām vietnēm, ir šo attēlu faila lielums. Tā kā rastra attēli nespēj mērogot tā, kā darbojas šī vektors, jums jāpiegādā attēli, kuru pamatā ir pikseļi, pēc lielākā izmēra, kurā tie tiks parādīti. Tas ir tāpēc, ka jūs vienmēr varat padarīt attēlu mazāku un saglabāt tā kvalitāti, bet tas pats neattiecas uz attēlu lielāku izgatavošanu. Gala rezultāts ir tas, ka jums bieži ir attēli, kas ir daudz lielāki nekā tie tiek rādīti personas ekrānā, kas nozīmē, ka viņi lieki piespiest lejupielādēt ļoti lielu failu.
SVG risina šo problēmu. Tā kā vektorgrafika ir pielāgojama, jums var būt ļoti mazi faila izmēri, neatkarīgi no tā, cik lieli šie attēli var tikt parādīti. Tas galu galā pozitīvi ietekmēs vietnes kopējo veiktspēju un lejupielādes ātrumu.
CSS stils
SVG kodu var pievienot arī tieši lapas HTML. Tas ir pazīstams kā "inline SVG." Viens no iegultiem, izmantojot inline SVG, ir tas, ka, tā kā grafika faktiski izveido pārlūks, pamatojoties uz jūsu kodu, nav nepieciešams veikt HTTP pieprasījumu, lai ielādētu attēla failu. Vēl viens ieguvums ir tas, ka inline SVG var veidot ar CSS.
Nepieciešams mainīt SVG ikonas krāsu? Tā vietā, lai atvērtu šo attēlu kāda veida rediģēšanas programmatūrā, un eksportēt un augšupielādēt failu vēlreiz, varat vienkārši mainīt SVG failu ar dažām CSS rindiņām.
Jūs varat arī izmantot citus CSS stilus SVG grafikā, lai tos mainītu uz kursoru stāvokļiem vai noteiktām dizaina vajadzībām. Jūs pat varat animēt šīs grafikas, lai pievienotu lapai vairāk pārvietošanās un interaktivitātes.
Animācijas
Tā kā inline SVG failus var veidot ar CSS, jūs varat izmantot arī CSS animācijas. CSS pārveidojumi un pārejas ir divi vienkārši veidi, kā pievienot kādu dzīvi SVG failiem. Jūs varat iegūt bagātīgu Flash kā līdzīgu pieredzi lapā, nepakļūstot negadījumiem, kas šodien rodas, izmantojot Flash tīmekļa vietnēs.
SVG izmantošana
Tikpat spēcīgs kā SVG, šīs grafikas nevar aizstāt katru citu attēla formātu, kuru izmantojat savā vietnē. Fotoattēli, kam nepieciešams dziļš krāsu dziļums, joprojām būs JPG vai varbūt PNG faili, taču vienkārši attēli, piemēram, ikonas, ir piemēroti, lai tos izpildītu kā SVG.
SVG var būt piemērots arī sarežģītākiem attēliem, piemēram, uzņēmuma logotipiem vai diagrammām un diagrammām. Visām grafikām būs izdevīgi mērogojamību, varēs veidot CSS un citas priekšrocības, kas uzskaitītas šajā rakstā.
Atbalsts vecākiem pārlūkiem
Pašreizējais SVG atbalsts ir ļoti labs mūsdienu tīmekļa pārlūkprogrammās. Vienīgie pārlūkprogrammas, kurām šo grafiku tiešām trūkst, ir vecākas Internet Explorer versijas (versijas 8 un jaunākas versijas) un dažas vecākas Android versijas. Kopumā ļoti mazs pārlūkošanas populācijas īpatsvars joprojām izmanto šos pārlūkus, un šis skaitlis turpina samazināties. Tas nozīmē, ka šodien SVG var droši izmantot vietnes SVG.
Ja jūs vēlaties nodrošināt SVG rezerves, varat izmantot rīku, piemēram, Grumpicon no Filament Group. Šis resurss ņems jūsu SVG attēlu failus un izveidos vecāku pārlūkprogrammu PNG atteikumus.
Rediģējis Jeremijs Girards 17.2.17