Liv dit website op med kodet grafik

Hvad brugerne forventer af et website, stiger år for år. De fleste brugere er vant til apps der loader det millisekund de åbnes, og rige, interaktive oplevelser kendt fra spil og programmer de har på deres computere. Det falder dem ikke ind, at der kan være teknologiske flaskehalse der gør det sværere at skabe den slags miljøer på nettet.

Det er op til os at sikre, at de websites og web apps vi laver, lever op til brugernes forventninger og høje standarder. Og i dag vil jeg introducere et af mine foretrukne værktøjer der hjælper mig med at nå det mål. Et værktøj der hjælper mig til få websites til at loade hurtigere, tilbyde interaktive oplevelser, og skalere til forskellige skærmstørrelser.

Det værktøj hedder SVG.

Hvad er SVG?

SVG - lavet i Inkscape
SVG – lavet i Inkscape

SVG står for ‘Scalable Vector Graphics’, og er – som navnet antyder – en form for vektorgrafik. Kodet vektorgrafik. Det kan importeres fra Adobe Illustrator og lignende programmer af en designer… Eller det kan håndkodes af en programmør. Eller en kombination af de to ting.

Allerede her kan man se gode muligheder for et givtigt samarbejde mellem designere og udviklere – men det bliver bedre endnu.

S’et i SVG står for ‘scalable’. Evnen til at tilpasse sig skærmens størrelse er indbygget i formatet, og da det er et vektor-format vil grafikken altid stå knivskarpt – selv på de største TV-skærme. Det gør det perfekt til vor tids fragmenterede landskab af smartphones, tablets, computere, konsoller og andre devices, som brugerne kunne tænkes at benytte.

Og da det er kode der er tale om, kan hvert enkelt element af grafikken manipuleres separat. Du kan gøre knapper interaktive, eller animere dele af “billedet”.

Du kan lave interaktive grafer, bannerreklamer, tegnefilm eller spil. I princippet alt det, som Flash engang blev brugt til på nettet. Og bedre endnu… Det loader super hurtigt, da det jo “bare” er en del af sidens kode frem for ekstra billedfiler der lige skal hentes fra serveren før de dukker op på siden.

Loadhastigheden er ekstremt vigtig at tage i betragtning i dag – den kan oversættes direkte til antal brugere der forlader din side i frustration over at skulle vente – hvilket i sidste ende også kan ses på bundlinjen… Og billeder ligger i den tunge ende af skalaen hvad angår ting, der gør websites langsomme.

Desværre kan du ikke bare eliminere billeder fra siden. De er jo en vigtig del af indholdet, skaber blikfang der gør folk interesserede i indholdet, og de gør siden fed at se på.

Her tilbyder SVG dig en win win situation… Du kan erstatte baggrunde, ikoner og de grafiske billedfiler i indholdet med SVG – give brugerne en fed oplevelse på din side, og tilmed få siden til at loade hurtigere end dine konkurrenters.

Eksempler på brug af SVG

See the Pen When you’re an introvert… by Sarah Drasner (@sdras) on CodePen.16999

Ovenstående eksempel er en kort tegnefilm lavet i SVG og JavaScript. Her kan I tydeligt se hvad jeg mente med at man kunne animere del-elementer af grafikken. Det meste af “billedet” er statisk og skifter højest farve, men enkelte elementer animerer ind og ud.

See the Pen 💥 Boom 💥 by Sarah Drasner (@sdras) on CodePen.16999

Kunne du tænke dig at se Jorden eksplodere? Så klik på “Start”-knappen i ovenstående demo. Bemærk: denne animation er med lyd!

See the Pen SVG Space Rocket! by Chris Gannon (@chrisgannon) on CodePen.16999

Chris Gannon, som har lavet ovenstående demo, har længe været en af mine store inspirationskilder. Han tager enkle elementer, og sætter dem sammen for at skabe den mest elegante grafik, og de mest naturlige animationer. I denne demo findes der to versioner af rumraketten… Den ene står stille på rampen, den anden flyver derudaf – og hvis du trækker cirklen rundt, vil du også finde en astronaut ved siden af den.

See the Pen Advanced animation path by LegoMushroom (@sol0mka) on CodePen.16999

Denne animation er en mere simpel af slagsen – men den fungerer. Man kan animere elementer langs en prædefineret kurve ved hjælp af SVG – såsom disse rutschebaner.

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.16999

Lucas Bebber blev kendt for sine “goo” (klister) effekter med SVG filtre – såsom denne klassiker. Klik på menu-ikonet, og se menupunkterne blive “udskilt”.

See the Pen SVG memory game by Allan Pope (@allanpope) on CodePen.16999

Der skal selvfølgelig også et spil med. Dette er et helt klassisk vendespil – men med SVG. Derfor animerer billederne også ind, når man klikker på boksene, frem for bare at dukke op.

See the Pen Animating the viewbox by David Bachmann Johannesson (@dbj) on CodePen.16999

Man må heller ikke overse muligheden af at gøre brug af det koordinatsystem, der følger med SVG. Det kan manipuleres med JavaScript eller CSS – man kan flytte hele grafikken rundt samlet, eller vise forskellige dele af den alt efter f.eks. skærmstørrelsen. Ovenstående er et af mine foretrukne eksempler.

See the Pen The Dark Side of the SVG by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.16999

Og så kan jeg selvfølgelig ikke slutte af, uden lige at vise en af mine egne SVG animationer.

Jeg håber, I føler jer inspirerede nu

SVG er egentlig en gammel teknologi. Den har eksisteret siden 1999. Men browserne var længe om at samle den op, da de jo dengang lå i indbyrdes krig, og foretrak indlejret indhold såsom Flash. Det var først da Flash gradvist blev fjernet fra browserne, at SVG fik sit gennembrud. Derfor er der stadig mange udviklere, der ikke ved hvordan man kan bruge det – eller til hvad.

Jeg håber, denne lille intro har inspireret jer til at overveje at give SVG en chance.

Og skulle du ligefrem have fået lyst til selv at lære at bruge SVG – så har jeg lavet en SVG Guide, du kan finde på min GitHub profil.

Held og lykke med det – og send mig endelig en besked, hvis du har nogen spørgsmål. SVG er en af mine passioner indenfor webudvikling, og jeg velkommer altid en god snak om emnet. 🙂

SVG grafik af delvist tegnet cyklist

Er du interesseret i et samarbejde?