SVG-filer.

SVG-filformatet er et populært verktøy for visning av todimensjonale grafikkelementer, diagrammer og illustrasjoner på webområder. SVG-filene er i tillegg vektorfiler, noe som betyr at de kan skaleres opp eller ned uten å miste noe av oppløsningen. Finn ut mer om SVG-bildenes hovedfunksjoner og fordeler og ulemper, og hvordan SVG-formatet har utviklet seg.

SVG marquee image

Hva er en SVG-fil?

Scalable Vector Graphics (SVG) er et webvennlig vektorfilformat. I motsetning til pikselbaserte rasterfiler som JPEG-filer, lagrer vektorfiler bilder via matematiske formler basert på punkter og linjer på et rutenett. Dette betyr at du kan endre størrelsen på vektorfiler, for eksempel SVG-filer, betraktelig uten å miste noe av kvaliteten, noe som gjør dem ideelle for logoer og kompleks grafikk på nettet.

Det er ikke kun muligheten for å endre størrelse som gjør SVG-filene svært populære blant webdesignere. SVG-filer er skrevet i XML-kode, noe som betyr at de lagrer all tekstinformasjon som bokstavelig tekst i stedet for former. Dette gjør at søkemotorer som Google kan lese SVG-grafikk for søkeordene sine, noe som potensielt kan hjelpe et webområde med å rykke opp i søkerangeringer.

Du kan enkelt identifisere en SVG-fil ved hjelp av filtypen SVG.

SVG-filens historie.

SVG-filens historie går tilbake til slutten av 1990-tallet, da World Wide Web Consortium (W3C) inviterte til forslag fra utviklere til en ny type vektorgrafikkformat. Seks konkurrerende forslag ble sendt inn og bidro til det som til slutt ble W3Cs SVG-format.

Det tok litt tid før SVG-formatet ble populært. Det var relativt lite støtte for dem før 2017, da folk begynte å se fordelene med å bruke SVG-filer i moderne nettlesere. SVG-filer er nå mye brukt for 2D-webområdebilder fordi de fleste nettlesere og tegneapplikasjoner for vektorfiler kan håndtere dem på en enkel måte.

Fordeler og ulemper ved SVG-filer.

Det er verdt å undersøke fordelene og ulempene ved SVG før du lagrer bildene dine i dette filformatet.

Fordeler ved SVG-filer.

  • I motsetning til rasterfiler, som består av piksler, beholder vektorgrafikk alltid oppløsningen – uansett hvor store eller små du gjør bildene. Du trenger ikke å bekymre deg for at SVG-bildene mister kvaliteten i enkelte nettlesere eller når du endrer størrelsen på dem for visning på ulike steder.
  • Grunnleggende SVG-filer er ofte mindre enn rasterbilder, som består av mange fargede piksler i stedet for at det er brukt matematiske algoritmer.
  • Siden SVG-filer håndterer tekst som tekst (og ikke som design), kan skjermlesere skanne alle ordene i SVG-bilder. Dette er svært nyttig for folk som trenger hjelp til å lese nettsider. Søkemotorer kan også lese og indeksere SVG-bildetekst.

Ulemper ved SVG-filer.

  • SVG-filer er ypperlige for webgrafikk som logoer, illustrasjoner og diagrammer. Men mangelen på piksler gjør det vanskelig å vise digitale bilder av høy kvalitet. JPEG-filer er generelt bedre for detaljerte fotografier.
  • Kun moderne nettlesere kan støtte SVG-bilder. Det kan være utfordrende å bruke SVG-filer sammen med Internet Explorer 8 og andre eldre nettlesere.
  • Koden i SVG-bilder kan være vanskelig å forstå hvis du ikke har brukt filformatet før.

Slik åpner du en SVG-fil.

Alle de store nettleserne – alt fra Chrome og Edge til Safari og Firefox – lar deg åpne SVG-filer i disse dager, uansett om du bruker Mac eller Windows. Bare åpne nettleseren og klikk på Fil

Åpne for å velge filen du vil vise. Den vil da vises i nettleseren.

Det er like enkelt å åpne et SVG-bilde med et innebygd program på datamaskinen. Dobbeltklikk på filnavnet, så får du en liste over programmer som kan åpne den. Eventuelt åpnes filen automatisk i et kompatibelt program.

Slik oppretter og redigerer du en SVG-fil.

Følg disse trinnene når du bruker Adobe Photoshop:

  1. Når du har laget et bilde i Photoshop, klikker du på Fil > Eksport > Eksporter som.
  2. Klikk på Format-rullegardinmenyen i boksen som vises, og velg deretter SVG.
  3. Velg Eksporter alle og lagre filen.

En nyttig merknad: Siden Photoshop er et redigeringsprogram for rastergrafikk, foretrekker mange å opprette og redigere SVG-filer i Adobe Illustrator, et redigeringsprogram for vektorgrafikk.

SVG-filer: vanlige spørsmål.

Hva er en SVG-fil?

Scalable Vector Graphics (SVG) er et webvennlig vektorfilformat. I motsetning til pikselbaserte rasterfiler som JPEG-filer, lagrer vektorfiler bilder via matematiske formler basert på punkter og linjer på et rutenett. Dette betyr at du kan endre størrelsen på vektorfiler, for eksempel SVG-filer, betraktelig uten å miste noe av kvaliteten, noe som gjør dem ideelle for logoer og kompleks grafikk på nettet.

Det er ikke kun muligheten for å endre størrelse som gjør SVG-filene svært populære blant webdesignere. SVG-filer er skrevet i XML-kode, noe som betyr at de lagrer all tekstinformasjon som bokstavelig tekst i stedet for former. Dette gjør at søkemotorer som Google kan lese SVG-grafikk for søkeordene sine, noe som potensielt kan hjelpe et webområde med å rykke opp i søkerangeringer.

Du kan enkelt identifisere en SVG-fil ved hjelp av filtypen SVG.

Hva brukes SVG-filer til?

Skalerbar vektorgrafikk har kommet langt de siste årene – men hva brukes SVG-filene til i praksis?

Ikoner og logoer på webområder.

Designere bruker ofte SVG-filer for å vise webområdeikoner, for eksempel knapper, og bedriftslogoer. Filtypens mulighet for opp- eller nedskalering uten at det går på bekostning av kvaliteten, betyr at filene er ideelle for grafikk som må vises på flere steder og i ulike størrelser.

Infografikk og illustrasjoner.

Takket være bruken av XML i SVG-filer kan søkemotorer som Google lese teksttunge diagrammer og grafer, noe som kan hjelpe med søkemotoroptimaliseringen. Google kan registrere søkeord i SVG-filene, og derfor kan de potensielt føre til at en nettside får høyere rangering i søkeresultatene. I tillegg støtter SVG-filer animasjon, og det bidrar til å gjøre nettsidene mye mer interessante.

Utforsk flere vektorfiler

Støtter SVG-filer animasjon?

SVG-filformatet er ikke kun for statiske bilder. Du vil oppdage en rekke nettbaserte verktøy som kan hjelpe deg med å innlemme bevegelige elementer i webgrafikken. SVG-animasjoner kan inneholde relativt grunnleggende elementer, for eksempel en skyvefunksjon for flytting mellom forskjellige lysbilder i en infografikk. Illustrasjoner kan også lages for å bevege seg, for eksempel tikkende visere på en urskive.

Hvordan kan jeg identifisere en SVG-fil?

Den enkleste måten å identifisere en SVG-fil på er ved å kontrollere filtypen. En SVG-fil er oppført med filtypen SVG. Du kan også identifisere vektorbilder som SVG-filer ved å forstørre dem til 200 % eller høyere på dataskjermen. Et vektorbilde beholder de rene linjene og solide fargene i stedet for å bli pikselert eller uskarpt.

Kan SVG-filer kun brukes på Internett?

Selv om SVG-bilder hovedsakelig brukes på nettet, har de et liv utenfor nettuniverset. For eksempel kan SVG-filer være nyttige som maler for trykk på klær, for eksempel på T-skjorter, fordi de ikke blir forvrengt når størrelsen endres fra de originale målene. En JPEG-fil bygd opp av mange piksler, vil ikke overføres like rent.

Hvor store er SVG-filene?

Størrelsen på en SVG-fil avhenger av hvor mye bildedata den inneholder – men den er vanligvis mindre enn de fleste andre filtyper. Kompleks grafikk med mange baner og ankerpunkter tar opp mer lagringsplass enn enkel og ren design. Prøv å minimere antallet komplekse instruksjoner i filen.

Hva er forskjellen mellom SVG- og PNG-filer?

I et nøtteskall er SVG-filer vektorfiler mens PNG-filer er rasterfiler. Hvis du strekker en PNG-fil for langt eller klemmer den sammen for mye, blir den uskarp og pikselert. SVG-filer inneholder ingen piksler, så de vil aldri miste oppløsning. I tillegg støtter ikke PNG-filer animasjon.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/express-blade

Mer informasjon om filtyper som ligner på SVG.

PNG file image

PNG-filer

Finn ut mer om et annet populært format for webgrafikk og logoer.

JPEG file image

JPEG-filer

Finn ut hvorfor JPEG-filer er utviklet med komplekse digitale bilder i tankene.

HEIC file image

HEIC-filer

Bli kjent med denne nye typen rasterfiler fra Apple.

AI file image

AI-filer

Utforsk dette mye brukte vektorformatet utviklet for Adobe Illustrator.

Sammenlign SVG-filer med andre filtyper.

SVG vs PNG file image

SVG og PNG

Hvilket av filformatene er rådende innen webdesign?

SVG vs EPS file image

SVG og EPS

Ta en nærmere kikk på utskriftsegenskapene.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/discovery-hub/products-photoshop-segment-blade