Kwa nini unapaswa kutumia SVG kwenye tovuti yako leo

Faida ya kutumia Graphics Vector Scalable

Vikombe Vector vinavyoweza kutenganishwa, au SVG, hufanya jukumu muhimu katika kubuni ya tovuti leo. Ikiwa hutumii sasa SVG kwenye kazi yako ya kubuni wavuti, hapa kuna sababu zingine ambazo unapaswa kuanza kufanya hivyo, pamoja na vikwazo ambavyo unaweza kutumia kwa browsers wakubwa ambao hawaunga mkono faili hizi.

Azimio

Faida kubwa ya SVG ni uhuru wa uamuzi. Kwa sababu faili za SVG ni picha za vector badala ya picha za raster za msingi za pixel, zinaweza kubadilishwa bila kupoteza ubora wa picha yoyote. Hii inasaidia sana wakati unapounda tovuti zinazosikia zinazohitajika kuonekana vizuri na kufanya kazi vizuri katika aina mbalimbali za ukubwa wa skrini na vifaa .

Faili za SVG zinaweza kupanuliwa au chini kushughulikia mahitaji ya ukubwa na mipangilio ya tovuti yako ya msikivu na hauna haja ya kuwa na wasiwasi juu ya picha hizo zilizo na ubora ulioathiriwa hatua yoyote ya njia.

Ukubwa wa faili

Mojawapo ya changamoto kwa kutumia picha za raster (JPG, PNG, GIF) kwenye tovuti za msikivu ni ukubwa wa faili ya picha hizo. Kwa sababu picha za raster hazipanui njia ambazo vector zinafanya, unahitaji kutoa picha zako za msingi za pixel kwa ukubwa mkubwa zaidi ambao wataonyeshwa. Hii ni kwa sababu unaweza kufanya picha ndogo na kudumisha ubora wake, lakini si sawa na kufanya picha ziwe kubwa. Matokeo ya mwisho ni kwamba mara nyingi una picha ambazo ni kubwa zaidi kuliko zinazoonyeshwa kwenye skrini ya mtu, ambayo ina maana kwamba wanalazimika kupakua faili kubwa sana.

SVG inashughulikia changamoto hii. Kwa sababu graphics za vector zinaweza kupanuka, unaweza kuwa na ukubwa wa faili ndogo bila kujali jinsi picha hizo zinavyohitajika kuonyeshwa. Hii hatimaye itakuwa na athari nzuri kwenye utendaji wa jumla wa tovuti na kasi ya kupakua.

CSS Styling

Msimbo wa SVG pia unaweza kuongezwa moja kwa moja kwenye HTML ya ukurasa. Hii inajulikana kama "SVG inline." Moja ya faida za kutumia SVG ya ndani ni kwamba tangu graphics hutolewa kwa kivinjari kulingana na msimbo wako, hakuna haja ya kufanya ombi la HTTP kutafuta faili ya picha. Faida nyingine ni kwamba SVG ya ndani inaweza kuingizwa na CSS.

Unahitaji kubadilisha rangi ya icon ya SVG? Badala ya kuhitaji kufungua picha hiyo katika programu fulani ya uhariri na kuuza nje na kupakia faili tena, unaweza kubadilisha tu faili ya SVG na mistari machache ya CSS.

Unaweza pia kutumia mitindo nyingine ya CSS kwenye picha za SVG ili kuzibadilisha kwenye mataifa ya hover au kwa mahitaji fulani ya kubuni. Unaweza hata kuhamisha graphics hizo ili kuongeza harakati na uingilizaji kwenye ukurasa.

Mifano kwa michoro

Kwa sababu faili za SVG za ndani zinaweza kupangiliwa na CSS, unaweza kutumia michoro za CSS pia. CSS inabadilika na mabadiliko ni njia mbili rahisi za kuongeza maisha kwa faili za SVG. Unaweza kupata uzoefu mwingi wa Kiwango cha Kiwango cha juu kwenye ukurasa bila kushindwa kwa kushuka kwa kasi kuja na kutumia Flash kwenye tovuti leo.

Matumizi ya SVG

Kama nguvu kama SVG, graphics hizi haziwezi kubadilisha kila aina nyingine ya picha unayotumia kwenye tovuti yako. Picha ambazo zinahitaji kina kina cha rangi bado zinahitajika kuwa faili ya JPG au labda PNG, lakini picha rahisi kama icons zinafaa kabisa kutekelezwa kama SVG.

SVG inaweza pia kuwa sahihi kwa vielelezo ngumu zaidi, kama alama ya kampuni au grafu na chati. Picha zote zitafaidika kutokana na kuwa na scalable, yenye uwezo wa kuonyeshwa na CSS, na faida nyingine zilizotajwa katika makala hii.

Msaada kwa Vivinjari Vya Kale

Msaada wa sasa wa SVG ni mzuri sana katika vivinjari vya kisasa vya wavuti. Vivinjari pekee ambavyo havijasaidiwa kweli kwa michoro hizi ni matoleo ya zamani ya Internet Explorer (Toleo la 8 na chini) na matoleo machache ya Android. Kwa wote, asilimia ndogo sana ya idadi ya kuvinjari bado hutumia vivinjari hivi, na idadi hiyo inaendelea kushuka. Hii inamaanisha kuwa SVG inaweza kutumika vizuri kwa salama kwenye tovuti leo.

Ikiwa unataka kutoa kushuka kwa SVG, unaweza kutumia chombo kama Grumpicon kutoka Kundi la Filament. Rasilimali hii itachukua faili zako za picha za SVG na kuunda mapungufu ya PNG kwa vivinjari vidogo.

Ilibadilishwa na Jeremy Girard mnamo 1/27/17