Ang Scalable Vector Graphics, o SVG, ay may mahalagang papel sa disenyo ng website ngayon. Kung hindi ka kasalukuyang gumagamit ng SVG sa iyong gawain sa pagdidisenyo ng web, narito ang ilang dahilan kung bakit dapat mong simulan ang paggawa nito, pati na rin ang mga fallback na magagamit mo para sa mga mas lumang browser na hindi sumusuporta sa mga file na ito.
Resolution
Ang pinakamalaking benepisyo ng SVG ay resolution independence. Dahil ang mga SVG file ay mga vector graphics (kumpara sa pixel-based na raster na mga larawan), maaari mong baguhin ang laki ng mga ito nang hindi nawawala ang kalidad ng larawan. Lalo itong nakakatulong kapag gumagawa ka ng mga tumutugong website na dapat magmukhang maganda at gumagana nang maayos sa malawak na hanay ng mga laki ng screen at device. Maaari mong i-scale pataas o pababa ang mga SVG file upang matugunan ang pagbabago ng laki at mga pangangailangan sa layout ng iyong tumutugon na website nang hindi nakompromiso ang kalidad ng mga ito sa anumang paraan.
Sa pangkalahatan, ang mga SVG ay may mas makinis, mas malinaw na hitsura kaysa sa mga larawan ng iba pang mga format, anuman ang laki.
Laki ng File
Ang isang hamon sa paggamit ng mga raster na larawan (hal., JPG, PNG, GIF) sa mga tumutugong website ay ang laki ng file. Dahil ang mga raster na imahe ay hindi nagsusukat sa paraan ng mga vector na imahe, dapat mong ihatid ang iyong mga pixel-based na mga imahe sa pinakamalaking laki kung saan sila ipapakita. Ito ay dahil maaari mong palaging gawing mas maliit ang isang imahe at mapanatili ang kalidad nito, ngunit hindi ito totoo para sa pagpapalaki ng mga larawan. Ang resulta ay mga larawang mas malaki kaysa sa laki kung saan sila tinitingnan, na pumipilit sa mga browser na mag-download ng malalaking file.
Sa kabaligtaran, ang mga vector graphics ay nasusukat, kaya maaari mong gamitin ang napakaliit na laki ng file kahit gaano pa kalaki ang mga larawang iyon na kailangang ipakita. Sa huli, ino-optimize nito ang pangkalahatang pagganap at bilis ng pag-download ng isang site.
CSS Styling
Madali kang magdagdag ng SVG nang direkta sa HTML ng isang page. Ito ay kilala bilang inline na SVG. Ang isang pakinabang ng paggamit ng inline na SVG ay, dahil ang mga graphics ay talagang iginuhit ng browser, hindi na kailangan ng HTTP na kahilingan para kumuha ng image file.
Isa pang benepisyo: Maaari mong i-istilo ang inline na SVG gamit ang CSS. Kailangang baguhin ang kulay ng isang SVG icon? Sa halip na i-edit ang larawang iyon sa software sa pag-edit ng graphics at pagkatapos ay i-export at i-upload muli ang file, maaari mong baguhin ang SVG file sa pamamagitan lamang ng ilang linya ng CSS. Magagamit mo rin ang CSS para baguhin ang mga SVG para sa mga estado ng hover at iba pang pangangailangan sa disenyo.
Bottom Line
Dahil maaari mong i-istilo ang mga inline na SVG file gamit ang CSS, maaari mo ring gamitin ang mga animation ng CSS sa mga ito. Ang mga pagbabago at paglipat ng CSS ay dalawang madaling paraan upang magdagdag ng ilang buhay sa mga SVG. Maaari kang makakuha ng masaganang karanasang tulad ng Flash sa isang pahina nang hindi gumagamit ng Flash-na hindi na sinusuportahan ng iPad. Sa katunayan, i-phase out ng Adobe ang Flash sa pagtatapos ng 2020.
Mga Paggamit ng SVG
Kahit gaano kalakas ang mga SVG, hindi nila mapapalitan ang bawat iba pang format ng larawan. Ang mga larawang nangangailangan ng malalim na kulay ay dapat pa ring nasa-j.webp
Angkop din ang SVG para sa ilang kumplikadong paglalarawan, gaya ng mga graph, chart, at logo ng kumpanya. Nakikinabang ang lahat ng graphics na ito sa pagiging scalable at nagagawang i-istilo gamit ang CSS.
Suporta para sa Mga Mas Lumang Browser
Ang kasalukuyang suporta para sa SVG ay napakahusay sa mga modernong web browser. Ang tanging mga browser na kulang sa suporta para sa mga graphics na ito ay ang mga lumang bersyon ng Internet Explorer (na hindi na sinusuportahan ng Microsoft) at ilang lumang bersyon ng Android. Sa kabuuan, ang napakaliit na porsyento ng populasyon ng pagba-browse ay gumagamit pa rin ng mga browser na ito, at ang bilang na iyon ay patuloy na lumiliit. Nangangahulugan ito na magagamit mo ang SVG sa iyong website nang walang pag-aalala.
Kung gusto mong magbigay ng fallback para sa SVG, gumamit ng tool gaya ng Grumpicon mula sa Filament Group. Ang mapagkukunang ito ay gumagawa ng mga-p.webp
