Manufaa ya Kutumia Picha za SVG kwenye Tovuti Yako

Orodha ya maudhui:

Manufaa ya Kutumia Picha za SVG kwenye Tovuti Yako
Manufaa ya Kutumia Picha za SVG kwenye Tovuti Yako
Anonim

Michoro ya Kivekta Inayoweza Scalable, au SVG, ina jukumu muhimu katika muundo wa tovuti leo. Ikiwa kwa sasa hutumii SVG katika kazi yako ya kubuni wavuti, hizi hapa ni baadhi ya sababu kwa nini unapaswa kuanza kufanya hivyo, pamoja na njia mbadala ambazo unaweza kutumia kwa vivinjari vya zamani ambavyo havitumii faili hizi.

azimio

Faida kubwa ya SVG ni uhuru wa azimio. Kwa sababu faili za SVG ni michoro ya vekta (kinyume na picha za rasta zenye saizi), unaweza kubadilisha ukubwa wao bila kupoteza ubora wa picha. Hii inasaidia sana unapounda tovuti zinazojibu ambazo lazima zionekane vizuri na zifanye kazi vizuri katika anuwai ya saizi na vifaa vya skrini. Unaweza kuongeza faili za SVG juu au chini ili kukidhi mabadiliko ya ukubwa na mahitaji ya mpangilio wa tovuti yako inayojibu bila kuathiri ubora wao kwa njia yoyote ile.

Kwa ujumla, faili za SVG zina mwonekano laini na wa kuvutia kuliko picha za miundo mingine, bila kujali ukubwa.

Image
Image

Ukubwa wa faili

Changamoto moja ya kutumia picha chafu (k.m., JPG, PNG, GIF) kwenye tovuti zinazofanya kazi ni saizi ya faili. Kwa sababu picha za raster haziongezei jinsi picha za vekta zinavyofanya, lazima uwasilishe picha zako zinazotegemea pixel katika saizi kubwa zaidi ambazo zitaonyeshwa. Hii ni kwa sababu unaweza kufanya picha kuwa ndogo kila wakati na kuhifadhi ubora wake, lakini sivyo ilivyo kwa kufanya picha kuwa kubwa zaidi. Matokeo yake ni picha ambazo ni kubwa zaidi kuliko ukubwa ambazo zinatazamwa, hivyo kulazimisha vivinjari kupakua faili kubwa.

Kinyume chake, michoro ya vekta inaweza kupanuka, kwa hivyo unaweza kutumia saizi ndogo sana za faili bila kujali ukubwa wa picha hizo zinaweza kuhitaji kuonyeshwa. Hii hatimaye huboresha utendaji wa jumla wa tovuti na kasi ya upakuaji.

Mitindo ya CSS

Unaweza kuongeza SVG kwa urahisi moja kwa moja kwenye HTML ya ukurasa. Hii inajulikana kama SVG ya ndani. Faida moja ya kutumia inline SVG ni kwamba, kwa sababu michoro imechorwa na kivinjari, hakuna haja ya ombi la HTTP kuleta faili ya picha.

Faida nyingine: Unaweza kubadilisha SVG iliyo ndani ya mstari ukitumia CSS. Je, unahitaji kubadilisha rangi ya ikoni ya SVG? Badala ya kuhariri picha hiyo katika programu ya uhariri wa michoro na kisha kusafirisha na kupakia faili tena, unaweza kubadilisha faili ya SVG kwa kutumia mistari michache ya CSS. Unaweza kutumia CSS kubadilisha SVG kwa hali ya kuelea na mahitaji mengine ya muundo, pia.

Mstari wa Chini

Kwa sababu unaweza kubadilisha faili za SVG zenye mstari ukitumia CSS, unaweza kutumia uhuishaji wa CSS pia. Mabadiliko ya CSS na mabadiliko ni njia mbili rahisi za kuongeza maisha kwenye SVG. Unaweza kupata matumizi bora ya Flash-kama kwenye ukurasa bila kutumia Flash-ambayo iPad haitumii tena. Kwa kweli, Adobe itamaliza Flash ifikapo mwisho wa 2020.

Matumizi ya SVG

Kama SVG zilivyo na nguvu, haziwezi kuchukua nafasi ya kila umbizo lingine la picha. Picha zinazohitaji kina cha rangi bado zinapaswa kuwa katika umbizo la-j.webp

SVG pia inafaa kwa baadhi ya vielelezo changamano, kama vile grafu, chati na nembo za kampuni. Michoro hii yote inanufaika kutokana na kubadilika na kuweza kutengenezwa kwa mtindo wa CSS.

Msaada kwa Vivinjari Vizee

Usaidizi wa sasa wa SVG ni mzuri sana katika vivinjari vya kisasa vya wavuti. Vivinjari pekee ambavyo havina usaidizi wa michoro hii ni matoleo ya zamani ya Internet Explorer (ambayo Microsoft haitumii tena) na matoleo machache ya zamani ya Android. Kwa ujumla, asilimia ndogo sana ya watu wanaovinjari bado wanatumia vivinjari hivi, na idadi hiyo inaendelea kupungua. Hii inamaanisha kuwa unaweza kutumia SVG kwenye tovuti yako bila wasiwasi.

Ikiwa ungependa kutoa njia mbadala ya SVG, tumia zana kama vile Grumpicon kutoka Kikundi cha Filament. Nyenzo hii huunda-p.webp

Ilipendekeza: