De foardielen fan it brûken fan Skalbere Vector Graphics
Skalierbare Vector Graphics, of SVG, spylje hjoed in wichtige rol yn 'e webstee. As jo de SVG net op it stuit brûke yn jo web-ûntwerp wurkje, dan binne guon redenen wêrom't jo begjinne moatte, en ek fallbacks kinne jo brûke foar âldere browsers dy't dizze bestannen net stypje.
Resolúsje
De grutste foardiel fan SVG is ûnôfhinklikens resolúsje. Omdat SVG-triemmen fektorôfbylden binne ynstee fan pikselbasis rasterbyldings, kinne se werombelle wurde sûnder gjin ôfbylding kwaliteit te ferliezen. Dit is benammen nuttich as jo inisjele webside meitsje dy't goed fine en goed wurkje oer in breed oanbod fan skermgrutte en apparaten .
SVG-bestannen kinne opheven of nei ûnderen wurde om de feroarjende grutte en oanpassingsbehearders fan jo opfrege webside te befoarderjen en jo moatte net soargen oer dy grafiken dy't kompromisearre kwaliteit alle stap fan 'e wei hawwe.
Bestânsgrutte
Ien fan 'e problemen mei it brûken fan rasterbyldings (JPG, PNG, GIF) op responsive websides is de triemgrutte fan dy ôfbyldings. Om't rasterbylden net sjogge de manier wêrop dizze fektoren dogge, moatte jo piksels basearre ôfbyldings leverje op de grutste grutte wêryn't se werjûn wurde. Dit is om't jo altyd in ôfbylding lytser meitsje kinne en har kwaliteit bewarje, mar itselde is net wier foar it meitsjen fan bylden grutter. It einresultaat is dat jo faak ôfbyldings hawwe dy't grutter binne as se werjûn wurde op in skerm fan in persoan, dat betsjut dat se net nedich binne om in tige grut file te downloaden.
SVG adressearret dizze útdaging. Omdat de fektorgrafyk skalabel is, kinne jo gewoan lytse triemgrutte hawwe, lykwols hoe grut dan de ôfbyldings nedich wêze moatte. Dit sil úteinlik in positive ynfloed hawwe op 'e totale prestaasjes en de downloadsnivo fan' e site.
CSS Styling
SVG-koade kin ek direkt oan it HTML fan in side tafoege wurde. Dit is bekend as "ynline-SVG". Ien fan 'e foardielen fan it ynlade SVG is dat, om't de grafyk werklik tekene wurdt troch de browser, basearre op jo koade, is net nedich om in HTTP-fersyk te meitsjen om in byldbestân te heljen. In oare foardiel is dat SVG ynsteld kin mei CSS stylearre wurde.
Moatte de kleur fan in SVG-ikoan feroarje? Ynstee fan it nedigen dat dizze ôfbylding yn in soarte fan editing-software te iepenjen en de triem wer ymportearje en te laden, kinne jo de SVG-bestân gewoan feroarje mei in pear rigels fan CSS.
Jo kinne ek oare CSS-stilen brûke op SVG-grafiken om se te feroarjen op hoverstaten of foar bepaalde ûntwerpbedragen. Jo kinne sels sels grafyske animaasjes oanmeitsje om wat beweging en ynteraktiviteit oan in side ta te foegjen.
Animaasjes
Omdat ynline SVG-triemmen mei CSS stylearre wurde kinne jo ek CSS-animaasjes brûke. CSS feroaret en transysjes binne twa maklike manieren om wat libben oan SVG-bestannen te foegjen. Jo kinne rike Flash-like-ûnderfinings krije op in side sûnder it oergean oan ' e downsides dy't hjoeddedei mei Flash brûke op websides.
Gebrûk fan SVG
As krêftich as SVG is, kinne dizze grafiken net elke oare byldfoarm ferfange dy jo brûke op jo webside. Foto's dy't djiptefolle djipte nedich binne, moatte noch in JPG wêze of miskien in PNG-bestân, mar ienfâldige ôfbyldings lykas ikoanen binne perfoarst suksesfol as SVG.
SVG kin ek passend wêze foar komplekere yllustraasjes, lykas bedriuwen logos of grafiken en diagrammen. Alle fan 'e grafiken sille profitearje fan skalberber, mei te meitsjen mei CSS, en de oare foardielen dy't yn dit artikel opnommen binne.
Stipe foar âldere browsers
Aktuele stipe foar SVG is tige goed yn moderne webbrowsers. De iennige browsers dy't folslein gjin stipe foar dizze grafyske teksten binne âldere ferzjes fan Internet Explorer (ferzje 8 en hjirûnder) en in pear âldere ferzjes fan Android. Altyd, in tige lyts persintaazje fan de blêdende populaasje brûkt dizze browsers noch, en dat nûmer bliuwt blokkearje. Dit betsjut dat SVG hjoed safier safely brûkt wurde kin op websiden.
As jo in fallback foar SVG leverje wolle, kinne jo in tool brûke as Grumpicon fan 'e filament groep. Dizze boarne sil jo SVG -ôfbyldtriemmen nimme en PNG-fallbacks foar âldere browsers oanmeitsje.
Edited by Jeremy Girard on 1/27/17