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.
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.
I 1994 lanserte den nederlandske programvareutvikleren Martijn Koster ideen om SVG-formatet.
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.
- SVG støtter interaktive funksjoner via skriptspråk som JavaScript, som gjør det mulig å lage dynamiske og engasjerende grafiske motiver.
- SVG er et XML-språk som muliggjør enkle manipuleringer og integrasjoner med andre webteknologier.
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 denne fremgangsmåten når du bruker Adobe Photoshop:
- Når du har laget et bilde i Photoshop, klikker du på Fil > Eksport > Eksporter som.
- Klikk på Format-rullegardinmenyen i boksen som vises, og velg deretter SVG.
- 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.
Slik oppretter du en SVG-fil i Illustrator:
Følg denne fremgangsmåten når du bruker Adobe Illustrator:
- Når du har laget et motiv i Illustrator, markerer du teksten for å lage omriss. Det bidrar til å unngå problemer med skriftkonvertering når motivet vises på andre datamaskiner. Velg Type – Create Outlines
- Lagre filen, klikk på Fil > Lagre som. Klikk på Format-rullegardinmenyen i boksen som vises, og velg deretter SVG.
- Du kan også eksportere den redigerte SVG-filen via File > Export > Export as og velge SVG som format. Da kan du justere eksportinnstillinger som nøyaktighet og kompatibilitet.
Slik redigerer du en SVG-fil i Illustrator
- Velg SVG-filen og åpne den i Illustrator. Du kan også importere SVG-filen til et eksisterende Illustrator-dokument via File > Place.
- Bruk Selection Tool (eller Direct Selection Tool) til å markere enkeltbaner, -former eller -grupper i SVG-filen. Du kan endre størrelser og former, omdanne eller redigere baner samt legge til farger og effekter
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.
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.
Sammenlign SVG-filer med andre filtyper.
title
SVG-filer.
cardImageAltText
SVG OG image
cardImage
primaryTag
caas:content-type/article
Tags
caas:content-type/article,caas:products/indesign,caas:products/illustrator,caas:product-categories/photo