Grænseflade

Sådan vektoriserer du et ikon

Læsetid 6 min · Udgivet 2. aug. 2026 · Opdateret 2. okt. 2026

Et ikon lever i alle størrelser på én gang. Samme fil er et 16-pixels punkt i en menu, en 24-pixels knap, en 512-pixels app-flise og af og til en plakat. Det virker kun, når geometrien bag er ærlig: få knuder, lukkede stier og ingen tilbageværende rand fra anti-aliasing af den raster, du startede med.

At vektorisere et ikon handler derfor mindre om selve konverteringen og mere om, hvad du fodrer den med, og hvad du beskærer bagefter. Denne guide dækker begge dele.

Start med den største raster, du har, og fladgør den

Anti-aliasing er fjenden her. På et 32-pixels ikon udgør de bløde grå pixels langs hver diagonal en stor del af billedet, og motoren kan på ingen måde vide, at de var tænkt som en hård kant og ikke en reel mellemtoning. Giv den en 512-pixels version, og den samme kant er en overgang på én pixel mod 49 rene pixels — formen er utvetydig.

Hvis ikonet er monokromt, så gør det reelt monokromt, før du konverterer: rent sort på gennemsigtig baggrund, eller rent sort på hvid, uden blød skygge og uden svag indre glød. Hver af de effekter bliver til former i outputtet, og former i outputtet er knuder, du skal finde og slette.

Bedøm resultatet ud fra antallet af knuder, ikke ud fra, hvordan det ser ud ved 100 %

I den størrelse, du kigger på det, ser næsten enhver sporing fin ud. Tjekket, der tæller, er antallet af knuder: Åbn stien, og tæl punkterne. Et veltegnet ikon har kun punkter, hvor kurven reelt skifter retning — en afrundet firkant har otte, en cirkel fire, en chevron tre eller seks. Er en enkel form kommet tilbage med 60, jagede motoren pixelstøj, og den form bliver langsom at rendere, besværlig at redigere og ser diskret forkert ud, når den skaleres.

På Lite og opefter er detaljeindstillingen det, der styrer det direkte: Lavere detalje sammenlægger mere aggressivt og giver færre, renere knuder. Skru den ned, til hjørnerne lige begynder at blive bløde, og så ét trin tilbage. På Free vælges niveauet automatisk, og måden at påvirke det på er kvaliteten af kilden.

Ret ind efter pixelgitteret bagefter, ikke før

Iconsæt har et gitter — normalt 24×24 med en sikkerhedsmargin på to pixels, eller 16×16 til tætte interfaces. En sporet sti lander dér, hvor pixels tilfældigvis var, hvilket er tæt på det gitter, men ikke på det, og ved små renderingsstørrelser er det ”tæt på”, der får ét ikon i rækken til at se en halv pixel tungere ud end naboerne.

Fastlås de færdige stier til hele koordinater i din editor, og sæt SVG'ens viewBox til dit gitter. Det er bøvlet første gang og mekanisk bagefter, og det er dét, der adskiller et iconsæt, der ser designet ud, fra ét, der ser konverteret ud.

Én stregtykkelse, én stil, én fil

Bygger du et helt sæt op igen, så konvertér dem alle i én batchkonvertering, så de går gennem identiske indstillinger, og normalisér derefter stregtykkelsen i hånden på tværs af sættet. En ikonfamilie læses som en familie, fordi stregerne matcher; et sæt, der er sporet enkeltvis over flere sessioner, matcher ikke, og uoverensstemmelsen er synlig, selv når intet enkelt ikon ser forkert ud.

Batchkonvertering starter på Pro, som tager 30 filer ad gangen. Under det konverteres filerne én ad gangen, hvilket for et sæt på tyve er et par minutters klik frem for en blokering.

Trin for trin

  1. 01

    Skaf den største rasterversion

    512 pixels eller mere, hvis den findes. En 32-pixels kilde er mest anti-aliasing, og anti-aliasing er det, en vektoriseringsmotor tager fejl af.

  2. 02

    Fladgør til én farve

    Fjern drop shadows, indre glød og farveovergange, før du konverterer. Hver af dem bliver til ekstra former i outputtet.

  3. 03

    Konvertér til SVG

    Upload, og hent resultatet. SVG er standardformatet til både web- og app-ikoner.

  4. 04

    Tjek antallet af knuder

    Åbn stien i din editor. En enkel form skal have en håndfuld punkter, ikke dusinvis. Har den dusinvis, havde kilden støj.

  5. 05

    Fastlås til dit ikongitter

    Ret stierne ind efter hele koordinater, og sæt viewBox til din gitterstørrelse, så ikonet renderes skarpt ved 16 og 24 pixels.

Almindelige problemer

Ikonet ser sløret ud ved 16 pixels, selvom det er vektor
Dens stier er ikke rettet ind efter pixelgitteret, så renderingsmotoren anti-aliaser hver kant. Fastlås koordinaterne til hele tal, og sæt viewBox, så den matcher dit gitter.
En enkel form kom tilbage med dusinvis af knuder
Kilden havde anti-aliasing eller JPEG-støj, som motoren læste som detalje. Brug en større, renere kilde; på Lite og opefter sætter du detaljeniveauet ned.
Hjørner, der skulle være skarpe, er blevet afrundet
Udjævningen er sat for højt. På Lite og opefter skruer du den ned — ægte hjørner forbliver skarpe op til Strong, og først Maximum runder alt af.
Ikonet har en svag kant i en anden farve
Det er originalens anti-aliasede rand, sporet som sin egen tynde form. Slet den i editoren, og næste gang fladgør du kilden til én hårdkantet farve først.

Ofte stillede spørgsmål

Hvor stort skal kildeikonet være?
Så stort, som der findes — 512 pixels eller mere er behageligt. Under cirka 64 pixels udgør anti-aliasingen en stor del af billedet, og motoren kan ikke skelne en blød kant fra en ægte, og det er det, der giver ujævne kurver.
Kan jeg konvertere et helt iconsæt på én gang?
Batchkonvertering starter på Pro, som tager 30 filer ad gangen; Studio tager 50 og Agency 100. At konvertere et sæt i én batch handler om mere end hastighed — hver fil går gennem identiske indstillinger, så ikonerne bliver konsistente i forhold til hinanden.
Overlever transparensen?
Ja, fra en kilde, der har den. Gennemsigtige områder i en PNG eller WebP forbliver tomme i SVG'en. En JPEG har slet ingen transparens, så et ikon fra en JPEG ankommer med sin baggrund som en udfyldt form, du kan slette.
Skal ikoner være SVG eller en skrifttype?
SVG. Ikon-skrifttyper var en omvej for en browseræra, der er slut: De kan ikke vise flere farver, de brager ned, hvis skrifttypefilen mangler, og skærmlæsere læser dem som tekst. Konvertér til SVG, og brug den inline eller som sprite.

Relaterede guider

Cookies

Vi bruger Google Analytics-cookies til at se, hvilke sider der besøges, og hvor besøgende går i stå — ingen reklamer, ingen profilering, intet sælges. Afvis, og siden virker præcis ens. Detaljer i privatlivspolitikken.