Ang mga benepisyo sa paggamit sa Scalable Vector Graphics
Ang Scalable Vector Graphics, o SVG, adunay usa ka importante nga papel sa disenyo sa website karon. Kung wala ka magamit sa SVG sa imong web design nga buhat, ania ang pipila ka mga rason ngano nga kinahanglan ka magsugod sa pagbuhat niini, maingon man mga pagbag-o nga imong magamit alang sa mga daan nga mga browser nga wala mosuporta niini nga mga file.
Resolution
Ang pinakadako nga benepisyo sa SVG mao ang independensya sa resolusyon. Tungod kay ang mga file sa SVG mao ang vector graphics imbes nga mga larawan sa raster nga gibase sa pixel, mahimo kini nga sukaranan nga dili mawad-an sa bisan unsa nga hiyas sa hulagway. Kini makatabang ilabi na kung nagmugna ka og mga responsive nga mga website nga kinahanglan nga tan-awon ang maayo ug maayo ang pagtrabaho sa daghang mga gidak-on sa screen ug mga gamit .
Ang mga SVG nga mga file mahimo nga gipataas o pabalhin aron ma-accommodate ang nag-usab nga gidak-on ug mga kinahanglanon sa layout sa imong responsive nga website ug dili kinahanglan nga mabalaka mahitungod sa mga graphic nga nagkompromiso sa kalidad sa bisan unsa nga lakang sa dalan.
File Size
Usa sa mga hagit sa paggamit sa mga imahen sa raster (JPG, PNG, GIF) sa mga responsive nga mga website mao ang gidak-on sa file sa maong mga imahe. Tungod kay ang mga imahen sa raster wala mag-scale sa paagi nga buhaton sa mga vector, kinahanglan nimo nga ipadala ang imong mga larawan sa pikas pikas sa pinakadako nga gidak-on nga ipakita. Kini tungod kay kanunay ka nga makahimo sa usa ka larawan nga mas gamay ug magpabilin ang kalidad niini, apan dili kini tinuod alang sa paghimo sa mga larawan nga mas dako. Ang katapusan nga resulta mao nga kamo sa kanunay adunay mga larawan nga mas dako pa kay sa gipakita kini sa screen sa usa ka tawo, nga nagpasabut nga sila kinahanglan nga mapugos sa pag-download sa usa ka dako kaayo nga file.
Gitubag kini sa SVG. Tungod kay ang mga vector graphics mausbaw, mahimo ka nga adunay gamay nga mga gidak-on sa file bisan kung unsa ka dako ang kinahanglan nga ipasundayag. Kini sa katapusan adunay positibo nga epekto sa usa ka kinatibuk-ang performance sa site ug ang gikusgon sa pag-download.
Pag-istilo sa CSS
Ang SVG code mahimo usab nga idugang direkta sa HTML sa usa ka panid. Gitawag kini nga "inline SVG." Usa sa mga benepisyo sa paggamit sa inline nga SVG mao nga tungod kay ang mga graphic gikuha sa browser pinasukad sa imong code, dili kinahanglan nga mohimo sa usa ka HTTP nga hangyo sa pagkuha sa usa ka image file. Laing kaayohan mao nga ang inline nga SVG mahimong gilarawan sa CSS.
Kinahanglan nga usbon ang kolor sa usa ka SVG icon? Sa baylo nga kinahanglan nga ablihan ang maong larawan sa usa ka matang sa pag-edit sa software ug pag-eksport ug pag-upload sa file pag-usab, mahimo ka lang mag-usab sa SVG file sa pipila ka linya sa CSS.
Mahimo usab nimo gamiton ang uban nga estilo sa CSS sa SVG graphics aron mausab kini sa hover states o alang sa pipila nga mga panginahanglan sa disenyo. Mahimo pa gani nga makabuhi ang mga hulagway aron makadugang sa usa ka kalihokan ug interactivity sa usa ka panid.
Mga animation
Tungod kay ang inline nga mga file sa SVG mahimong gihulma sa CSS, mahimo usab nimo gamiton ang animation sa CSS. Ang CSS nga pagbag-o ug mga pagbag-o mao ang duha ka sayon nga mga paagi aron makadugang sa kinabuhi sa mga SVG file. Mahimo ka nga makabaton og mga kasinatian nga sama sa Flash sa usa ka panid nga dili madaut sa mga kabalaka nga naggamit sa paggamit sa Flash sa mga website karon.
Paggamit sa SVG
Ingon ka gamhanan sama sa SVG, ang mga graphic dili makapuli sa matag laing format sa imahen nga imong gigamit sa imong website. Ang mga litrato nga nagkinahanglan sa lawom nga kolor sa giladmon kinahanglan pa nga mahimong JPG o tingali usa ka PNG nga file, apan ang mga yano nga mga hulagway sama sa mga imahen hingpit nga haum nga ipatuman isip SVG.
Ang SVG mahimong angay usab alang sa mas komplikadong mga ilustrasyon, sama sa mga logo sa kompaniya o mga graph ug mga tsart. Ang tanan nga mga graphics makabenepisyo gikan sa pagka-scalable, nga mahimo nga gi-style sa CSS, ug ang uban nga mga bentaha nga nalista sa niini nga artikulo.
Suporta alang sa Older Browser
Ang karon nga suporta sa SVG maayo kaayo sa modernong mga web browser. Ang bugtong mga browser nga kulang sa suporta alang niini nga mga graphic mao ang mas daan nga mga bersyon sa Internet Explorer (Version 8 ug sa ubos) ug pipila ka mas daan nga mga bersyon sa Android. Sa tanan, usa ka gamay ka porsyento sa populasyon nga nag-browse ang naggamit gihapon niini nga mga browser, ug kana nga gidaghanon nagpadayon sa pagkunhod. Kini nagpasabot nga ang SVG mahimong gamiton nga luwas sa mga website karon.
Kon gusto nimo nga mahatag ang fallback sa SVG, mahimo nimo gamiton ang usa ka himan sama sa Grumpicon gikan sa Filament Group. Kini nga kapanguhaan magdala sa imong SVG nga mga file sa imahen ug maghimo sa mga fallback alang sa PNG alang sa mga daan nga mga browser.
Gi-edit ni Jeremy Girard sa 1/27/17