Poukisa ou ta dwe Sèvi ak SVG sou sit entènèt ou jodi a

Benefis ki genyen nan lè l sèvi avèk grafik vektè Scalable

Scalable Graphics vektè, oswa SVG, jwe yon wòl enpòtan nan konsepsyon sit entènèt jodi a. Si ou pa kounye a lè l sèvi avèk SVG nan travay konsepsyon entènèt ou an, isit la yo se kèk rezon poukisa ou ta dwe kòmanse fè sa, osi byen ke fallbacks ou ka itilize pou pi gran navigatè ki pa sipòte sa yo dosye.

Rezolisyon

Benefis nan pi gwo nan SVG se rezolisyon endepandans yo. Paske dosye SVG yo se grafik vektè olye pou yo imaj ki baze sou pixel ki baze sou, yo ka rdimansyonman san yo pa pèdi nenpòt kalite imaj. Sa a se itil espesyalman lè w ap kreye sit entènèt ki reponn yo bezwen gade byen epi travay byen atravè yon pakèt gwosè ekran ak aparèy .

Dosye SVG yo ka pwopaje monte oswa desann nan akomode gwosè a chanje ak bezwen layout nan sit entènèt ki reponn ou epi ou pa bezwen enkyete sou sa yo grafik ki gen konpwomèt bon jan kalite nenpòt ki etap nan chemen an.

File Size

Youn nan defi yo ak lè l sèvi avèk imaj raster (JPG, PNG, GIF) sou sit entènèt reponn se gwosè dosye a nan imaj sa yo. Paske imaj matrèl pa echèl fason ki vektè yo fè, ou bezwen delivre imaj pixel ki baze sou ou nan gwosè a pi gwo nan kote yo pral parèt. Sa a se paske ou ka toujou fè yon imaj ki pi piti epi kenbe bon jan kalite li yo, men menm bagay la tou se pa vre pou fè imaj pi gwo. Rezilta nan fen se ke ou souvan gen imaj ki pi gwo pase yo ke yo te montre sou ekran yon moun nan, ki vle di yo se initilman yo te fòse yo download yon dosye gwo anpil.

SVG adrese defi sa a. Paske grafik yo vektè yo se évolutive, ou ka gen gwosè dosye anpil ti kèlkeswa jan gwo imaj sa yo ka bezwen parèt. Sa a pral finalman gen yon enpak pozitif sou pèfòmans jeneral yon sit la ak download vitès.

CSS kwafur

SVG kòd kapab tou ajoute dirèkteman nan HTML la nan yon paj. Sa a se ke yo rekonèt kòm "aliye SVG." Youn nan benefis ki genyen nan lè l sèvi avèk aliye SVG se ke depi grafik yo ki aktyèlman trase pa navigatè a ki baze sou kòd ou a, pa gen okenn bezwen fè yon HTTP demann yo chache yon dosye imaj. Yon lòt benefis se ke aliye SVG ka estile ak CSS.

Bezwen chanje koulè a ​​nan yon icon SVG? Olye pou yo bezwen yo louvri imaj sa a nan kèk kalite lojisyèl koreksyon ak ekspòtasyon ak Upload dosye a ankò, ou ka senpleman chanje dosye a SVG ak yon liy kèk nan CSS.

Ou kapab tou itilize lòt estil CSS sou grafik SVG pou chanje yo sou eta hover oswa pou bezwen konsepsyon sèten. Ou ka menm anime grafik sa yo ajoute kèk mouvman ak entèaktivite nan yon paj.

Animasyon

Paske anal dosye SVG ka estile ak CSS, ou ka itilize Animations CSS sou yo kòm byen. CSS transfòme ak tranzisyon yo se de fason fasil yo ajoute kèk lavi nan dosye SVG. Ou ka jwenn rich Flash-tankou eksperyans sou yon paj san yo pa sukup nan enkonvenyans yo ki vini ak lè l sèvi avèk Flash sou sit entènèt jodi a.

Itilizasyon SVG

Kòm pwisan tankou SVG se, grafik sa yo pa ka ranplase tout lòt fòma imaj ou ap itilize sou sit entènèt ou. Ekran ki mande pwofondè koulè pwofondè ap toujou bezwen yon JPG oswa petèt yon dosye PNG, men imaj senp tankou ikon yo parfe adapte yo dwe egzekite kòm SVG.

SVG kapab tou apwopriye pou ilistrasyon plis konplèks, tankou logo konpayi oswa graf ak tablo. Tout grafik yo pral benefisye de yo te évolutive, kapab estile ak CSS, ak lòt avantaj ki nan lis nan atik sa a.

Sipò pou ansyen navigatè yo

Sipò aktyèl pou SVG se trè bon nan navigatè entènèt modèn. Navigatè yo sèlman ki reyèlman manke sipò pou grafik sa yo se vèsyon ki pi ansyen nan Internet Explorer (vèsyon 8 ak anba a) ak kèk vèsyon ki pi ansyen nan android. Tout moun nan tout, yon pousantaj anpil ti nan popilasyon an ap kontinye toujou sèvi ak sa yo navigatè, ak nimewo sa a ap kontinye retresi. Sa vle di ke SVG ka itilize trè san danje sou sit entènèt jodi a.

Si ou vle bay yon fallback pou SVG, ou ka itilize yon zouti tankou Grumpicon soti nan Gwoup la Filaman. Sa a resous pral pran dosye SVG ou ak kreye pNG fallbacks pou pi gran navigatè.

Edited by Jeremy Girard sou 1/27/17