SVG Export: Photoshop vs. Illustrator

I den digitale verden, især inden for webdesign og -udvikling, er brugen af grafik uundgåelig. Fotografier og komplekse billeder håndteres typisk som pixelbaserede formater som JPEG eller PNG. Men når det kommer til logoer, ikoner, illustrationer og andre grafiske elementer, der skal bevare deres skarphed uanset størrelse, er vektorgrafik det foretrukne valg. Et centralt vektorformat for webbet er SVG (Scalable Vector Graphics). Men hvordan sikrer du, at dine vektorgrafikker eksporteres korrekt fra Adobes populære programmer, Photoshop og Illustrator?

https://www.youtube.com/watch?v=0gcJCfcAhR29_xXO

SVG er et XML-baseret vektorbilledformat til todimensionel grafik med understøttelse af interaktivitet og animation. Den største fordel ved SVG er, at det er skalerbart. Det betyder, at en enkelt SVG-fil kan vises perfekt på enhver skærmopløsning, fra en lille mobilskærm til et stort 4K-display, uden at miste kvalitet. Dette står i skarp kontrast til pixelbaserede formater, som kræver separate versioner (f.eks. 1x og 2x) for at se skarpe ud på skærme med høj opløsning.

Forstå Forskellen: Pixel vs. Vektor

Før vi dykker ned i eksportprocessen, er det vigtigt at forstå den grundlæggende forskel mellem pixelbaseret og vektorbaseret grafik.

• Pixelbaseret grafik (Rastergrafik): Billeder er opbygget af et gitter af små firkanter kaldet pixels. Hver pixel har en bestemt farve. Når du forstørrer et pixelbaseret billede, bliver pixels synlige, og billedet fremstår uskarpt eller 'pixeleret'. Eksempler inkluderer JPEG, PNG og GIF. Fotografier er altid pixelbaserede.
• Vektorbaseret grafik: Billeder er opbygget af matematiske ligninger, der beskriver linjer, kurver og former. Disse ligninger definerer punkter, stier og farver, ikke individuelle pixels. Da billedet er baseret på matematiske formler, kan det skaleres op eller ned til enhver størrelse uden tab af kvalitet. Illustrator er et program designet primært til vektorarbejde.

SVG, som navnet antyder, er et vektorformat. Dette gør det ideelt til grafikker, der skal tilpasses forskellige størrelser på en hjemmeside, som f.eks. logoer i headeren, ikoner i navigationen eller illustrationer i indholdet.

Photoshops Begrænsninger med SVG

Photoshop er primært et program til redigering af pixelbaserede billeder. Selvom det har værktøjer til at oprette vektorelementer som former og stier (ved hjælp af Pen Tool eller Shape Tools), er dets kernefunktionalitet centreret omkring pixels.

Dette skaber en vigtig begrænsning, når det kommer til SVG-eksport. Photoshop kan kun eksportere en 'ægte' SVG fra native Photoshop-vektorlag. Dette er lag, der er oprettet direkte i Photoshop ved hjælp af dets egne vektorværktøjer.

Problemet opstår ofte, når man arbejder med vektorgrafik, der stammer fra andre programmer, typisk Adobe Illustrator. Hvis du placerer en vektorfil fra Illustrator i Photoshop, vil den ofte blive indsat som et Vektor Smart Object. Selvom et Smart Object bevarer vektorens skalerbarhed *inden for* Photoshop, behandler Photoshop ikke Smart Objectets indhold som redigerbare, native Photoshop-vektorstier, når det kommer til eksport.

Forsøger du at eksportere et Vektor Smart Object som SVG direkte fra Photoshop, vil resultatet ofte være utilfredsstillende. Photoshop vil enten rasterisere (omdanne til pixels) vektoren eller producere en SVG-fil, der ikke korrekt repræsenterer vektorens stier, hvilket ødelægger formålet med SVG-formatet.

Da Vektor Smart Objects er en meget almindelig måde at bringe vektorgrafik fra Illustrator ind i Photoshop på, betyder dette i praksis, at du typisk ikke kan bruge Photoshop til at oprette en korrekt SVG-fil af en grafik, der oprindeligt stammer fra Illustrator.

Sådan Eksporterer du Native Vektorer fra Photoshop

Hvis du undtagelsesvis arbejder med en grafik, der udelukkende består af vektorlag oprettet direkte i Photoshop (f.eks. en simpel form tegnet med Rectangle Tool eller Pen Tool), kan du eksportere den som SVG. Processen er forholdsvis enkel:

1. Åbn dit Photoshop-dokument.
2. Find det vektorformlag, du ønsker at eksportere, i panelet 'Layers' (Lag).
3. Højreklik på det specifikke vektorformlag.
4. Vælg 'Export As...' (Eksporter som...).
5. I dialogboksen 'Export As', vælg 'SVG' som format.
6. Juster eventuelle yderligere indstillinger, hvis nødvendigt (selvom SVG-indstillingerne i Photoshop er begrænsede).
7. Klik på 'Export' (Eksporter).
8. Vælg destinationen og gem filen.

Husk, at denne metode kun fungerer pålideligt for vektorlag, der er 'født' i Photoshop. For alt andet vektorbundet indhold, især Vektor Smart Objects, skal du bruge Illustrator.

Illustrator: Standardværktøjet for Vektor og SVG-Eksport

Adobe Illustrator er designet fra grunden til at arbejde med vektorgrafik. Det tilbyder langt mere avancerede værktøjer til at oprette, redigere og manipulere vektorstier, former og tekst. Af denne grund er Illustrator det program, du bør bruge til at forberede og eksportere de fleste af dine SVG-filer til webbet, især hvis grafikken er importeret til Photoshop som et Vektor Smart Object.

Når du arbejder i Illustrator, har du fuld kontrol over vektorelementerne, og eksportprocessen til SVG er robust og tilbyder mange optimeringsmuligheder, der er vigtige for webbrug.

En god praksis, når du eksporterer SVG fra Illustrator til webbrug, er at sikre, at grafikken har den ønskede endelige størrelse, før du eksporterer. Selvom SVG er skalerbart, kan det gøre arbejdet lettere for webudvikleren, hvis den oprindelige fil har de korrekte proportioner og dimensioner.

Sådan Eksporterer du SVG fra Illustrator

Illustrator tilbyder flere måder at eksportere til SVG på, herunder 'Export As' og 'Export for Screens'. 'Export for Screens' er ofte den mest fleksible for webaktiver, da den lader dig eksportere flere elementer eller artboards på én gang.

Her er den generelle proces ved brug af 'Export As':

1. Åbn din vektorfil i Illustrator.
2. Sørg for, at den grafik, du vil eksportere, er korrekt placeret og dimensioneret.
3. Gå til 'File' (Arkiv) > 'Export' (Eksporter) > 'Export As...' (Eksporter som...).
4. Vælg 'SVG (svg)' som 'Save as type' (Filtype).
5. Giv filen et navn og vælg en placering.
6. Klik på 'Save' (Gem).
7. Dette åbner dialogboksen 'SVG Options' (SVG-indstillinger). Dette er et vigtigt trin, da det giver dig kontrol over SVG-outputtet.

I 'SVG Options' dialogboksen er der flere indstillinger, der kan påvirke filstørrelse og kompatibilitet:

• Profiles (Profiler): Vælg 'SVG 1.1' for bred kompatibilitet.
• Type: Bestemmer, hvordan tekst gemmes. 'SVG' bevarer tekst som redigerbar tekst (bedst for SEO og tilgængelighed), mens 'Convert to Outline' omdanner tekst til former (sikrer udseendet, men gør teksten ikke-selektérbar).
• Image Location (Billedplacering): Hvis din grafik indeholder rasterbilleder, kan du vælge at 'Embed' (indlejre) dem i SVG-filen eller 'Link' (linke) til dem eksternt. For web er indlejring ofte simplest, men kan øge filstørrelsen.
• CSS Properties (CSS-egenskaber): Vælg hvordan stilarter gemmes. 'Presentation Attributes' er ofte mest kompatibel, men 'Style Elements' eller 'Style Attributes' kan være mere hensigtsmæssigt afhængigt af, hvordan SVG'en skal bruges og styles med CSS på websiden.
• Decimal Places (Decimaler): Antallet af decimaler for koordinater. Færre decimaler reducerer filstørrelsen, men kan påvirke præcisionen, især ved meget små eller komplekse grafikker. Ofte er 1-3 decimaler tilstrækkeligt for web.
• Minify (Minimér): Reducerer filstørrelsen ved at fjerne unødvendige mellemrum og data. Anbefales til webbrug.
• Responsive (Responsiv): Fjerner specifikke bredde- og højde-attributter, hvilket gør SVG'en lettere at skalere med CSS på websiden. Dette er ofte ønskeligt for moderne webdesign.

8. Gennemgå indstillingerne og klik på 'OK' for at eksportere.

Brug af 'Export for Screens' (File > Export > Export for Screens) giver dig en grænseflade, hvor du kan vælge specifikke artboards eller aktiver (markerede lag eller grupper) og eksportere dem i forskellige formater og skalaer på én gang. Dette er særligt effektivt, når du har mange ikoner eller grafiske elementer at eksportere.

Sammenligning: Photoshop vs. Illustrator for SVG

Arbejdsgang for Webgrafik: Photoshop og Illustrator Sammen

I en typisk webdesign-arbejdsgang vil du ofte bruge både Photoshop og Illustrator. Photoshop kan bruges til at manipulere fotografier, oprette baggrunde eller designe et overordnet layout, hvor du placerer forskellige elementer.

Illustrator bruges derimod til at skabe logoer, ikoner, knapper og andre grafiske elementer, der skal være skalerbare. Disse vektorelementer bringes derefter ind i Photoshop, ofte som Vektor Smart Objects, for at blive integreret i det samlede design.

Når det er tid til at eksportere elementerne til brug på websiden, gælder følgende tommelfingerregel:

• Pixelbaserede elementer (fotografier, baggrunde): Eksporter fra Photoshop som JPEG, PNG eller GIF.
• Vektorbaserede elementer (logoer, ikoner, illustrationer): Gå tilbage til den originale vektorfil i Illustrator, og eksporter derfra som SVG.

Denne arbejdsgang sikrer, at du får den bedst mulige kvalitet og filstørrelse for både pixel- og vektorbaserede aktiver.

Generel Navigation og Arbejdsområde

Uanset om du bruger Photoshop eller Illustrator, er det vigtigt at være bekendt med programmets grundlæggende navigation for effektivt at kunne forberede dine grafikker til eksport.

• Åbning og Lukning af Filer: Brug 'File > Open' (Arkiv > Åbn) eller tastaturgenvejen Cmd+O (Mac) / Ctrl+O (Windows) til at åbne filer. Luk filer med 'File > Close' (Arkiv > Luk) eller Cmd+W / Ctrl+W.
• Paneler: Paneler som 'Layers' (Lag) og 'Properties' (Egenskaber) er essentielle. 'Layers' panelet viser strukturen af dit dokument, og lader dig vælge og organisere elementer. 'Properties' panelet viser og lader dig redigere egenskaberne for det aktuelt valgte element, hvad enten det er et pixel-lag, et vektorlag, tekst eller et Smart Object. Du kan åbne eller lukke paneler via menuen 'Window' (Vindue).
• Zoom og Navigation: Brug Zoom Tool (Z) eller Cmd/Ctrl + +/- for at zoome ind/ud. Hold Mellemrumstasten nede for at aktivere Hand Tool (Håndværktøj) og panorere rundt i dokumentet.

At mestre disse grundlæggende interaktioner vil gøre det lettere at finde de lag og elementer, du skal eksportere, og justere deres indstillinger, før eksporten finder sted.

Ofte Stillede Spørgsmål om SVG Eksport

Hvad er forskellen på SVG og JPG/PNG?

JPG og PNG er pixelbaserede formater, der er bedst til fotografier og billeder med mange farveovergange. De mister kvalitet, når de skaleres op. SVG er et vektorbaseret format, der er bedst til logoer, ikoner og illustrationer. Det kan skaleres til enhver størrelse uden tab af kvalitet, og filstørrelsen er ofte mindre for simpel grafik.

Hvorfor kan jeg ikke eksportere mit logo som SVG fra Photoshop, hvis det er et Smart Object?

Når du placerer en vektorfil fra Illustrator (eller et andet program) i Photoshop, bliver den typisk et Vektor Smart Object. Photoshop behandler dette som et 'sort felt' af vektordata, men har ikke adgang til de individuelle vektorstier på en måde, der tillader en korrekt SVG-eksport. Du skal eksportere den originale vektorfil fra Illustrator i stedet.

Er SVG altid det bedste format for webgrafik?

Nej. SVG er bedst for grafikker, der skal være skalerbare og ikke indeholder komplekse pixelinformationer som fotografier. Fotografier og billeder med rige detaljer og farver er bedst som JPG eller PNG.

Skal jeg gemme min SVG med tekst som 'SVG' eller 'Convert to Outline'?

Hvis teksten skal kunne vælges, kopieres, og hvis du ønsker at bruge CSS til at style teksten på websiden, vælg 'SVG'. Hvis du vil være helt sikker på, at teksten ser præcis ud, som den gør i Illustrator (uafhængigt af skrifttyper installeret hos brugeren), vælg 'Convert to Outline'. Vær opmærksom på, at outline-tekst ikke er søgbar eller redigerbar som tekst.

Konklusion

At mestre eksport af grafik til web er en afgørende færdighed for enhver, der arbejder med digitalt design. Mens Photoshop er uundværligt for pixelbaseret redigering, er Adobe Illustrator det klare valg, når det kommer til at oprette og eksportere skalerbare vektorgrafikker i SVG-format. Forståelsen af, hvornår og hvordan man bruger hvert program til SVG-eksport – Photoshop kun for native former, Illustrator for stort set al anden vektorgrafik, især dem der bruges som Smart Objects – er nøglen til at levere skarpe, effektive og weboptimerede grafiske aktiver. Ved at følge den korrekte arbejdsgang sikrer du, at dine grafikker ser fantastiske ud på enhver enhed og skærmstørrelse.

Hvis du vil læse andre artikler, der ligner SVG Export: Photoshop vs. Illustrator, kan du besøge kategorien Grafik.