Hur du vektoriserar en ikon
6 min lästid · Publicerad 2 aug. 2026 · Uppdaterad 2 okt. 2026
En ikon lever i alla storlekar samtidigt. Samma fil är ett menyalternativ på 16 pixlar, en knapp på 24 pixlar, en appikon på 512 pixlar och, ibland, en poster. Det fungerar bara när geometrin under ytan är ärlig: få noder, slutna banor och ingen kvarlämnad rand från kantutjämningen i det raster du utgick ifrån.
Att vektorisera en ikon handlar därför mindre om konverteringen och mer om vad du matar den med och vad du rensar bort efteråt. Den här guiden tar upp båda delarna.
Utgå från det största raster du har och platta sedan ut det
Kantutjämningen är fienden här. På en ikon på 32 pixlar är de mjuka grå pixlarna längs varje diagonal en stor andel av bilden, och en vektoriseringsmotor har inget sätt att veta att de var tänkta som en hård kant i stället för en verklig mellanliggande ton. Ge den en version på 512 pixlar och samma kant är en enpixlars övergång mot 49 rena pixlar — formen är otvetydig.
Om ikonen är monokrom, gör den genuint monokrom innan konvertering: rent svart på transparent eller rent svart på vitt, utan mjuk skugga och utan svag inre glöd. Var och en av de effekterna blir former i utdata, och former i utdata är noder du måste hitta och ta bort.
Bedöm resultatet efter nodantal, inte efter hur det ser ut i 100 %
I den storlek du tittar på ser nästan vilken spårning som helst bra ut. Testet som spelar roll är nodantalet: öppna banan och räkna punkterna. En väldragen ikon har punkter bara där kurvan faktiskt byter riktning — en rundad kvadrat har åtta, en cirkel fyra, en chevron tre eller sex. Om en enkel form har kommit tillbaka med sexton jagade motorn pixelbrus, och den formen renderas långsamt, redigeras dåligt och ser subtilt fel ut när den skalas.
På Lite och uppåt är detaljkontrollen det som styr detta direkt: lägre detalj sammanfogar mer aggressivt och ger färre, renare noder. Dra ner den tills hörnen börjar mjukna och gå sedan tillbaka ett steg. På Free väljs nivån automatiskt, och sättet att påverka den är kvaliteten på källan.
Rikta in mot pixelrutnätet efteråt, inte före
Ikonuppsättningar har ett rutnät — vanligtvis 24×24 med en säkerhetsmarginal på två pixlar, eller 16×16 för täta gränssnitt. En spårad bana hamnar där pixlarna var, vilket är nära det rutnätet men inte på det, och vid små renderingsstorlekar är det ”nära” som får en ikon i raden att se en halv pixel tyngre ut än sina grannar.
Lås de färdiga banorna till heltalskoordinater i ditt redigeringsprogram och ställ in viewBox i SVG-filen till ditt rutnät. Det är knepigt första gången och mekaniskt därefter, och det är vad som skiljer en ikonuppsättning som ser designad ut från en som ser konverterad ut.
En streckstyrka, en stil, en fil
Om du bygger om en hel uppsättning, konvertera alla i en och samma batchkonvertering så att de går genom identiska inställningar, och normalisera sedan streckstyrkan för hand över uppsättningen. En ikonfamilj läses som en familj för att strecken matchar; en uppsättning som spårats en och en över flera sessioner matchar inte, och avvikelsen syns även när ingen enskild ikon ser fel ut.
Batchkonvertering finns från Pro, som tar 30 filer åt gången. Under det konverteras filerna en i taget, vilket för en uppsättning på tjugo är några minuters klickande snarare än ett hinder.
Steg för steg
- 01
Skaffa den största rasterbilden
512 pixlar eller mer om det finns. En källa på 32 pixlar är mest kantutjämning, och kantutjämning är vad en vektoriseringsmotor får fel.
- 02
Platta ut till en enda färg
Ta bort skuggor, inre glöd och toningar innan konvertering. Var och en blir extra former i utdata.
- 03
Konvertera till SVG
Ladda upp och ladda ner resultatet. SVG är inbyggt format för både webb- och appikoner.
- 04
Kontrollera nodantalet
Öppna banan i ditt redigeringsprogram. En enkel form ska ha ett fåtal punkter, inte dussintals. Har den dussintals hade källan brus.
- 05
Lås mot ditt ikonrutnät
Rikta in banorna mot hela koordinater och ställ in viewBox till din rutnätsstorlek, så att ikonen renderas skarpt vid 16 och 24 pixlar.
Vanliga problem
- Ikonen ser suddig ut vid 16 pixlar trots att den är vektor
- Dess banor ligger inte mot pixelrutnätet, så renderaren kantutjämnar varje kant. Lås koordinaterna till jämna tal och ställ in viewBox så att den matchar ditt rutnät.
- En enkel form kom tillbaka med dussintals noder
- Källan hade kantutjämning eller JPEG-brus som motorn läste som detalj. Använd en större, renare källa; på Lite och uppåt sänker du detaljnivån.
- Hörn som ska vara spetsiga är rundade
- Utjämningen står för högt. På Lite och uppåt ställer du ner den — riktiga hörn håller sig spetsiga upp till Strong, och först Maximum rundar allt.
- Ikonen har en svag kontur i en annan färg
- Det är originalets kantutjämnade rand, spårad som en egen tunn form. Ta bort den i redigeringsprogrammet och platta nästa gång ut källan till en enda hårdkantad färg först.
Vanliga frågor
- Hur stor ska källikonen vara?
- Så stor som finns — 512 pixlar eller mer är bekvämt. Under cirka 64 pixlar utgör kantutjämningen en stor andel av bilden och motorn kan inte skilja en mjuk kant från en riktig, vilket är det som ger buckliga kurvor.
- Kan jag konvertera en hel ikonuppsättning på en gång?
- Batchkonvertering finns från Pro, som tar 30 filer åt gången; Studio tar 50 och Agency 100. Att konvertera en uppsättning i en batch handlar om mer än hastighet — varje fil går genom identiska inställningar, så ikonerna blir konsekventa med varandra.
- Överlever transparensen?
- Ja, från en källa som har den. Transparenta delar av en PNG eller WebP förblir tomma i SVG:en. En JPEG har ingen transparens alls, så en ikon från en JPEG kommer med sin bakgrund som en fylld form du kan ta bort.
- Ska ikoner vara SVG eller ett typsnitt?
- SVG. Ikontypsnitt var en lösning för en webbläsarepok som är över: de kan inte visa flera färger, de går sönder om typsnittsfilen saknas och skärmläsare läser dem som text. Konvertera till SVG och använd den inline eller som sprite.
Relaterade guider
- Hur du vektoriserar en logo — Bygg om en logo du bara har som liten JPG till rena, tryckfärdiga kurvor med exakta varumärkesfärger.
- Hur du vektoriserar blåkopior och tekniska ritningar — Konvertera inlästa ritningar och scheman till redigerbart linjearbete utan att ärva skannerns fel.
- Hur du vektoriserar ett flygblad eller en affisch för stora format — Rädda en platt design för A1 och större utan mjuka kanter — och veta vilka delar som inte ska konverteras.