Scalable Vector Graphics jeb SVG mūsdienās spēlē svarīgu lomu vietņu dizainā. Ja jūs pašlaik neizmantojat SVG savā tīmekļa dizaina darbā, šeit ir daži iemesli, kāpēc jums tas jāsāk, kā arī atkāpšanās iespējas, ko varat izmantot vecākām pārlūkprogrammām, kas neatbalsta šos failus.
Izšķirtspēja
Lielākais SVG ieguvums ir izšķirtspējas neatkarība. Tā kā SVG faili ir vektorgrafika (pretstatā pikseļu rastra attēliem), varat mainīt to izmērus, nezaudējot attēla kvalitāti. Tas ir īpaši noderīgi, ja veidojat adaptīvas vietnes, kurām ir labi jāizskatās un labi jādarbojas dažādos ekrāna izmēru un ierīču diapazonos. Varat palielināt vai samazināt SVG failu mērogošanu, lai pielāgotos savas adaptīvās vietnes mainīgajām izmēra un izkārtojuma vajadzībām, nekādā veidā neapdraudot to kvalitāti.
Parasti SVG failiem ir vienmērīgāks un izteiksmīgāks izskats nekā citu formātu attēliem neatkarīgi no izmēra.
Faila lielums
Viens izaicinājums, izmantojot rastra attēlus (piem., JPG, PNG, GIF) adaptīvās vietnēs, ir faila lielums. Tā kā rastra attēli netiek mērogoti tāpat kā vektora attēli, jums ir jāpiegādā pikseļu attēli lielākajā izmērā, kādā tie tiks parādīti. Tas ir tāpēc, ka jūs vienmēr varat samazināt attēlu un saglabāt tā kvalitāti, bet tas pats neattiecas uz attēlu palielināšanu. Rezultātā tiek iegūti attēli, kas ir daudz lielāki par izmēru, kādā tie tiek skatīti, liekot pārlūkprogrammām lejupielādēt lielus failus.
Turpretim vektorgrafika ir mērogojama, tāpēc varat izmantot ļoti mazus failu izmērus neatkarīgi no tā, cik lieli attēli ir jāparāda. Tas galu galā optimizē vietnes vispārējo veiktspēju un lejupielādes ātrumu.
CSS stils
Varat viegli pievienot SVG tieši lapas HTML. Tas ir pazīstams kā iekļauts SVG. Viena no iekļautā SVG izmantošanas priekšrocībām ir tāda, ka, tā kā grafiku faktiski zīmē pārlūkprogramma, attēla faila ielādei nav nepieciešams HTTP pieprasījums.
Vēl viena priekšrocība: varat veidot iekļauto SVG, izmantojot CSS. Vai jāmaina SVG ikonas krāsa? Tā vietā, lai rediģētu šo attēlu grafikas rediģēšanas programmatūrā un pēc tam vēlreiz eksportētu un augšupielādētu failu, varat mainīt SVG failu, vienkārši izmantojot dažas CSS rindiņas. Varat izmantot CSS, lai mainītu SVG saturiem un citām dizaina vajadzībām.
Bottom Line
Tā kā jūs varat veidot iekļautos SVG failus, izmantojot CSS, varat arī tajos izmantot CSS animācijas. CSS transformācijas un pārejas ir divi vienkārši veidi, kā SVG failiem pievienot dzīvību. Varat iegūt bagātīgu Flash līdzīgu pieredzi lapā, neizmantojot Flash, ko iPad vairs neatbalsta. Faktiski Adobe pakāpeniski pārtrauc Flash izmantošanu līdz 2020. gada beigām.
SVG lietojumi
Lai cik spēcīgi ir SVG, tie nevar aizstāt visus citus attēla formātus. Fotoattēli, kuriem nepieciešams bagātīgs krāsu dziļums, joprojām ir-j.webp
SVG ir piemērots arī dažām sarežģītām ilustrācijām, piemēram, diagrammām, diagrammām un uzņēmumu logotipiem. Visas šīs grafikas gūst labumu no tā, ka tās ir mērogojamas un tās var veidot ar CSS.
Atbalsts vecākām pārlūkprogrammām
Pašreizējais SVG atbalsts ir ļoti labs mūsdienu tīmekļa pārlūkprogrammās. Vienīgās pārlūkprogrammas, kurās trūkst šīs grafikas atbalsta, ir vecās Internet Explorer versijas (kuras Microsoft vairs neatbalsta) un dažas vecās Android versijas. Kopumā ļoti neliela daļa pārlūkprogrammu joprojām izmanto šīs pārlūkprogrammas, un šis skaits turpina sarukt. Tas nozīmē, ka varat bez raizēm izmantot SVG savā vietnē.
Ja vēlaties nodrošināt SVG atkāpšanos, izmantojiet tādu rīku kā Grumpicon no Filament Group. Šis resurss izveido-p.webp
