Hvad er forskellen mellem SVG og PNG

I livet sammenligner vi konstant ting med hinanden. Man kan sige, at vi har et kritisk øje. Men man kan også sige, at vi har et øje for kvalitet. Æbler og appelsiner kan f.eks. sammenlignes. De hører måske til i samme frugtkategori, men de vil appellere til forskellige mennesker baseret på deres individuelle behov.

Hvis du er på udkig efter et C-vitaminhit, vil du sandsynligvis have en appelsin på din tallerken. Hvis du derimod gerne vil have flere fibre i din kost, vil du sandsynligvis bide i et saftigt æble. Det betyder ikke nødvendigvis, at det ene er bedre end det andet - det handler om præferencer.

Og det samme kan siges om SVG- og PNG-formater.

I denne artikel vil vi sammenligne de to formater, når det gælder web- og digitalt design.

Vigtige forskelle mellem SVG og PNG

Hvad er en SVG?

SVG er et billedfilformat, der er skabt specielt til at designe todimensionale vektor- og vektor-rastergrafik til websteder. SVG understøtter animation, gennemsigtighed, gradienter og kan nemt skaleres uden at miste kvalitet. SVG er også det mest udbredte vektorfilformat på nettet.

Det er vigtigt at bemærke, at du i Vectornator kan eksportere dit dokument til et vektorformat (SVG).

Lad os se nærmere på dette:

• Skalérbar: SVG'er kan ændres i størrelse uden at det går ud over billedets kvalitet. Det vil være helt skarpt og klart, uanset hvor stort det er.
• Vektor: De fleste billedfiltyper indeholder pixels. Vektorer er i bund og grund kodestykker, der gengiver et billede i realtid og konverterer det til de pixels, du ser på din skærm. Selv om de viser det samme billede, er det, der foregår i baggrunden, meget forskelligt.
• Grafik: SVG er en billedfiletype ligesom PNG, JPEG og GIF, selv om den måske ikke er så kendt, men den er bare lidt anderledes.

Vektorer er kodestykker skrevet i XML, der repræsenterer former, linjer og farver for at uddybe, hvordan det fungerer. Selv om det er muligt at skabe et billede uden andet end kode, bruger de fleste mennesker en vektorgrafikeditor. Du kan også konvertere PNG'er eller andre billeder i rasterformat til SVG, men resultaterne er ikke altid gode.

SVG understøtter også animation og gennemsigtighed, hvilket gør det til et alsidigt filformat. Det eneste problem er, at det ikke er så udbredt som mere standardiserede formater som PNG, så det understøttes mindre godt af ældre browsere og enheder. Det er heller ikke altid lige nemt at uploade det til dit websted og få det vist korrekt.

Fordele og ulemper ved SVG

Her er grunden til, at folk er glade for SVG'er:

• SVG'er ser altid ud til at være af høj kvalitet, fordi de aldrig oplever tab af høj opløsning. Et rasterbilledformat kan begynde at se sløret ud, når størrelsen ændres en smule.
• Da SVG'er blot er CSS-kode, er deres filstørrelse minimal og veloptimeret. Der findes også SVG-optimeringsværktøjer, som gør dem endnu mere håndterbare. Dit websted vil sandsynligvis også indlæses lidt hurtigere, hvis du bruger dem i stedet.
• Ved at bruge traditionelle PNG'er skal billederne refereres som eksterne ressourcer. Alle disse PNG'er betyder en stigning i antallet af http-forespørgsler og dermed et langsommere websted. SVG'er er ikke kun mindre i filstørrelse, men XML kan også indlejres inline i HTML, hvilket eliminerer http-forespørgsler.
• SVG'er kan animeres og styles med CSS-kode. Dette omfatter ændring af farverne. Animationer, f.eks. transformationer og overgange, som du bruger på HTML-elementer, kan også bruges på et SVG-element. Der er dog tilfælde, hvor du ikke kan bruge CSS til at animere SVG'er, men disse tilfælde kan normalt dækkes med JavaScript.
• SVG'er kan bruges på mange måder på nettet, f.eks. til at vise logoer. Logoer er normalt vektorbaserede, og det er der god grund til. Det smukke er, at du kan definere et SVG-dokument som dit logo og derefter bruge det hvor som helst uden at bekymre dig om størrelse, opløsning eller indlæsningstider.
• Google indekserer SVG'er, og det er godt nyt. SVG-indhold, uanset om det er i en selvstændig fil eller direkte indlejret i HTML, indekseres.

SVG har en hel del fordele i forhold til PNG, lige fra at være skalerbar til at være mindre i størrelsen, men det er ikke bedre i alle situationer. Lad os se på ulemperne ved vektorfiltyper:

• Som tidligere nævnt understøttes SVG'er af alle større moderne browsere, men du kan få problemer med kompatibilitetsproblemer ved at gengive dem på ældre browsere og enheder. Hvis en stor del af dine besøgende bruger disse, kan det være en dårlig idé at skifte over.
• SVG'er er sværere at arbejde med og kræver specielle programmer til at oprette og redigere dem. Selv om du kan designe dem udelukkende med XML, er det ikke altid muligt.
• SVG'er er ikke nær så nemme at indlejre som PNG'er. Hvis du bruger WordPress, understøttes de ikke af standardmediebiblioteket, så du skal bruge et plugin for at uploade dem. Det kan blive dyrere i det lange løb.SVG'er skal gengives af browseren, når siden indlæses, så hvis du bruger for mange eller en stor fil med mange vektorer, kan det belaste enheden.

Hvornår skal du bruge SVG frem for PNG?

SVG er ikke beregnet til sociale medier. SVG fungerer bedst til webdesign, når du eksporterer ikoner og illustrationer til websteder med responsivt design og objekter, der skal vises perfekt på skærmene. Brug SVG, når du vil have gennemsigtige billeder, der nemt kan zoomes eller komprimeres, har brug for lette animationer eller planlægger at ændre et billede snart eller ofte.

Du bør bestemt ikke konvertere alle dine PNG'er til SVG'er, men vektorgrafik kan være en glimrende erstatning for nogle billeder. SVG-billeder fungerer også fremragende til dekorativ grafik på websites, logoer, ikoner, grafer og diagrammer og andre enkle billeder.

De fungerer dog ikke så godt med komplekse billeder med mange farver og former, f.eks. skærmbilleder, fotografier og detaljerede illustrationer. Det er muligt at konvertere alle billeder til SVG, men browsere håndterer ikke altid komplekse vektorer med hundredvis af farver godt, da de skal gengives, når siden indlæses.

Desuden kan SVG-kunstværker være smukke, men at designe komplekse billeder kræver en masse tid, kræfter og færdigheder i avancerede redigeringsværktøjer. Hold det simpelt, hvis du vil lave dine vektorbilleder. Hvis du har detaljerede billeder, skal du helt sikkert holde dig til PNG.

SVG'er er dog bedre til responsivt og retina-ready webdesign på grund af deres skalerbarhed og manglende kvalitetsforringelse. Desuden understøtter de animation, mens PNG ikke gør det, og rasterfiltyper, der understøtter animation, som GIF og APNG.

Kort sagt: SVG kan bruges til enkel grafik, der kan kræve animation, og som garanteret skaleres godt på alle skærmstørrelser.

Hvad er en PNG?

PNG står for Portable Network Graphics, og dette navn afspejler, hvor udbredt denne filtype er. Alle, der nogensinde har brugt en computer, har sandsynligvis arbejdet med PNG-filer, da det er den mest almindelige filtype på internettet næst efter JPEG.

PNG er en rasterbilledfiletype, der ligner de fleste almindelige billedformater. Det betyder, at den består af pixels, de samme små prikker, som vises på din skærm. Det gør det nemt at vise, men det betyder også, at billedkvaliteten afhænger af opløsningen - hvor mange pixels der er i billedet.

Så hvis du forstørrer et raster, vil kvaliteten blive påvirket. Nogle gange er skaden ubetydelig, især ved opskalering, og nogle gange kan det gøre et billede sløret og helt ubrugeligt. Det skyldes, at når du strækker det, mister du den visuelle kvalitet. Derfor må du ikke opskalere et PNG-billede ud over dets tilsigtede opløsning.

Alligevel gør PNG's udbredelse den til en god kandidat til generel brug. Denne filtype understøtter gennemsigtighed, men ikke animation.

Fordele og ulemper ved PNG

Hvad gør PNG til det mest udbredte billedfilformat på nettet?

• Uanset om du koder fra bunden eller bruger WordPress' mediehåndtering, er det en enkel opgave at vise PNG-billeder på dit websted.
• PNG anvender tabsfri komprimering, hvilket gør det mere skarpt end JPEG-filer med tabsfri komprimering. Det koster dog en større filstørrelse og kan ikke sammenlignes med vektorbilleder. PNG anvender bedre billedkomprimeringsteknologi end GIF, hvilket giver mulighed for mindre filer, der downloades hurtigere.
• Med højere bitdybder (flere farver) giver PNG mulighed for 1, 2, 4, 8, 16, 24 og 32-bit billeder og overvinder dermed 8-bit barrieren.
• Flere lag af gennemsigtige PNG-billeder giver mulighed for fuld gennemsigtighed i alfakanalen, hvilket gør det nemt at flytte billeder fra en baggrund til en anden.
• Indbygget gammakorrektion giver brugerne mulighed for at se et billede på den måde, som det var meningen, at det skulle ses, ved at vælge det gammaniveau, der er beregnet til deres skærm.

På den anden side blev PNG-formatet udviklet for årtier siden og har flere bemærkelsesværdige fejl, som ikke er blevet opdateret til den moderne tidsalder:

• Du skal planlægge, når du designer rastergrafik, og sikre dig, at det er den rigtige størrelse, ellers kan du spilde tid på at lave ubrugelige billeder.
• PNG-filer er meget store på grund af deres tabsfri komprimering. Derfor kan de gøre dit websted langsommere. For at løse dette problem skal de komprimeres endnu mere, hvilket kan skade kvaliteten.
• Det er mere besværligt at gøre billederne "retina-klare" med PNG-filer, og der er større sandsynlighed for, at de bliver uskarpe.
• PNG understøtter ikke animation. Andre animerede rasterfiltyper som GIF'er kan have alvorlige problemer. GIF'er er f.eks. af meget lav kvalitet og understøtter kun 256 farver.

Hvornår skal du bruge PNG frem for SVG?

Hvis du bruger billeder af høj kvalitet, detaljerede ikoner eller har brug for at bevare gennemsigtigheden, er SVG det bedste valg. Brug det til små statiske billeder, logoer, navigationselementer, prints og andre billeder med gennemsigtig baggrund og robuste kanter.

Når du ikke er sikker på, om en platform kan håndtere den nyere, mindre understøttede SVG-filtype, er PNG den bedste løsning. Du kan f.eks. ikke uploade SVG'er til de fleste sociale medier, da de ikke er understøttede filtyper. Og da nogle e-mail-skabeloner kan have svært ved at håndtere vektorer, anbefales det normalt at holde sig til PNG'er.

Generelt fungerer PNG-filer godt med komplekse, ikke-animerede billeder, især billeder, der kræver gennemsigtighed. Du kan bruge dem stort set overalt - men nogle gange passer en SVG bare bedre.

Husk, at du altid kan bruge PNG-fallbacks, hvis din SVG ikke kan indlæses, så det er normalt sikkert at vælge vektorer, selv hvis en stor del af din brugergruppe har valgt ældre enheder eller browsere.

Sådan oprettes en SVG-fil

For at oprette en SVG-fil skal du have en vektorversion af logoet eller illustrationen. Vektorkunst defineres i form af 2D-punkter, der er forbundet med linjer og kurver for at danne polygoner og andre former med forskellige egenskaber.

En vektorgrafik genereres ved at skabe knuder og forbinde disse sammen med linjer (kaldet stier) for at opbygge former. Desuden bruges vektorgrafik til flere forskellige typer designprojekter. Det bruges til grafisk design, illustrationer og digital kunst.

Vektorsoftware kan bruges til de fleste former for grafisk design. Det er op til dig som designer at beslutte, hvilken type software der er mest velegnet til netop dit designprojekt.

Vi kender tilfældigvis et fantastisk vektorprogram, som du måske har hørt om? Vectornator er et designprogram, der er gratis at bruge og perfekt til at skabe vektorgrafik.

Dette er nogle af de vigtigste områder, hvor vektorkunst og -grafik anvendes til at skabe fantasifulde og skalerbare billeder af høj kvalitet:

• Illustration er blevet et meget efterspurgt erhverv, og brands er helt vilde med autentisk visuelt indhold, der på smukkeste vis kan indfange deres personlighed og produkter.
• Vektorkunst bruges til mange elementer, der indgår i designet af et websted, herunder ikoner, logoer, illustrationer og layout.
• Du skal bruge vektoriserede billeder for at få succes med at printe plakater. Plakatdesign kan bruges til kunst og indretning, film og markedsføring. Har du brug for inspiration til plakatdesign? Se disse skræmmende filmplakater, som helt sikkert vil holde dig vågen om natten.
• De fleste grafiske designere bruger vektorsoftware til at lave logoer. Hvorfor? Fordi vektorgrafik er let skalerbar, nem at redigere og har masser af eksportmuligheder.
• Ligesom plakater og logoer er vektordesigns perfekte til plakater, da de trykkes i en enorm skala. Dine vektorfiler er nødvendige for at bevare billedets kvalitet.
• Designere af videospil bruger alle former for software. Det er en meget kompleks form for design. Den kritiske del af kunstværket genereres ved hjælp af vektorkunst. Denne type vektorkunst er især populær på det seneste med den stigende popularitet af videospil og virtual reality.

Det er en god idé at finde ud af mere om, hvordan du tegner og arbejder med vektorkunst. Du kan også se denne tutorial-video, som vi har lavet om, hvordan du nemt kan lave dine egne vektorer med vores førsteklasses software.

Sådan oprettes en gennemsigtig PNG-baggrundsfil

En gennemsigtig baggrund til din PNG-fil kan virke som et grundlæggende designelement, men oftest viser disse enkle designteknikker sig at være nogle af de mest værdifulde og kreative måder at få dit billede til at skille sig ud på.

Her er nogle designtips til, hvordan du med fordel kan bruge en gennemsigtig baggrund i din PNG-fil til din fordel:

• At bruge en gennemsigtig baggrund er måske ikke den mest almindelige måde at fokusere på et bestemt område, som du ønsker at fremhæve. Men hvis du bruger den korrekt, vil en gennemsigtig PNG-baggrund hjælpe dig med at sætte en hvilken som helst del af dit billede i fokus. Du kan også bruge denne teknik til at guide beskueren og give hele designet mere perspektiv.
• Læsbarhed er en af de vigtigste dele af dit design, især hvis du arbejder med markedsføring eller PR. Hvis du skal inkludere brandets navn og en one-liner, er det design, du ønsker at bruge, måske ikke det bedste til at tilføje tekst ovenpå, da det kan være svært at læse bogstaverne.
• Hvis du vil skabe et flerdimensionelt billede, kan det hjælpe dig med at tilføje lag oven på lag. Hvis du bruger en gennemsigtig baggrund, vil det også hjælpe dig med at tilføje mere dybde. Denne teknik bruges ikke særlig ofte, så vi anbefaler, at du kun bruger den, når du har brug for det, og når det giver mening i forhold til hensigten med dit design.
• Du kan eksportere dit firmalogo i PNG med en gennemsigtig baggrund til forskellige applikationer uden en generende hvid eller sort baggrund, hvilket giver det et renere udseende.

Hvis du gerne vil have en trin-for-trin-guide til, hvordan du opnår ovenstående tips, kan du læse vores enkle vejledning her.

Opfølgning

SVG og PNG er to meget forskellige filformater, og derfor er det vigtigt at vælge mellem dem.

Det er langt mere sandsynligt, at du bruger PNG-filer, da det er et enklere, lettere tilgængeligt og mere alsidigt filformat. Komplekse billeder, f.eks. skærmbilleder og detaljerede illustrationer, bør bruge PNG.

Når det er hensigtsmæssigt at bruge vektorbilleder - f.eks. dekorativ grafik og logoer - skal du helt sikkert bruge SVG, fordi de er responsive og har mindre filstørrelser. Husk dog, at SVG'er kun kan bruges eller gemmes som vektorer.

Så er du SVG eller PNG? Vi vil meget gerne høre fra dig for at finde ud af det!

Download Vectornator for at komme i gang

Giv dine billeder et ansigtsløft.

Er du SVG eller PNG? Vi vil meget gerne høre fra dig for at finde ud af det!