Ang mga benepisyo ng paggamit ng Scalable Vector Graphics
Ang Scalable Vector Graphics, o SVG, ay may mahalagang papel sa disenyo ng website ngayon. Kung hindi ka kasalukuyang gumagamit ng SVG sa iyong disenyo ng web disenyo, narito ang ilang mga dahilan kung bakit dapat mong simulan ang paggawa nito, pati na rin ang mga fallback na maaari mong gamitin para sa mga mas lumang mga browser na hindi sumusuporta sa mga file na ito.
Resolution
Ang pinakamalaking pakinabang ng SVG ay ang pagsasarili ng resolusyon. Sapagkat ang mga file ng SVG ay vector graphics sa halip ng mga imaheng raster na nakabatay sa pixel, maaari itong palitan nang hindi nawawala ang anumang kalidad ng imahe. Ito ay lalong kapaki-pakinabang kapag ikaw ay lumilikha ng mga tumutugon na mga website na kailangan upang tumingin mabuti at mahusay na gumagana sa isang malawak na hanay ng mga laki ng screen at mga aparato .
Maaaring i-scale o pababa ang mga file ng SVG upang mapaunlakan ang pagbabago ng laki at layout ng mga pangangailangan ng iyong tumutugon na website at hindi mo kailangang mag-alala tungkol sa mga graphics na nagkakompromiso sa kalidad anumang hakbang ng paraan.
Sukat ng File
Ang isa sa mga hamon sa paggamit ng mga imaheng raster (JPG, PNG, GIF) sa mga tumutugon na mga website ay ang laki ng file ng mga imaheng iyon. Dahil ang mga imahe ng raster ay hindi sumusukat sa paraan na ginagawa ng mga vector, kailangan mong ihatid ang iyong mga pixel na nakabatay sa mga larawan sa pinakamalaking laki kung saan ipapakita ang mga ito. Ito ay dahil maaari mong palaging gumawa ng isang larawan na mas maliit at panatilihin ang kalidad nito, ngunit ang parehong ay hindi totoo para sa paggawa ng mga imahe mas malaki. Ang huling resulta ay na madalas kang magkaroon ng mga larawan na mas malaki kaysa sa ipinapakita sa screen ng isang tao, na nangangahulugan na sila ay napipilitang mag-download ng napakalaking file.
Ang SVG ay tumutugon sa hamong ito. Dahil ang vector graphics ay nasusukat, maaari kang magkaroon ng napakaliit na sukat ng file kahit na gaano kalaki ang mga imaheng iyon na maaaring kailanganing maipakita. Ito ay magkakaroon ng positibong epekto sa pangkalahatang pagganap ng isang site at bilis ng pag-download.
Pag-istilo ng CSS
Ang SVG code ay maaari ring maidagdag nang direkta sa HTML ng isang pahina. Ito ay kilala bilang "inline SVG." Ang isa sa mga benepisyo ng paggamit ng inline na SVG ay dahil ang mga graphics ay talagang iguguhit ng browser batay sa iyong code, hindi na kailangang gumawa ng isang HTTP na kahilingan upang makuha ang isang file ng imahe. Ang isa pang benepisyo ay ang inline na SVG ay maaaring istilong CSS.
Kailangan mong baguhin ang kulay ng isang icon ng SVG? Sa halip na kailangan upang buksan ang larawang iyon sa ilang uri ng software sa pag-edit at i-export at i-upload muli ang file, maaari mo lamang palitan ang SVG file na may ilang mga linya ng CSS.
Maaari mo ring gamitin ang iba pang mga estilo ng CSS sa SVG graphics upang baguhin ang mga ito sa hover estado o para sa ilang mga pangangailangan sa disenyo. Maaari mo ring bigyang-buhay ang mga graphics upang magdagdag ng ilang kilusan at interactivity sa isang pahina.
Mga animation
Dahil ang mga inline na SVG file ay maaaring naka-istilong sa CSS, maaari mo ring gamitin ang CSS animation sa mga ito pati na rin. Ang CSS transforms at transitions ay dalawang madaling paraan upang magdagdag ng ilang buhay sa mga file ng SVG. Maaari kang makakuha ng mga rich na karanasan na tulad ng Flash sa isang pahina nang hindi sumasailalim sa mga downsides na kasama ang paggamit ng Flash sa mga website ngayon.
Gumagamit ng SVG
Bilang malakas na bilang ng SVG, hindi maaaring palitan ng mga graphics na ito ang bawat iba pang format ng imahe na iyong ginagamit sa iyong website. Ang mga larawan na nangangailangan ng lalim na malalim na kulay ay kailangan pa ring maging isang JPG o marahil isang PNG na file, ngunit ang mga simpleng larawan tulad ng mga icon ay ganap na angkop upang maisakatuparan bilang SVG.
Maaari ring angkop ang SVG para sa mas kumplikadong mga guhit, tulad ng mga logo ng kumpanya o mga graph at mga tsart. Ang lahat ng mga graphics ay makikinabang mula sa pagiging scalable, ma-istilong sa CSS, at iba pang mga pakinabang na nakalista sa artikulong ito.
Suporta para sa Mga Matandang Mga Browser
Ang kasalukuyang suporta para sa SVG ay napakahusay sa mga modernong web browser. Ang mga tanging browser na talagang walang suporta para sa mga graphics na ito ay mas lumang bersyon ng Internet Explorer (Bersyon 8 at ibaba) at ilang mga mas lumang bersyon ng Android. Lahat ng lahat, isang napakaliit na porsyento ng populasyon sa pag-browse ay gumagamit pa rin ng mga browser na ito, at patuloy na lumiliit ang numerong iyon. Nangangahulugan ito na ang SVG ay maaaring gamitin medyo ligtas sa mga website ngayon.
Kung nais mong magbigay ng fallback para sa SVG, maaari mong gamitin ang isang tool tulad ng Grumpicon mula sa Filament Group. Dadalhin ng mapagkukunan na ito ang iyong mga file ng imahe ng SVG at lumikha ng mga fallback para sa PNG para sa mas lumang mga browser.
Na-edit ni Jeremy Girard noong 1/27/17