Die voordele van die gebruik van Scalable Vector Graphics
Skaalbare vektorgrawe, of SVG, speel vandag 'n belangrike rol in webwerfontwerp. As jy tans nie SVG in jou webontwerpwerk gebruik nie, is hier 'n paar redes waarom jy dit moet begin, sowel as herhalings 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 plaas van rasterbeelde wat op die pixel gebaseer is, kan hulle verander word sonder om enige beeldkwaliteit te verloor. Dit is veral handig as jy reageer webwerwe skep wat goed moet lyk en goed werk oor 'n wye verskeidenheid skermgroottes en toestelle .
SVG-lêers kan op of af geskaal word om die veranderende grootte en uitlegbehoeftes van jou reageerwebwerf te akkommodeer en jy hoef nie bekommerd te wees oor die grafika wat enige stap van die pad gekompromitteer het nie.
Lêergrootte
Een van die uitdagings met die gebruik van raster beelde (JPG, PNG, GIF) op reageer webwerwe is die lêer grootte van die beelde. Omdat rasterbeelde nie die manier waarop vektorgemas doen, skaal nie, moet jy jou prente op die prentjie lewer op die grootste grootte waarop hulle vertoon sal word. Dit is omdat jy altyd 'n beeld kleiner kan maak en die kwaliteit daarvan behou, maar dit geld ook nie vir die maak van beelde groter nie. Die eindresultaat is dat jy dikwels beelde wat veel groter is as wat hulle op 'n persoon se skerm gewys word, wat beteken dat hulle onnodig gedwing word om 'n baie groot lêer af te laai.
SVG spreek hierdie uitdaging aan. Omdat die vektorgrafika skaalbaar is, kan u baie klein lêergroottes hê, ongeag hoe groot die beelde moontlik moet vertoon word. Dit sal uiteindelik 'n positiewe impak hê op die algehele prestasie en aflaaispoed van 'n werf.
CSS Styling
SVG-kode kan ook direk by die HTML van 'n bladsy bygevoeg word. Dit staan bekend as "inline SVG." Een van die voordele van die gebruik van inline SVG is dat aangesien die grafika eintlik deur die blaaier op grond van u kode geteken is, hoef u nie 'n HTTP-versoek te maak om 'n prentlêer te gaan haal nie. Nog 'n voordeel is dat inline SVG gestileer kan word met CSS.
Moet jy die kleur van 'n SVG-ikoon verander? In plaas daarvan om daardie prent in 'n soort van redigering sagteware oop te maak en die lêer weer te laai en op te laai, kan jy die SVG-lêer eenvoudig verander met 'n paar reëls CSS.
U kan ook ander CSS-style op SVG-grafika gebruik om dit op hover-state of vir sekere ontwerpbehoeftes te verander. Jy kan selfs die grafika animeer om beweging en interaktiwiteit aan 'n bladsy by te voeg.
animasies
Omdat inline SVG lêers gestileer kan word met CSS, kan jy ook CSS animasies op hulle gebruik. CSS transformasies en oorgange is twee maklike maniere om 'n bietjie lewe aan SVG-lêers by te voeg. Jy kan ryk, flitsagtige ervarings op 'n bladsy kry sonder om aan die nadele van Flash se webwerwe te voldoen.
Gebruik van SVG
Net so sterk soos SVG, kan hierdie grafika nie enige ander beeldformaat wat jy op jou webwerf gebruik, vervang nie. Foto's wat 'n diep kleurdiepte benodig, moet nog 'n JPG of dalk 'n PNG-lêer wees, maar eenvoudige beelde soos ikone is perfek geskik om uitgevoer te word as SVG.
SVG kan ook geskik wees vir meer komplekse illustrasies, soos maatskappy logo's of grafieke en kaarte. Al die grafika sal baat vind by skaalbare, stylvolle CSS, en die ander voordele wat in hierdie artikel genoem word.
Ondersteuning vir ouer blaaiers
Huidige ondersteuning vir SVG is baie goed in moderne webblaaiers. Die enigste blaaiers wat werklik geen ondersteuning vir hierdie grafika het nie, is ouer weergawes van Internet Explorer (weergawe 8 en onder) en 'n paar ouer weergawes van Android. Al met al, 'n baie klein persentasie van die blaai populasie gebruik steeds hierdie blaaiers, en die getal bly krimp. Dit beteken dat SVG vandag redelik veilig op webwerwe gebruik kan word.
As jy 'n terugval vir SVG wil gee, kan jy 'n instrument soos Grumpicon van die Filament Group gebruik. Hierdie bron sal jou SVG-beeldlêers neem en PNG-terugslag vir ouer blaaiers skep.
Geredigeer deur Jeremy Girard op 1/27/17