Scalable Vector Graphics, of SVG, speel vandag 'n belangrike rol in webwerf-ontwerp. As jy nie tans SVG in jou webontwerpwerk gebruik nie, is hier 'n paar redes waarom jy dit moet begin doen, asook terugval wat jy kan gebruik vir ouer blaaiers wat nie hierdie lêers ondersteun nie.
Resolusie
Die grootste voordeel van SVG is resolusie-onafhanklikheid. Omdat SVG-lêers vektorgrafika is (in teenstelling met pixel-gebaseerde rasterbeelde), kan jy hulle grootte verander sonder om beeldkwaliteit te verloor. Dit is veral nuttig wanneer jy responsiewe webwerwe skep wat goed moet lyk en goed moet werk oor 'n wye reeks skermgroottes en toestelle. Jy kan SVG-lêers op of af skaal om die veranderende grootte en uitlegbehoeftes van jou responsiewe webwerf te akkommodeer sonder om hul kwaliteit op enige manier te benadeel.
Oor die algemeen het SVG's 'n gladder, skerper voorkoms as beelde van ander formate, ongeag die grootte.
Lêergrootte
Een uitdaging met die gebruik van rasterprente (bv. JPG, PNG, GIF) op responsiewe webwerwe is lêergrootte. Omdat rasterbeelde nie skaal soos vektorbeelde doen nie, moet jy jou pixel-gebaseerde beelde in die grootste grootte lewer waarop dit vertoon sal word. Dit is omdat jy altyd 'n prent kleiner kan maak en die kwaliteit daarvan kan behou, maar dieselfde is nie waar om prente groter te maak nie. Die resultaat is prente wat baie groter is as die grootte waarop dit bekyk word, wat blaaiers dwing om groot lêers af te laai.
Daarteenoor is vektorgrafika skaalbaar, so jy kan baie klein lêergroottes gebruik, ongeag hoe groot daardie beelde dalk vertoon moet word. Dit optimeer uiteindelik 'n werf se algehele werkverrigting en aflaaispoed.
CSS-stilering
Jy kan SVG maklik direk by die HTML van 'n bladsy voeg. Dit staan bekend as inline SVG. Een voordeel van die gebruik van inlyn SVG is dat, omdat die grafika eintlik deur die blaaier geteken word, daar nie 'n HTTP-versoek nodig is om 'n beeldlêer te gaan haal nie.
Nog 'n voordeel: Jy kan inlyn SVG met CSS stileer. Moet die kleur van 'n SVG-ikoon verander? In plaas daarvan om daardie prent in grafiese redigering sagteware te redigeer en dan die lêer weer uit te voer en op te laai, kan jy die SVG-lêer eenvoudig met 'n paar reëls CSS verander. Jy kan CSS gebruik om SVG's vir sweeftoestande en ander ontwerpbehoeftes ook te verander.
Onderste reël
Omdat jy inlyn SVG-lêers met CSS kan stileer, kan jy CSS-animasies ook daarop gebruik. CSS-transformasies en -oorgange is twee maklike maniere om 'n bietjie lewe by SVG's te voeg. Jy kan ryk Flash-agtige ervarings op 'n bladsy kry sonder om Flash te gebruik - wat die iPad nie meer ondersteun nie. Trouens, Adobe is besig om Flash teen die einde van 2020 uit te faseer.
Gebruik van SVG
So kragtig soos SVG's is, kan hulle nie elke ander beeldformaat vervang nie. Foto's wat ryk kleurdiepte steeds vereis, moet in JPG- of PNG-formaat wees, maar eenvoudige prente soos ikone is perfek geskik om as SVG uitgevoer te word.
SVG is ook geskik vir sommige komplekse illustrasies, soos grafieke, grafieke en maatskappylogo's. Al hierdie grafika baat daarby dat dit skaalbaar is en met CSS gestileer kan word.
Ondersteuning vir ouer blaaiers
Huidige ondersteuning vir SVG is baie goed in moderne webblaaiers. Die enigste blaaiers wat nie ondersteuning vir hierdie grafika het nie, is ou weergawes van Internet Explorer (wat Microsoft nie meer ondersteun nie) en 'n paar ou weergawes van Android. Al met al gebruik 'n baie klein persentasie van die blaaierpopulasie steeds hierdie blaaiers, en daardie getal hou aan om te krimp. Dit beteken dat jy sonder bekommernis SVG op jou webwerf kan gebruik.
As jy wel 'n terugval vir SVG wil verskaf, gebruik 'n instrument soos Grumpicon van die Filament Group. Hierdie hulpbron skep PNG'e vanaf jou SVG-prentlêers.
