6 fordeler med SVG-vektorgrafikk

Fordel 1: uendelig skalering uten forvrenging

SVG beskriver former med matematiske baner, og når du forstørrer, tegner nettleseren den ganske enkelt på nytt i den nye størrelsen. Ikoner forblir skarpe på Retina-skjermer, og en logo som skaleres til reklameplakatstørrelse er fortsatt tydelig – du trenger ikke å lage flere oppløsninger som med en bitmap. Dette er den sentrale fordelen ved vektorgrafikk og grunnen til at logoer og ikoner må vektoriseres. For responsive sider dekker én SVG-ikon alle situasjoner fra telefon til 4K-skjerm, så du trenger ikke å klippe egne bilder for hver enhet.

Fordel 2: små filer og rask sideinnlasting

SVG-en til en enkel ikon veier ofte bare noen kB – langt mindre enn et sett PNG-er i flere oppløsninger. Og siden SVG er tekst, komprimeres den utrolig godt med gzip eller Brotli, noe som kutter den overførte størrelsen med ytterligere sekstise til åtti prosent. På en side tett pakket med ikoner merkes byttet til SVG tydelig i båndbredden. Komplekse illustrasjoner krever imidlertid at antall baner holdes under kontroll; se tips for SVG-optimalisering for detaljene. Når et ikonsystem går over til SVG, synker de totale byteene som hentes for bilder over folden ofte med mer enn halvparten, noe som er særlig verdt på trege forbindelser.

Fordel 3: programmerbar, interaktiv og animerbar

SVG er en del av DOM: du kan endre fyllingen til en ikon med CSS, styre en strekeanimasjon med JavaScript og reagere på klikk og hovering. Å bytte ikonfarger i mørk modus, å markere en diagramdel ved hover og å lade-animasjoner kan gjøres direkte i SVG – ingen bildeutskifting og ingen bildekildeanimering. Rasterformater kan ganske enkelt ikke gjøre dette. Datavisualisering har mest nytte av det: hver stolpe og hvert linjesegment i et diagram er en uavhengig bane, så hover-markering og drilldown-hendelser kan kobles direkte på.

Fordel 4: redigerbar tekst, SEO- og tilgjengelighetsvennlig

Tekst i en SVG er ekte tekst – den kan markeres, søkes og oversettes. Legg til <title> og <desc>-beskrivelser i en grafikk, så kan skjermlesere formidle den mens søkemotorer forstår hva illustrasjonen betyr. Tekst i en bitmap er bare piksler, usynlig for både søkemotorer og skjermleserbrukere. Flerspråklige nettsteder kan også oversette teksten i en SVG direkte, uten å eksportere bildet på nytt.

Fordel 5: én kildefil som gjenbrukes overalt

Samme SVG fungerer på en nettside, kan eksporteres som høyoppløst PNG til et dokument og kan sendes til trykk- og lasergravyrutstyr. Når merkefargen endres, redigerer du én kildefil, og alle bruk oppdateres samtidig, i stedet for å bygge opp hver størrelse på nytt. For et team betyr det mye lavere vedlikeholdskostnad for ressursene. Netthandel og merketeam har særlig nytte av det: én vektorisering lar hver produktside, emballasje og arrangementsmateriell gjenbruke den samme illustrasjonen, og en fargeendring betyr vedlikehold av én enkelt kildefil.

Fordel 6: en åpen standard med et modent økosystem

SVG er en åpen W3C-standard som støttes direkte av alle moderne nettlesere, og som kan leses og skrives av designverktøy som Illustrator, Figma og Inkscape, uten å låse deg til én leverandør. Objektivt sett har også SVG sine begrensninger: det passer ikke for fotografiske bilder, gjengivelsen blir tregere når banene blir altfor komplekse, og foto bør ligge igjen i JPG eller WEBP. Open source-miljøet har også bygget et modent verktøysett rundt SVG – SVGO for komprimering, ikonbiblioteker og animasjonsbiblioteker – alt klart til bruk.

Ny i SVG? Bruk verktøyet Bilde til SVG for å gjøre om bitmapene du har til vektorer, eller bla gjennom og last ned gratis vektorressurser i PolySVG-galleriet. For å komme i gang, les Hva er SVG og Forskjellen mellom PNG og SVG.