Sådan åbner og redigerer du SVG-filer på Windows

Denne guide viser, hvordan du åbner og redigerer SVG-filer på Windows ved hjælp af browsere, teksteditorer og vektorredigeringsværktøjer. Få tips til konvertering af filformater.

Scalable Vector Graphics (SVG) er et webvenligt filformat, der bruges til at vise 2D-grafik, vektorillustrationer, diagrammer osv. Selvom det bliver gengivet som et billede, er det underliggende faktisk XML-kode, der definerer kurver og linjer. I Windows kan du nemt se SVG-filer med en browser, men redigere dem med den sædvanlige billededitor. I denne guide viser vi dig, hvordan du åbner og redigerer en SVG-fil på Windows.

Åbn SVG-fil ved hjælp af en browser

Vi kan åbne en SVG-fil i browseren ved at dobbeltklikke på den eller trække den til vores foretrukne browser.

Dette er den nemmeste måde at åbne en hvilken som helst SVG-fil. Men vi kan ikke redigere billedet med denne metode.

Vis en SVG-fil i Stifinder

Du kan åbne SVG-filer ved at aktivere SVG-forhåndsvisningsfunktionen i Microsoft PowerToys. For at gøre dette skal du downloade og installere PowerToys fra den officielle PowerToys-side, Microsoft Store eller Windows Package Manager (winget).

For eksempel bruger vi Winget-pakkehåndteringen i PowerShell til at installere PowerToys:

winget install --id Microsoft.PowerToys --source winget

Efter installationen kan du åbne PowerToys fra Start-menuen. I PowerToys-indstillingerne skal du gå til “File Explorer Add-ons” og aktivere “Scalable Vector Graphics”-forhåndsvisning under afsnittet Forhåndsvisningsvindue:

Du kan også aktivere SVG-miniaturebilleder for at se dem i ikonvisning, ikke kun i forhåndsvisningsvinduet:

Åbn nu Stifinder, tryk Alt + P for at aktivere forhåndsvisningsvinduet, og vælg en hvilken som helst SVG-fil for at se en forhåndsvisning til højre.

På denne måde kan du se miniaturebilleder og detaljerede forhåndsvisninger i stifinder uden at have brug for ekstra software.

Rediger en SVG-fil ved hjælp af en teksteditor

Da SVG'er hovedsageligt er XML-filer, kan du nemt redigere dem med en teksteditor. Desuden kan du bruge CSS til at style SVG'en på mange måder og endda tilføje animationer. Det er noget, du ikke kan gøre med almindelige billedformater som JPG eller PNG.

Højreklik på SVG-filen, hold musen over Åbn med, og vælg en editor som Notepad:

Når du åbner en SVG-fil i en teksteditor, vil du se XML-baseret kode i stedet for billedet selv.

Antag, at vi ønsker at ændre fyldfarven på den givne SVG-fil til sort. I så fald kan vi redigere fill-attributten som følger:

<path d="..." fill="black" />

Gem koden i en tekstfil og åbn filen igen, så vil du se det opdaterede output, noget som dette:

Du kan bruge en teksteditor til at oprette eller redigere en SVG-fil, men det fungerer kun godt for meget enkle billeder med få former. Hvis billedet er komplekst, bliver det for vanskeligt at ændre hver del manuelt.

Rediger en SVG-fil ved hjælp af en vektorredigerer

Moderne vektorredigeringsværktøjer, uanset om de er desktop-baserede som Adobe Illustrator og Inkscape eller online platforme som Figma og Canva, kan åbne og redigere SVG-filer.

For eksempel vil vi bruge Canavas SVG-editor til at vise dig, hvor let du kan redigere et SVG-billede ved hjælp af et online værktøj. Først skal du få adgang til Canavas SVG-editor fra den officielle hjemmeside og derefter klikke på Rediger SVG-knappen:

Klik på Upload filer-knappen og vælg den SVG-fil, du vil redigere:

Når den ønskede SVG-fil er uploadet, kan du redigere den, som du vil. Her ændrede jeg baggrunds- og forgrundsfarven på den valgte SVG-fil.

Hvis du har brug for grundlæggende redigeringer, kan du vælge Canavas SVG-editor. Jeg anbefaler dog at bruge avancerede værktøjer som Adobe Illustrator eller Inkscape til at redigere komplekse vektorgupper eller stier.

Konverter filer til og fra SVG-format

Du kan konvertere en SVG-fil til andre formater eller fra andre billedformater til SVG ved hjælp af desktop-baserede eller online billedredigeringsværktøjer.

Når du konverterer til SVG, især fra PNG eller JPG, kan online værktøjer have problemer med komplekse visuelle elementer. Du må muligvis lægge mærke til forenklede former eller manglende farver, fordi rasterbilleder bliver sporret til vektorgrafik.

Antag, at vi ønsker at konvertere følgende PNG-fil til SVG:

Lad os bruge en online editor som Convertio til at konvertere et PNG-billede til SVG. For at gøre dette skal du uploade den fil, der skal konverteres, vælge det ønskede outputformat, og til sidst klikke på knappen Konverter for at konvertere filen til den valgte.

Når filen er konverteret, kan du downloade den ved at klikke på den relevante knap:

Åbn nu den konverterede fil for at se det endelige resultat:

Outputtet viser et betydeligt fald i billedekvaliteten.

På den anden side er det normalt mere præcist at konvertere fra SVG til formater som PNG eller JPG, og det fungerer godt på de fleste værktøjer. Antag, at vi vil konvertere det følgende SVG-billede til JPG:

Lad os bruge Convertio til at konvertere den valgte SVG-fil til JPG:

Download billedet, og åbn det for at analysere resultatet. Outputtet viser, at konvertering af SVG til JPG ikke påvirker billedekvaliteten:

Hvis du skal arbejde med rasterbilleder på mobilen, kan du også redigere fotos med Photoshop til Android.

Svar på dine almindelige spørgsmål

Hvad er forskellen på SVG og PNG?

• Filtype: PNG er en rasterfiltype, mens SVG er en vektorfiltype.
  • -

  Skalering

  : PNG-billeder kan blive grynede eller slørede, hvis de skaleres for meget. SVG-billeder forbliver skarpe og klare, uanset hvor meget de skaleres.
• Brug: PNG er velegnet til komplekse billeder med mange farver, mens SVG er ideelt til ikoner, logoer og grafik, der kræver præcision.
• Filstørrelse: SVG-filer er ofte mindre i størrelse, da de gemmer data som matematiske formler i stedet for pixelinformation, hvilket kan være mere effektivt i nogle tilfælde.

Hvad betyder SVG?

SVG står for Scalable Vector Graphics, og det er en smart billedformatløsning, der adskiller sig fra traditionelle bitmap-formater som GIF, JPG, PNG og WebP. Her er nogle nøglepunkter:

• -

Fleksibilitet

: SVG-filer er skalerbare, hvilket betyder, at de kan ændres i størrelse uden at miste kvalitet.
• Vektorbaseret: I modsætning til bitmap-formater, der består af pixels, er SVG baseret på vektorer, der beskriver former og linjer matematik, hvilket gør dem ideelle til grafik som logoer og ikoner.
• Filstørrelse: SVG-filer kan ofte være mindre end bitmap-formatfiler, især for grafik med enkle former og få farver.
• Interaktivitet: SVG understøtter animation og kan manipuleres med CSS og JavaScript, hvilket giver mulighed for dynamiske webdesigns. Alt i alt er SVG et effektivt valg til webgrafik, der kræver høj kvalitet og fleksibilitet.