Manteision defnyddio Graffegau Vector Scalable
Mae Graffeg Vector Scalable, neu SVG, yn chwarae rhan bwysig mewn dylunio gwefannau heddiw. Os nad ydych yn defnyddio SVG ar hyn o bryd yn eich gwaith dylunio gwe, dyma rai rhesymau pam y dylech chi ddechrau gwneud hynny, yn ogystal ag anfanteision y gallwch eu defnyddio ar gyfer porwyr hŷn nad ydynt yn cefnogi'r ffeiliau hyn.
Penderfyniad
Y budd mwyaf o SVG yw annibyniaeth datrysiad. Gan fod ffeiliau SVG yn graffeg fector yn hytrach na delweddau raster sy'n seiliedig ar bicsel, gellir eu haddasu heb golli unrhyw ansawdd delwedd. Mae hyn yn arbennig o ddefnyddiol wrth greu gwefannau ymatebol sydd angen edrych yn dda a gweithio'n dda ar draws ystod eang o feintiau a dyfeisiau sgrin .
Gall ffeiliau SVG gael eu graddio i fyny neu i lawr er mwyn darparu ar gyfer anghenion newidiol maint a chynllun eich gwefan ymatebol ac nid oes angen i chi boeni am y graffeg hynny sydd wedi peryglu ansawdd unrhyw gam o'r ffordd.
Maint Ffeil
Un o'r heriau wrth ddefnyddio delweddau raster (JPG, PNG, GIF) ar wefannau ymatebol yw maint ffeiliau'r delweddau hynny. Gan nad yw delweddau raster yn graddio'r ffordd y mae rhai fector yn ei wneud, mae angen i chi gyflwyno eich delweddau picsel ar y maint mwyaf y byddant yn cael eu harddangos. Mae hyn oherwydd y gallwch chi bob amser wneud delwedd yn llai a chadw ei ansawdd, ond nid yw'r un peth yn wir am wneud delweddau yn fwy. Y canlyniad terfynol yw bod gennych ddelweddau yn aml yn llawer mwy nag y maent yn cael eu dangos ar sgrin person, sy'n golygu eu bod yn cael eu gorfodi i lawrlwytho ffeil fawr iawn.
Mae SVG yn mynd i'r afael â'r her hon. Oherwydd bod y graffeg fector yn raddol, gallwch gael maint ffeiliau bach iawn waeth pa mor fawr y gall fod angen arddangos y delweddau hynny. Yn y pen draw, bydd hyn yn cael effaith gadarnhaol ar berfformiad cyffredinol y safle a chyflymder llwytho i lawr.
Stylio CSS
Gellir ychwanegu cod SVG yn uniongyrchol i HTML tudalen. Gelwir hyn yn "SVG inline." Un o fanteision defnyddio SVG mewnol yw, gan fod y porwr yn cael ei dynnu gan y porwr yn seiliedig ar eich cod, nid oes angen gwneud cais HTTP i geisio ffeil delwedd. Budd arall yw y gall SVG mewnol gael ei styled ag CSS.
Angen newid lliw eicon SVG? Yn hytrach na bod angen agor y ddelwedd honno mewn rhyw fath o feddalwedd golygu ac allforio a llwytho'r ffeil eto, gallwch newid y ffeil SVG gydag ychydig linellau o CSS.
Gallwch hefyd ddefnyddio arddulliau CSS eraill ar graffeg SVG i'w newid ar gyflyrau hofran neu ar gyfer anghenion dylunio penodol. Gallwch hyd yn oed animeiddio'r graffeg hynny i ychwanegu peth symudiad a rhyngweithio i dudalen.
Animeiddiadau
Oherwydd gall ffeiliau SVG mewnol gael eu styledio ag CSS, gallwch ddefnyddio animeiddiadau CSS arnyn nhw hefyd. Mae trawsnewidiadau a thrawsnewidiadau CSS yn ddwy ffordd hawdd i ychwanegu rhywfaint o fywyd i ffeiliau SVG. Gallwch gael profiadau cyffelyb tebyg ar Flash ar dudalen heb gychwyn ar y gostyngiadau sy'n dod â defnyddio Flash ar wefannau heddiw.
Defnydd o SVG
Cyn belled â SVG, ni all y graffegau hyn ddisodli pob fformat delwedd arall rydych chi'n ei ddefnyddio ar eich gwefan. Bydd angen i luniau sydd angen dyfnder lliw dwfn fod yn JPG neu efallai ffeil PNG, ond mae delweddau syml fel eiconau yn gwbl addas i'w gweithredu fel SVG.
Gall SVG fod yn briodol hefyd ar gyfer darluniau mwy cymhleth, fel logos cwmni neu graffiau a siartiau. Bydd yr holl graffeg yn elwa o gael eu graddfa, yn gallu cael eu styled â CSS, a'r manteision eraill a restrir yn yr erthygl hon.
Cymorth i Porwyr Hŷn
Mae'r gefnogaeth gyfredol ar gyfer SVG yn dda iawn mewn porwyr modern. Yr unig borwyr sydd heb gefnogaeth gwirioneddol ar gyfer y graffeg hyn yw fersiynau hŷn o Internet Explorer (Fersiwn 8 ac is) ac ychydig fersiynau hŷn o Android. Ar y cyfan, mae canran fach iawn o'r boblogaeth pori yn dal i ddefnyddio'r porwyr hyn, ac mae'r nifer honno'n parhau i gaetho. Mae hyn yn golygu y gellir defnyddio SVG yn eithaf diogel ar wefannau heddiw.
Os ydych chi eisiau darparu gwrth-gefn ar gyfer SVG, gallwch ddefnyddio offeryn fel Grumpicon o'r Grwp Filament. Bydd yr adnodd hwn yn cymryd eich ffeiliau delwedd SVG a chreu anfanteision PNG ar gyfer porwyr hŷn.
Golygwyd gan Jeremy Girard ar 1/27/17