Slik vektoriserer du et ikon
6 min lesetid · Publisert 2. aug. 2026 · Oppdatert 2. okt. 2026
Et ikon lever i alle størrelser samtidig. Den samme filen er et element på 16 piksler i en meny, en knapp på 24 piksler, en appflis på 512 piksler og av og til en plakat. Det fungerer bare når geometrien under er ærlig: få noder, lukkede baner og ingen gjenværende kantstripe fra antialiaseringen av det rasterbildet du startet med.
Å vektorisere et ikon handler derfor mindre om konverteringen og mer om hva du gir den og hva du beskjærer etterpå. Denne guiden dekker begge deler.
Start med det største rasterbildet du har, og flat det ut
Antialiasering er fienden her. På et ikon på 32 piksler utgjør de myke grå pikslene langs hver diagonal en stor andel av bildet, og en sporing har ingen måte å vite at de var ment som en hard kant og ikke en ekte mellomtone. Gi den en versjon på 512 piksler, og den samme kanten er en overgang på én piksel mot 49 rene piksler — formen er umiskjennelig.
Hvis ikonet er monokromt, gjør det virkelig monokromt før konvertering: rent svart på transparent, eller rent svart på hvitt, uten myk skygge og uten subtil indre glød. Hver av disse effektene blir former i resultatet, og former i resultatet er noder du må finne og slette.
Vurder resultatet etter nodeantall, ikke etter hvordan det ser ut i 100 %
I den størrelsen du ser på det, ser nesten enhver sporing fin ut. Testen som teller, er nodeantallet: Åpne banen og tell punktene. Et godt tegnet ikon har punkter bare der kurven faktisk endrer retning — et avrundet kvadrat har åtte, en sirkel fire, en chevron tre eller seks. Hvis en enkel form kommer tilbake med seksti, jaget sporingen pikselstøy, og den formen vil rendres langsomt, redigeres dårlig og se subtilt feil ut når den skaleres.
På Lite og oppover er detaljkontrollen det som styrer dette direkte: lavere detalj slår sammen mer aggressivt og gir færre, renere noder. Senk den til hjørnene så vidt begynner å mykne, og gå så ett steg tilbake. På Free velges nivået automatisk, og måten å påvirke det på er kvaliteten på kilden.
Rett inn mot pikselrutenettet etterpå, ikke før
Ikonsett har et rutenett — vanligvis 24×24 med en trygg marg på to piksler, eller 16×16 for tette grensesnitt. En sporet bane lander der pikslene tilfeldigvis var, noe som er nær det rutenettet, men ikke på det, og i små gjengivelsesstørrelser er det ”nærheten” som gjør at ett ikon i en rekke ser en halv piksel tyngre ut enn naboene.
Lås de ferdige banene til hele koordinater i redigeringsprogrammet og sett SVG-ens viewBox til rutenettet ditt. Dette er klettes første gangen og mekanisk etterpå, og det er det som skiller et ikonsett som ser designet ut fra et som ser konvertert ut.
Én strekbredde, én stil, én fil
Hvis du bygger et helt sett på nytt, konverterer du alle i én batch slik at de går gjennom identiske innstillinger, og normerer deretter strekbredden for hånd på tvers av settet. En ikonfamilie leses som en familie fordi strekene stemmer overens; et sett sporet enkeltvis over flere økter vil ikke gjøre det, og avviket er synlig selv når ingen enkelt ikon ser feil ut.
Batchkonvertering begynner på Pro, som tar 30 filer om gangen. Under det konverteres filene én om gangen, som for et sett på tjue er noen minutters klikking i stedet for et hinder.
Steg for steg
- 01
Skaff den største rasterversjonen
512 piksler eller mer hvis det finnes. En kilde på 32 piksler består mest av antialiasering, og antialiasering er det en sporing tar feil på.
- 02
Flat ut til én farge
Fjern slagskygger, indre glød og fargeoverganger før konvertering. Hver av dem blir ekstra former i resultatet.
- 03
Konverter til SVG
Last opp og last ned resultatet. SVG er det opprinnelige formatet for ikoner både på nett og i apper.
- 04
Sjekk nodeantallet
Åpne banen i redigeringsprogrammet. En enkel form bør ha en håndfull punkter, ikke dusinvis. Har den dusinvis, hadde kilden støy.
- 05
Lås til ikonrutenettet ditt
Rett inn banene mot hele koordinater og sett viewBox til rutenettstørrelsen din, slik at ikonet gjengis skarpt ved 16 og 24 piksler.
Vanlige problemer
- Ikonet ser uskarpt ut ved 16 piksler selv om det er en vektor
- Banene er ikke rettet inn mot pikselrutenettet, så gjengiveren antialiaserer hver kant. Lås koordinatene til hele tall og sett viewBox til å samsvare med rutenettet ditt.
- En enkel form kom tilbake med dusinvis av noder
- Kilden hadde antialiasering eller JPEG-støy som sporingen leste som detalj. Bruk en større, renere kilde; på Lite og oppover senker du detaljnivået.
- Hjørner som burde være skarpe, er avrundet
- Utjevningen er satt for høyt. På Lite og oppover trapper du ned — ekte hjørner holder seg skarpe opp til Strong, og bare Maximum avrunder alt.
- Ikonet har en svak omriss i en annen farge
- Det er den antialiaserte kanten av originalen, sporet som sin egen tynne form. Slett den i redigeringsprogrammet, og flat neste gang ut kilden til én hardkantet farge først.
Ofte stilte spørsmål
- Hvor stor bør kildelikonet være?
- Så stor som det finnes — 512 piksler eller mer er komfortabelt. Under rundt 64 piksler utgjør antialiaseringen en stor andel av bildet, og sporingen kan ikke skille en myk kant fra en ekte, og det er det som gir ujevne kurver.
- Kan jeg konvertere et helt ikonsett på én gang?
- Batchkonvertering begynner på Pro, som tar 30 filer om gangen; Studio tar 50 og Agency 100. Å konvertere et sett i én batch betyr mer enn fart — hver fil går gjennom identiske innstillinger, så ikonene blir konsistente med hverandre.
- Overlever transparensen?
- Ja, fra en kilde som har det. Transparente områder i en PNG eller WebP forblir tomme i SVG-en. En JPEG har ingen transparens i det hele tatt, så et ikon fra en JPEG kommer med bakgrunnen som en hel form du kan slette.
- Bør ikoner være SVG eller en font?
- SVG. Ikonfonter var en omvei for en nettleseræra som er over: De kan ikke vise flere farger, de ryker med en manglende fontfil, og skjermlesere leser dem som tekst. Konverter til SVG og bruk den inline eller som en sprite.
Relaterte veiledninger
- Slik vektoriserer du en logo — Bygg et logo, som du bare har som en liten JPG, om til rene, utskriftsklare kurver med eksakte merkevarefarger.
- Slik vektoriserer du blåkopier og tekniske tegninger — Konverter skannede tegninger og skjemaer til redigerbart strekarbeid uten å arve skannerens feil.
- Slik vektoriserer du en flyer eller plakat for storformat — Redd et design med jevne farger for A1 og større uten de myke kantene — og få vite hvilke deler du ikke bør konvertere.