Scalable Vector Graphics, eller SVG, spiller en vigtig rolle i webstedsdesign i dag. Hvis du ikke i øjeblikket bruger SVG i dit webdesignarbejde, er her nogle grunde til, hvorfor du bør begynde at gøre det, såvel som fallbacks, du kan bruge til ældre browsere, der ikke understøtter disse filer.
Opløsning
Den største fordel ved SVG er opløsningsuafhængighed. Fordi SVG-filer er vektorgrafik (i modsætning til pixelbaserede rasterbilleder), kan du ændre størrelsen på dem uden at miste billedkvaliteten. Dette er især nyttigt, når du opretter responsive websteder, der skal se godt ud og fungere godt på tværs af en lang række skærmstørrelser og enheder. Du kan skalere SVG-filer op eller ned for at imødekomme de skiftende størrelse og layoutbehov på dit responsive websted uden at gå på kompromis med kvaliteten på nogen måde.
Generelt har SVG'er et glattere og skarpere udseende end billeder i andre formater, uanset størrelse.
Filstørrelse
En udfordring med at bruge rasterbilleder (f.eks. JPG, PNG, GIF) på responsive websteder er filstørrelsen. Fordi rasterbilleder ikke skalerer, som vektorbilleder gør, skal du levere dine pixelbaserede billeder i den største størrelse, hvor de vil blive vist. Det skyldes, at du altid kan gøre et billede mindre og bevare dets kvalitet, men det samme gælder ikke for at gøre billeder større. Resultatet er billeder, der er langt større end den størrelse, de bliver vist i, hvilket tvinger browsere til at downloade store filer.
I modsætning hertil er vektorgrafik skalerbar, så du kan bruge meget små filstørrelser, uanset hvor store disse billeder muligvis skal vises. Dette optimerer i sidste ende et websteds samlede ydeevne og downloadhastighed.
CSS-styling
Du kan nemt tilføje SVG direkte til HTML-koden på en side. Dette er kendt som inline SVG. En fordel ved at bruge inline SVG er, at fordi grafikken faktisk tegnes af browseren, er der ikke behov for en HTTP-anmodning for at hente en billedfil.
En anden fordel: Du kan style inline SVG med CSS. Skal du ændre farven på et SVG-ikon? I stedet for at redigere billedet i grafikredigeringssoftware og derefter eksportere og uploade filen igen, kan du ændre SVG-filen blot med et par linjer CSS. Du kan også bruge CSS til at ændre SVG'er til svævetilstande og andre designbehov.
Bundlinje
Fordi du kan style inline SVG-filer med CSS, kan du også bruge CSS-animationer på dem. CSS-transformationer og -overgange er to nemme måder at tilføje noget liv til SVG'er. Du kan få rige Flash-lignende oplevelser på en side uden at bruge Flash - hvilket iPad'en ikke længere understøtter. Faktisk udfaser Adobe Flash inden udgangen af 2020.
Anvendelser af SVG
Så kraftfulde som SVG'er er, kan de ikke erstatte alle andre billedformater. Billeder, der kræver rig farvedybde, skal være i JPG- eller PNG-format, men simple billeder som ikoner er perfekt egnede til at blive udført som SVG.
SVG er også velegnet til nogle komplekse illustrationer, såsom grafer, diagrammer og firmalogoer. Al denne grafik drager fordel af at være skalerbar og kunne styles med CSS.
Support til ældre browsere
Nuværende understøttelse af SVG er meget god i moderne webbrowsere. De eneste browsere, der mangler understøttelse af denne grafik, er gamle versioner af Internet Explorer (som Microsoft ikke længere understøtter) og et par gamle versioner af Android. Alt i alt bruger en meget lille procentdel af browserbefolkningen stadig disse browsere, og det antal fortsætter med at falde. Det betyder, at du kan bruge SVG på dit websted uden bekymringer.
Hvis du ønsker at give et alternativ til SVG, skal du bruge et værktøj såsom Grumpikon fra Filament Group. Denne ressource opretter PNG'er fra dine SVG-billedfiler.
