Scalable Vector Graphics, eller SVG, spiller en viktig rolle i nettsteddesign i dag. Hvis du for øyeblikket ikke bruker SVG i webdesignarbeidet ditt, her er noen grunner til hvorfor du bør begynne å gjøre det, i tillegg til fallbacks du kan bruke for eldre nettlesere som ikke støtter disse filene.
Oppløsning
Den største fordelen med SVG er oppløsningsuavhengighet. Fordi SVG-filer er vektorgrafikk (i motsetning til pikselbaserte rasterbilder), kan du endre størrelsen på dem uten å miste bildekvaliteten. Dette er spesielt nyttig når du lager responsive nettsteder som må se bra ut og fungere godt på tvers av et bredt spekter av skjermstørrelser og enheter. Du kan skalere SVG-filer opp eller ned for å imøtekomme de skiftende størrelsene og layoutbehovene til det responsive nettstedet ditt uten å gå på akkord med kvaliteten på dem på noen måte.
Vanligvis har SVG-er et jevnere og skarpere utseende enn bilder i andre formater, uavhengig av størrelse.
Filstørrelse
En utfordring med å bruke rasterbilder (f.eks. JPG, PNG, GIF) på responsive nettsteder er filstørrelse. Fordi rasterbilder ikke skalerer slik som vektorbilder gjør, må du levere de pikselbaserte bildene dine i den største størrelsen de skal vises i. Dette er fordi du alltid kan gjøre et bilde mindre og beholde kvaliteten, men det samme gjelder ikke for å gjøre bilder større. Resultatet er bilder som er langt større enn størrelsen de blir sett på, noe som tvinger nettlesere til å laste ned store filer.
Derimot er vektorgrafikk skalerbar, slik at du kan bruke svært små filstørrelser uavhengig av hvor store disse bildene må vises. Dette optimaliserer til slutt et nettsteds generelle ytelse og nedlastingshastighet.
CSS Styling
Du kan enkelt legge til SVG direkte i HTML-en til en side. Dette er kjent som inline SVG. En fordel med å bruke inline SVG er at fordi grafikken faktisk tegnes av nettleseren, er det ikke nødvendig med en HTTP-forespørsel for å hente en bildefil.
En annen fordel: Du kan style inline SVG med CSS. Trenger du å endre fargen på et SVG-ikon? I stedet for å redigere det bildet i grafikkredigeringsprogramvare og deretter eksportere og laste opp filen igjen, kan du endre SVG-filen ganske enkelt med noen få linjer med CSS. Du kan bruke CSS til å endre SVG-er for svevetilstander og andre designbehov.
bunnlinjen
Fordi du kan style innebygde SVG-filer med CSS, kan du bruke CSS-animasjoner på dem også. CSS-transformasjoner og -overganger er to enkle måter å legge til litt liv til SVG-er. Du kan få rike Flash-lignende opplevelser på en side uten å bruke Flash – som iPaden ikke lenger støtter. Faktisk faser Adobe ut Flash innen utgangen av 2020.
Bruk av SVG
Så kraftige SVG-er er, kan de ikke erstatte alle andre bildeformater. Bilder som krever rik fargedybde, bør være i JPG- eller PNG-format, men enkle bilder som ikoner egner seg perfekt til å bli utført som SVG.
SVG passer også for noen komplekse illustrasjoner, som grafer, diagrammer og firmalogoer. All denne grafikken drar nytte av å være skalerbar og kunne styles med CSS.
Støtte for eldre nettlesere
Nåværende støtte for SVG er veldig bra i moderne nettlesere. De eneste nettleserne som mangler støtte for denne grafikken er gamle versjoner av Internet Explorer (som Microsoft ikke lenger støtter) og noen få gamle versjoner av Android. Alt i alt bruker en svært liten prosentandel av nettleserpopulasjonen fortsatt disse nettleserne, og det antallet fortsetter å krympe. Dette betyr at du kan bruke SVG på nettstedet ditt uten bekymringer.
Hvis du ønsker å gi en reserve for SVG, bruk et verktøy som Grumpikon fra Filament Group. Denne ressursen lager PNG-er fra SVG-bildefilene dine.
