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 kommunikation fremstår professionelt, og dine hjemmeside får en god placering i googles søgninger. 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 hjemmeside, bruger de fleste JPEG (Joint Photographic Experts Group) GIF (Graphics Interchange Format) eller png (Portable Network Graphics) filer. JPEG er en tabsgivende kompressionsmetode til billeder og grafik. Formatet er meget udbredt, og bruges i de fleste kameraer og mobiltelefoner som standard arkiveringsformat. 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 transparens. PNG er designet til at overføre og vise billeder og grafik på internettet, 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å filstørrelsen. 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 farvedybde 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ødvendigt at have forskellige størrelser af samme grafik element, så filstørrelsen for hver breakpoint kan optimeres bedst muligt.

Du tænker måske, at det ikke betyder så meget at dine filer er lidt for store, men her tager du fejl. En af de vigtigste forudsætninger for at få et godt kvalitets score af Google, med en dertil god placering i Googles søgeresultat, er at optimere dine sides download hastighed, så din besøgende får en så god oplevelse som mulig. Google ønsker at henvise sine brugere til de bedste sider, og i Googles samlede point system ligger din hjemmesides læsehastighed højt.

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 internettet. SVG-formatet er et XML baseret vektorformat for todimensional grafik. Formatet understøtter udover transparens 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 etablerer 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 under 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)

CreateLabs logo i PNG – og SVG-format

CreateLab Logo
CreateLab logo uden tekst
CreateLab Logo

PNG-fil
Grafik bliver hurtig uskarp ved skalering

CreateLab logo

SVG-fil
Læg mærke til hvor skarpt grafikken fremstår

PNG-fil.
Grafik bliver hurtig uskarp ved skalering.

SVG-fil.
Læg mærke til hvor skarpt grafikken fremstår.

hvis du har brug for hjælp med din hjemmeside

Hvordan opretter jeg en SVG fil?

De fleste professionelle tegneprogrammer understøtter i dag SVG som eksport format. Et af de bedste er Adobe Illustrator. Illustrator er et professionelt værktøj til opbygning af komplekse grafiske former 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åndterer SVG?

Der findes i dag en lang række hjemmeside 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 WordPress 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 funktionalitet og sikkerhed. WordPress er gratis, og der er ingen omkostninger forbundet med at downloade, installere eller opgradere softwaren. Fordi WordPress er så udbredt, er det nemt at finde udviklere. WordPress har i dag over 500.000 plug-ins, der giver udvidet funktionalitet og features til den populære platform.

WordPress kernen understøtter ikke på nuværende tidspunkt SVG, men hvis du installerer et plug-in ved navn SVG-support, kan du importere og bruge SVG filer på din hjemmeside.

SVG-upport plugin til WordPress

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.

Selvom SVG-formatet er et stærkt filformat med mange fordele, så erstatter det ikke alle andre billede-formater. Fotos der kræver stor farvedybde gemmes stadig bedst i JPEG eller PNG-formaterne.

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.

 

SK/CreateLab2020

Del denne artikel med dine venner