SVG-filer.

SVG-filformatet er et populært værktøj til visning af 2-dimensionelle grafikker, diagrammer og illustrationer på hjemmesider. Og som en vektorfil kan den skaleres op og ned uden at miste noget af opløsningen. Lær mere om de vigtigste funktioner for SVG-billeder, deres fordele og ulemper og hvordan SVG-formatet har udviklet sig.

SVG marquee-billede

Du vil lære mere om.

 

  • Hvad er en SVG-fil?
  • Baggrundshistorien bag SVG-filen
  • Hvad anvendes SVG-filer til?
  • Fordele og ulemper ved SVG-filer
  • Sådan åbner man en SVG-fil
  • Sådan skaber og redigerer man en SVG-fil
  • SVG-filer: ofte stillede spørgsmål

 

 

Hvad er en SVG-fil?

Skalerbar vektorgrafik (SVG) er et internetvenligt vektorfilformat. I modsætning til pixelbaserede rasterfiler som JPEG-filer lagrer vektorfiler billeder via matematiske formler baseret på punkter og linjer på et gitter. Det betyder, at vektorfiler som SVG kan tilpasses markant i størrelse uden at miste noget i kvalitet, hvilket gør dem perfekt egnede til logoer og komplekse online-grafikker. 

 

Det er ikke bare deres mulighed for tilpasning af størrelse, der gør SVG-filer enormt populære hos webdesignere. SVG-filer er skrevet i XML-kode, hvilket betyder, at de lagrer alle tekstinformationer som litteral tekst frem for former. Dette betyder, at søgemaskiner som Google kan læse SVG-grafik for deres nøgleord, hvilket potentielt kan hjælpe en hjemmeside med at opnå en højere placering i søgeresultater.

 

Du kan nemt genkende en SVG-fil på dens .svg filtypenavn.

 

 

Baggrundshistorien bag SVG-filen

Baggrundshistorien bag SVG-filen går helt tilbage til sidst i 1990'erne, da W3C (World Wide Web Consortium) inviterede udviklere til at give deres bud på en ny type vektorgrafikformat. Man modtog seks konkurrerende forslag, der endte med at blive W3Cs SVG-format.  

 

Det varede et stykke tid, før SVG-filer blev populære. Der var relativt begrænset opbakning til dem indtil 2017, hvor folk begyndte at opdage fordelene ved at bruge SVG-filer i moderne webbrowsere. SVG-filer anvendes nu i stort omfang til 2D-hjemmesidebilleder, fordi de fleste browsere og tegneapps til vektorfiler nemt kan håndtere dem.

 

 

Hvad anvendes SVG-filer til?

Skalerbare vektorgrafikker er nået langt inden for de seneste år - men hvad anvendes SVG-filer til i praksis?

 

Hjemmesideikoner og -logoer

Designere anvender ofte SVG-filer til at vise hjemmesideikoner som knapper, samt virksomhedslogoer. Denne filtypes evne til at skalere op eller ned uden at ødelægge kvaliteten, betyder at de egner sig perfekt til grafik, der skal vises flere forskellige steder og i mange forskellige størrelser.

 

Infografikker og illustrationer

Takket være brugen af XML i SVG-filer kan søgemaskiner som Google læse teksttunge diagrammer og grafer, der kan hjælpe ved søgemaskineoptimering. Fordi Google kan registrere nøgleord i SVG-filer, kan det potentielt give en hjemmeside en højere placering i søgeresultater. Og for at hjælpe med at gøre hjemmesider meget mere interessante, understøtter SVG-filer også animation.

 

Opdag flere vektorfiler

 

 

Fordele og ulemper ved SVG-filer

Det er værd at undersøge SVG-fordele og ulemper, inden du gemmer dine billeder i dette format.

 

Fordele ved SVG-filer

  • Modsat rasterfiler, der består af pixler, bevarer vektorgrafikker som SVG-filer altid deres opløsning - uanset hvor store eller små du laver dem. Du behøver ikke at bekymre dig om, at SVG-billeder mister deres kvalitet i bestemte browsere, eller hvis du tilpasser deres størrelse for at få dem vist forskellige steder.
     
  • Basis SVG-filer er ofte mindre end rasterbilleder, der er skabt på basis af masser af farvede pixler frem for matematiske algoritmer. 
     
  • Fordi SVG-filer behandler tekst som tekst (og ikke som design), kan skærmlæsere scanne alle ord, der findes i SVG-billeder. Dette er meget nyttigt for mennesker, der har behov for hjælp til at læse hjemmesider. Søgemaskiner kan også læse og indeksere SVG-billedtekst.

 

Ulemper ved SVG-filer

  • SVG-filer er fantastiske til webgrafik som logoer, illustrationer og diagrammer. Men deres mangel på pixler gør det vanskeligt at vise digitalfotos i høj kvalitet. JPEG-filer er generelt bedre til detaljerede fotografier. 
     
  • Kun moderne browsere kan understøtte SVG-billeder. Du synes måske, at det er en udfordring at anvende SVG-filer med Internet Explorer 8 og andre ældre browsere.
     
  • Koden, der ligger i SVG-billeder, kan være svær at forstå, hvis du er ny inden for dette filformat. 

 

 

Sådan åbner man en SVG-fil

Alle de vigtigste browsere lige fra Chrome og Edge til Safari og Firefox giver dig mulighed for at åbne SVG-filer i dag - uanset om du arbejder med Mac eller Windows. Start din browser og klik på Filer > Åbn for at vælge den fil, du ønsker at se. Den vises derefter i din browser.

 

Ligeså nemt er det at åbne et SVG-billede med et indbygget program på din computer. Dobbeltklik på filnavnet, så får du en liste med programmer, der åbner det - eller det åbnes automatisk i et kompatibelt program.

 

 

Sådan skaber og redigerer man en SVG-fil.

Følg disse trin, når du anvender Adobe Photoshop

 

  1. Når du har sammensat et billede i Photoshop, skal du klikke på Filer > Eksportér > Eksportér som.
     
  2. Klik på rullemenuen Format i den boks, der vises, og vælg SVG.
     
  3. Vælg Eksportér alt, og gem filen. 

 

En praktisk bemærkning: da Photoshop er en rastergrafikeditor, foretrækker mange at skabe og redigere SVG-filer i Adobe Illustrator, en vektorgrafikeditor.

 

 

SVG-filer: ofte stillede spørgsmål.

Understøtter SVG-filer animation?

SVG-filformatet er ikke kun beregnet til statiske billeder. Du vil opdage en lang række online-værktøjer, der kan hjælpe dig med at indføre bevægelige elementer i dine webgrafikker. SVG-animationer kan indeholde relativt grundlæggende elementer, som f.eks. en skydeknap, der kan flyttes mellem forskellige slides i en infografik. Illustrationer kan også laves, så de kan bevæge sig f.eks. tikkende visere på en urskive.

 

Hvordan genkender jeg en SVG-fil?

Den letteste måde at genkende en SVG-fil er at tjekke filtypekoden. En SVG-fil anføres som en .svg-fil. Du kan også genkende vektorbilleder som SVG-filer ved at forstørre dem op til 200 % eller mere på din computerskærm. Et vektorbillede vil bevare sine rene linjer og dækkende farver i stedet for at blive pixelerede eller slørede.

 

Kan SVG-filer kun anvendes på internettet?

Selv om SVG-billeder primært anvendes på internettet, har de også et liv andre steder end i online-verdenen. Fordi de ikke bliver forvrængede, når de ændrer størrelse fra originale dimensioner, kan SVG-filer for eksempel også anvendes som skabeloner til tryk på tøj, som f.eks. T-shirts. En JPEG-fil, der er skabt af masser af pixler, ville ikke kunne overføres så rent.

 

Hvor store er SVG-filer?

Størrelsen af en SVG-fil afhænger af, hvor mange billeddata den indeholder - men det er normalt mindre end de fleste andre filtyper. Komplekse grafikker med mange stier og ankerpunkter vil optage mere plads end mere simple, renere design. Forsøg at reducere antallet af komplekse instruktioner, der er indeholdt i din fil.

 

Hvad er forskellen på SVG- og PNG-filer?

SVG-filer er i bund og grund vektorfiler, hvorimod PNG-filer er rasterfiler. Hvis du udvider en PNG-fil for meget eller gør den for lille, så bliver den sløret og pixeleret. SVG-filer indeholder ikke pixler, så de mister aldrig opløsning. Dertil kommer, at PNG-filer ikke understøtter animation.

Lær mere om lignende filtyper til SVG-filer.

PNG-filbillede

PNG-filer

Lær mere om et andet populært format til webgrafikker og logoer.

JPEG-filbillede

JPEG-filer

Find ud hvorfor JPEG-filer er designet med henblik på komplekse digitale fotos.

HEIC-filbillede

HEIC-filer

Lær denne nye type rasterfil fra personerne bag Apple at kende.

AI-filbillede

AI-filer

Opdag dette meget udbredte vektorformat udviklet til Adobe Illustrator.

Sammenlign SVG-filer med andre filtyper.

SVG- kontra PNG-filbillede

SVG kontra PNG

Hvilket filformat tager prisen inden for webdesign?

SVG- kontra EPS-filbillede

SVG kontra EPS

Se nærmere på deres trykegenskaber.

Find den plan, der passer til dig

Illustrator

Adobe Illustrator Single App

Skab smuk vektorgrafik og illustrationer
Gratis i 7 dage, derefter 186,25 DKKom måneden.

InDesign

Adobe InDesign Single App

Skab elegante sidelayout til tryk og digitale medier.
7 dage gratis, derefter 186,25 DKK om måneden.

Lightroom

All Apps

Få hele samlingen af kreative apps og meget mere.
7 dage gratis, derefter 487,50 DKKom måneden.