SVG – det “smarte” filformat

Derfor skal du bruge SVG vektor-formatet til dine grafiske elementer på hjemmesiden.

Når du skal opbygge din nye hjemmeside, er der mange vigtige ting at tage stilling til, hvis du gerne vil have at din kommu­nika­tion fremstår pro­fes­sionelt, og dine hjem­me­side får en god placering i googles søg­ninger. SVG er en af de ting du skal overveje.

Hjemmesidedesign er blevet langt mere avanceret de sidste år, dels fordi man i dag kan udvikle mere komplekse design med masser af funktionalitet, dels fordi designet i dag skal fungere flydende på mange forskellige skærmstørrelser, fra en stor computerskærm, til tablets og mobiler i mange forskellige størrelser og opløsninger.

Når du lægger grafik ind på din hjem­me­side, bruger de fleste JPEG (Joint Photo­graphic Experts Group) GIF (Graphics Interchange Format) eller png (Portable Network Graphics) filer. JPEG er en tabs­givende kom­­pres­­sions­metode til billeder og grafik. Formatet er meget udbredt, og bruges i de fleste kameraer og mobil­telefoner som standard arkive­rings­format. GIF bruges først og fremmest til små animationer, en funktion der ikke understøttes af de to andre formater. PNG er derimod en kompressionsmetode uden tab, der samtidig understøtter trans­pa­rens. PNG er designet til at over­føre og vise billeder og grafik på inter­nettet, men kan modsat JPEG ikke bruges til professionelle print, da formatet ikke understøtter CMYK farveprofiler.

Størrelsen er afgørende

Når du gemmer en grafik- eller billedfil til brug på din hjemmeside, er det meget vigtigt at være opmærksom på fil­stør­relsen. Dine billeder og grafik skal hentes ned til brugeres browser, og det er derfor afgørende for brugeroplevelsen, at filerne er så små som overhovedet mulig. Der findes forskellige metoder til at reducere filstørrelsen mest muligt, men da kvalitet hænger tæt sammen med filstørrelse, mister du skarphed, opløsning og farve­dybde i denne proces. Det kræver derfor viden og erfaring at mestre balancen mellem filstørrelse og god kvalitet. Skal din hjemmeside være optimeret til store såvel som små skærme, er det ofte nød­vendigt at have forskellige størrelser af samme grafik element, så filstørrelsen for hver breakpoint kan optimeres bedst muligt.

SVG formatet

Du læser dette blogindlæg, fordi du gerne ville vide mere om SVG, så lad os snakke om Scalable Vector Graphics, og hvorfor formatet egner sig særdeles godt til inter­nettet. SVG-formatet er et XML baseret vektorformat for todimensional grafik. For­matet understøtter udover trans­pa­rens også interaktivitet og animation, og kan læses af alle moderne browsere, inklusive Mozilla FireFox, Internet Explorer, Google Chrome, Opera, Safari og Microsoft Edge.

SVG vektorfiler understøtter grafik bygget på basis af matematiske værdier, som etab­lerer den nøjagtige placering af de enkelte punkter på et grid.

Vektor baserede filformater har tre kæmpe store fordele i forhold til raster baserede formater, nemlig filstørrelse og farveægthed og skarphed. En vektorfil kan skaleres uendeligt, uden at tabe kvalitet, og uanset skærmstørrelsen vil visningen altid være skarp og farverig. Da filen er baseret på tal, fylder den langt mindre en rasterbaseret fil, typisk i en størrelse un­der 60 kilobyte. Udover disse fordele, så indekserer Google også SVG-filer, hvilket betyder at du får yderligere fordele med hensyn til din SEO (Search Engine Optimization)

SVG-filens kanter er kniv skarpe

Hvordan opretter man en SVG fil?

De fleste professionelle tegne­pro­gram­mer understøtter i dag SVG som eksport format. Et af de bedste er Adobe Illu­stra­tor. Illustrator er et professionelt værktøj til opbygning af komplekse grafiske for­mer og er et af de mest brugte værktøjer for professionelle designere. Ønsker du at bruge Adobe Illustrator, kan du tegne abonnement på Adobes Creative Cloud service, hvor du kan vælge mellem forskellige programpakker.

Kan mit CMS håndtere SVG?

Der findes i dag en lang række hjemme­side platforme der gør det nemt og billigt at oprette en hjemmeside. Hvis du ønsker en hjemmeside hvor du får adgang til mest mulig funktionalitet, så er Word­Press nok det bedste CMS du kan vælge. WordPress er det mest populære CMS (Content Management System) i verden, og driver i dag mere end 30 procent af verdens hjemmesider.

WordPress er et Open Source CMS, og det udvikler sig hele tiden med ny funk­tionalitet og sikkerhed. WordPress er gratis, og der er ingen omkostninger for­bundet med at downloade, installere eller opgradere softwaren. Fordi WordPress er så udbredt, er det nemt at finde udvik­lere. WordPress har i dag over 500.000 plug-ins, der giver udvidet funktionalitet og features til den populære platform.

SVG animation

Det er blevet populært at bruge SVG-formatet til at lave små animationer til hjemmesider. Fordi SVG-filer er skalerbare, små og 100% kodebaseret. giver formatet mulighed for spændende transformationer og justeringer.

Man kan lave animationer vis CSS eller JavaScript, men det kræver viden og tålmodighed. Heldigvis dukker der hele tiden nye programmer op der gør det nemmere at arbejde med animation af SVG-filer. SVGATOR er en nyt smart onlinebaseret animationsplatform der går SVG animation tilgængelig for alle. Har du lyst til at prøve kræfter med SVG-animation, kan jeg klart anbefale SVGATOR.

Hvornår skal jeg bruge SVG?

SVG-filer er ikke løsningen på alle din hjemmesides grafik- og billede behov. Vektorformatet er bedst brugt til grafiske elemeter på dine hjemmeside, såsom logoer, tegninger grafer og illustrationer. Formatet er også perfekt til at lave baggrunde med forløb.

Selv om SVG-formatet er et stærkt fil­format med mange fordele, så erstatter det ikke alle andre billede-formater. Fotos der kræver stor farvedybde gemmes sta­dig bedst i JPEG eller PNG-formaterne.

Har du brug for hjælp?

Har du brug for hjælp til udvikling og opbygning af en professionel hjemmeside der går brug af de nyeste teknologier og optimering, så er CreateLab det rigtige valg. Vi vil elske at arbejde sammen med dig for at udvikle din digitale tilstedeværelse.

Del denne artikel med en ven.

SK/CreateLab 2021