Samme logo kan være bare 24 piksler høy i nettstedsmenyen og må forstørres til to meters bredde på en messevegg. Valget mellom PNG og SVG starter med scenen den skal brukes i: på nettsider og i produktgrensesnitt er SVG førstevalget – logoen ligger som baner og tegnes på nytt i alle størrelser; opplastingspunkter som bare tar bitmap (profilbilder i sosiale medier, enkelte kontordokumenter) får en transparent PNG; plakater, skilt og trykksaker bruker SVG eller vektorfiler eksportert fra den, uten uskarphet ved forstørring. Har du foreløpig bare en PNG, er det ikke nødvendig å starte på nytt – fastsett formatet scenen krever, og fyll på det som mangler etterpå.
Hovedpunkter
- Bruk SVG på nettsider, i grensesnitt og der logoen skaleres og omfarges gjentatte ganger: grafikken ligger som baner, tegnes på nytt ved forstørring, og kantene blir ikke uskarpe.
- Bruk transparent PNG i innleveringer som bare godtar bitmap (profilbilder i sosiale medier, enkelte kontorprogrammer); ikke mas om SVG-støtte fra plattformen.
- En grafisk logo eller et ordmerke fortjener en SVG-hovedfil; fotorealistiske maskoter og teksturrike merkevarebilder beholder høyoppløst PNG.
- SVG er ikke nødvendigvis mindre enn PNG: filstørrelsen avhenger av grafikkens kompleksitet, og valget skal begrunnes i bruken, ikke i størrelsen.
Start valget med tre bruksscener
De tre vanligste leveringsoppgavene dekker nesten alle veiene logofilene går.
Logo i nettstedsmeny. Merket i menylinje, bunntekst og mobilgrensesnitt vises i ulike størrelser ved ulik skjermtetthet. SVG passer best her: nettleseren tegner banene i sanntid og holder alt skarpt, fra liten ikonbredde til stort banner i bunnen; skal fargen endres, gjøres det rett i filen eller koden, og samme fil kan uendret leveres til designeren for videre redigering.
Profilbilde i sosiale medier. Opplastingen godtar som regel bare JPG og PNG, og en transparent PNG holder: når plattformen beskjærer bildet til sirkel eller firkant, følger det ikke med en hvit firkant rundt merket. Visningsstørrelsen er begrenset, bitmap er fullt skarpt nok, og denne scenen trenger ikke SVG.
Plakater og trykksaker i store formater. Plakater, roll-ups og fasadeskilt forstørrer merket mange ganger. SVG løser skaleringen ved roten: banene er uavhengige av oppløsning, og størrelsen bestemmes av der de brukes. Har du bare en liten PNG, blir direkte forstørring uskarp og taggete – det er denne scenen som virkelig trenger en vektorfil.
Hvor forskjellen på PNG og SVG viser seg
Den grunnleggende forskjellen er måten grafikken lagres på. PNG bruker et pikselrutenett: hvert punkt lagrer én farge, og uansett hvor stor filen er, finnes det et fast antall piksler; forstørres bildet utover originalen, kan programmet bare dra de eksisterende pikslene fra hverandre og fylle ut, og kantene blir uskarpe og taggete. SVG beskriver grafikken med baner og former: hvor linjen starter, hvordan kurven bøyer, hvilken farge flaten fylles med – ved forstørring tegner programmet alt på nytt etter beskrivelsene, og kantene forblir glatte.
Begge formatene støtter transparent bakgrunn, på ulike måter. PNG beholder gjennomsiktigheten rundt merket i en egen kanal for transparente piksler; SVG har i utgangspunktet ingen «bunn» – grafikken er i seg selv en samling baner. Etterarbeidet er et enda større skille: en SVG kan åpnes og omfarges i sin helhet, med justerbare ankerpunkter og mulighet for å deles og settes sammen igjen; PNG kan bare behandles piksel for piksel, og å endre én fargeflate betyr å reparere områder i et bildebehandlingsprogram.
Filstørrelsen blir ofte feiltolket. For enkel grafikk lagrer SVG bare noen få baner og er som regel liten; en bitmap med rike gradienter og tydelig støy blir splittet i en mengde fragmentbaner når den vektoriseres, og kan bli langt større enn PNG-en den kom fra. «SVG er mindre» holder ikke; det som holder, er «SVG av enkel grafikk er mindre».
En tabell for scenarier og formatvalg
Materialtypen avgjør mer enn formatparametrene. Råd for tre vanlige typer merkevaregrafikk:
| Materialtype | Kjennetegn | Råd | Begrunnelse |
|---|---|---|---|
| Grafisk logo, ordmerke | Tydelige kanter, få fargeflater | Lag en SVG-hovedfil og en transparent PNG til reserve | Rene, redigerbare baner; SVG for skalering, PNG der SVG ikke støttes |
| Fotorealistisk maskot | Flytende gradienter, rike skygger | Behold høyoppløst PNG | Vektorisering gir mange fragmentbaner som er vanskelige å redigere, og fordelen med fri skalering fra få baner går tapt |
| Teksturrikt merkevarebilde | Mange detaljer, kornet preg | Bitmap som hovedregel, lokal vektorisering ved behov | Full konvertering lønner seg sjelden; ved behov for større formater, eksporter heller en bitmap med høyere oppløsning på nytt |
Én tommelfingerregel er nok: jo tydeligere kanter og jo færre fargeflater, desto mer lønner vektoriseringen seg; jo nærmere bildet kommer et fotografi, desto bedre er det at det blir i bitmapformat.
Slik skaffer du en SVG når du bare har PNG
Når SVG-behovet er fastslått, er selve konverteringen bare en liten del av jobben. Last PNG-en opp i bilde til vektor: verktøyet tar PNG, JPG og WebP med bredde og høyde på minst 256 piksler, konverterer ett bilde per gang etter innlogging, og SVG-filen lastes ned når den er ferdig. Skjermbilder av opplasting, kontroll og nedlasting, steg for steg, finnes i veiledningen «Slik konverterer du PNG og JPG til SVG» i samme serie; den gjentas ikke her.
Etter konverteringen må resultatet fortsatt ryddes etter bruken. Resultatpanelet gir 1×-, 2×- og 4×-forstørring; se særlig på kurver, utskjæringer og tynne linjer før levering. To ting er verdt å vite på forhånd: teksten blir omgjort til konturbaner, og konverteringen gir ikke tilbake en redigerbar originalfont – ny tekst må skrives inn på nytt i et designverktøy; og kantkvaliteten bestemmes av originalbildet, en sterkt komprimert PNG gir ru kanter – bytt til et skarpere originalbilde før konvertering. Metodene for å rydde slike originalbilder er tema for «Hva gjør du med ru kanter etter vektorisering av logoen».
Slik setter du sammen en leveringspakke med merkevarefiler
Når formatene står fast, samles logoen i et sett navngitte filer, og ingen mottaker trenger å be om mer frem og tilbake. En minimal, brukbar pakke ser slik ut:
| Fil | Bruk | Eksempel på navn |
|---|---|---|
| SVG-hovedfil | Eneste kildefil for nettsider, materiell, forstørring og videre redigering | acme-logo.svg |
| PNG med transparent bunn | Profilbilder, kontordokumenter og annet som bare tar bitmap | acme-logo-transparent.png |
| Forhåndsvisning på mørk bunn | Kontrollere lesbarheten på mørk bakgrunn | acme-logo-preview-dark.png |
| Forhåndsvisning på lys bunn | Kontrollere uttrykket på lys bakgrunn | acme-logo-preview-light.png |
Bruk felles prefiks med suffiks for bruk; oppdater versjonsnummeret når versjonen endres, og ikke lag nye navn ved kopiering – ellers ender pakken før eller siden med både logo-final-2.png og logo-sluttversjon.png side om side. Legg forhåndsvisningene på lys og mørk bunn i samme mappe, slik at mottakeren raskt kan bekrefte at merket fungerer på begge bakgrunner.
Trykkfilene behandles for seg. Krever trykkeriet vektor-PDF, en bestemt fargemodus eller beskjæringsmål, lages produksjonsfilene i den tilhørende designflyten: med SVG som kilde gjøres konvertering og eksport i designprogrammet, og fargestandardene bekreftes med trykkeriet punkt for punkt. Bilde-til-vektor-verktøyet leverer SVG-filer, ikke trykkklare produksjonsfiler.
Vanlige spørsmål
Er SVG alltid mindre enn PNG?
Nei, filstørrelsen avhenger av innholdets kompleksitet. SVG av enkel grafikk lagrer bare noen få baner og er som regel liten; en bitmap rik på gradienter, skygger og støy blir til en mengde fragmentbaner som kan bli større. Formatet velges etter bruk og skaleringsbehov, ikke etter filstørrelse.
PNG-en blir uskarp ved forstørring – må den vektoriseres?
Det avgjøres av hva logoen skal brukes til fremover. Ved sjelden, enkeltbruk holder det å eksportere en PNG med høyere oppløsning på nytt; en SVG er verdt arbeidet først når logoen skal skaleres gjentatte ganger, omfarges som helhet, trykkes eller skal være merkevarens langsiktige hovedfil. En fotorealistisk logo gir selv etter konvertering fragmentbaner som er vanskelige å redigere, og det er mer praktisk å beholde en høyoppløst bitmap.
Hva gjør du når trykkeriet vil ha PDF?
Følg trykkeriets konkrete krav i designflyten: legg SVG-hovedfilen inn i designprogrammet, eksporter til PDF-typen de ber om, og bekreft fargemodus, beskjæring og andre parametere punkt for punkt. Bilde-til-vektor-verktøyet gir SVG-filer; trykk-PDF-en lages i designleddet.
Bare PNG? Skaff en SVG først
Start med det som mangler i pakken: har du bare en PNG-versjon, lager du først en SVG med bilde til vektor, kontrollerer den mot forhåndsvisningene på lys og mørk bunn, og avgjør deretter om den kan bli hovedfilen. Når dette steget er unnagjort, har alle tre scenene – nettsted, profilbilde og plakat – filer i riktig format.
