Ikonin vektorointi
Lukuaika 6 min · Julkaistu 2.8.2026 · Päivitetty 2.10.2026
Ikoni elää kaikissa koissa yhtä aikaa. Sama tiedosto on 16 pikselin kohta valikossa, 24 pikselin painike, 512 pikselin sovellusruutu ja toisinaan juliste. Se onnistuu vain, kun alla oleva geometria on rehellinen: solmuja on vähän, polut ovat suljettuja, eikä lähteenä käytetyn bittikartan antialiasoinnista ole jäänyt reunajälkeä.
Ikonin vektorointi on siksi vähemmän kiinni muunnoksesta kuin siitä, mitä sille syötetään ja mitä sen jälkeen karsitaan. Tämä opas kattaa molemmat.
Aloita suurimmasta bittikartasta, joka on saatavilla, ja litistä se
Antialiasointi on täällä vihollinen. 32 pikselin ikonissa pehmeät harmaat pikselit jokaista lävistäjää pitkin ovat suuri osa kuvasta, eikä jäljityksellä ole keinoa tietää, että niiden piti olla kova reuna eikä aitoa välisävyä. Anna sille 512 pikselin versio, ja sama reuna on yhden pikselin siirtymä neljäkymmentäyhdeksän puhtaan pikselin keskellä — muoto on kiistaton.
Jos ikoni on yksivärinen, tee siitä aidosti yksivärinen ennen muunnosta: puhdasta mustaa läpinäkyvällä taustalla tai puhdasta mustaa valkoisella, ilman pehmeää pudotusvarjoa ja ilman hienovaraista sisäistä hehkua. Jokainen näistä tehosteista muuttuu muodoiksi tulosteessa, ja tulosteen muodot ovat solmuja, jotka on löydettävä ja poistettava.
Arvioi tulos solmumäärästä, ei siitä miltä se näyttää 100 %:n suurennoksessa
Siinä koossa, jossa sitä katselee, lähes mikä tahansa jäljitys näyttää hyvältä. Merkitsevä testi on solmujen määrä: avaa polku ja laske pisteet. Hyvin piirretyssä ikonissa pisteitä on vain siellä, missä käyrä oikeasti muuttaa suuntaa — pyöreäkulmaisessa neliössä niitä on kahdeksan, ympyrässä neljä, kulmanuolessa kolme tai kuusi. Jos yksinkertainen muoto palaa kuudellakymmenellä pisteellä, jäljitys jahti pikselikohinaa, ja kyseinen muoto piirtyy hitaasti, muokkautuu huonosti ja näyttää skaalattaessa hieman väärältä.
Lite-paketista ylöspäin juuri yksityiskohtaisuuden säädin hallitsee tätä suoraan: matalampi yksityiskohtaisuus yhdistää aggressiivisemmin ja tuottaa vähemmän ja puhtaampia solmuja. Laske säädintä, kunnes kulmat alkavat juuri pehmetä, ja palaa sitten yksi askel ylöspäin. Free-paketissa taso valitaan automaattisesti, ja tapa vaikuttaa siihen on lähteen laatu.
Kohdista pikseliruudukkoon jälkikäteen, ei ennen
Ikoniseteillä on ruudukko — yleensä 24×24 ja kahden pikselin turvavara tai tiheissä käyttöliittymissä 16×16. Jäljitetyt polku osuu siihen, missä pikselit olivat, mikä on lähellä ruudukkoa mutta ei sen päällä, ja pienissä piirtokoossa juuri ”lähellä” saa rivin yhden ikonin näyttämään puoli pikseliä painavammalta kuin naapurinsa.
Kohdista valmiit polut kokonaisiin koordinaatteihin editorissa ja aseta SVG:n viewBox oman ruudukon mukaiseksi. Tämä on mutkikasta ensimmäisellä kerralla ja mekaanista sen jälkeen, ja se erottaa suunnitellulta näyttävän ikonisetin muunnetulta näyttävästä setistä.
Yksi viivanpaksuus, yksi tyyli, yksi tiedosto
Jos koko settiä rakennetaan uudelleen, muunna kaikki yhdessä eräajossa, jotta ne kulkevat identtisten asetusten läpi, ja tasaa viivanpaksuus käsin koko settiin. Ikoniperhe lukeutuu perheeksi, koska sen viivat täsmäävät; useassa istunnossa erikseen jäljitetty setti ei täsmää, ja ero on näkyvissä silloinkin, kun yksikään ikoni ei yksin näytä väärältä.
Eräajo alkaa Pro-paketista, joka ottaa 30 tiedostoa kerralla. Sitä alempana tiedostot muunnetaan yksi kerrallaan, mikä kahdenkymmenen ikonin setille on muutaman minuutin napsuttelua, ei este.
Vaihe vaiheelta
- 01
Hanki suurin bittikarttaversio
512 pikseliä tai enemmän, jos sellainen on olemassa. 32 pikselin lähde on suurelta osin antialiasointia, ja antialiasointi on se, minkä jäljitys saa väärin.
- 02
Litistä yhdeksi väriksi
Poista pudotusvarjot, sisäiset hehkut ja liukuvärit ennen muunnosta. Jokainen niistä muuttuu ylimääräisiksi muodoiksi tulosteeseen.
- 03
Muunna SVG:ksi
Siirrä ja lataa tulos. SVG on natiivimuoto sekä verkon että sovellusten ikoneille.
- 04
Tarkista solmumäärä
Avaa polku editorissa. Yksinkertaisella muodolla pitäisi olla kourallinen pisteitä, ei kymmeniä. Jos niitä on kymmeniä, lähteessä oli kohinaa.
- 05
Kohdista ikoniruudukkoon
Kohdista polut kokonaisiin koordinaatteihin ja aseta viewBox ruudukon kokoon, jotta ikoni piirtyy terävänä 16 ja 24 pikselin koossa.
Yleiset ongelmat
- Ikoni näyttää sumealta 16 pikselin koossa, vaikka on vektori
- Sen polut eivät ole kohdistettu pikseliruudukkoon, joten piirtäjä antialiasoi jokaisen reunan. Kohdista koordinaatit kokonaislukuihin ja aseta viewBox vastaamaan omaa ruudukkoa.
- Yksinkertainen muoto palasi kymmenien solmujen kanssa
- Lähteessä oli antialiasointia tai JPEG-kohinaa, jonka jäljitys luki yksityiskohdaksi. Käytä suurempaa ja puhtaampaa lähdettä; laske Lite-paketissa ja sitä ylempänä yksityiskohtaisuutta.
- Kulmat ovat pyöristyneet, vaikka niiden pitäisi olla teräviä
- Pehmennys on liian voimakas. Lite-paketissa ja sitä ylempänä laske sitä askel verran — aidot kulmat pysyvät terävinä Strong-asteesa saakka, ja vain Maximum pyöristää kaiken.
- Ikonilla on hento erivärinen ääriviiva
- Se on alkuperäisen antialiasoitu reunus, joka on jäljitetty omaksi ohueksi muodokseen. Poista se editorissa, ja litistä seuraavalla kerralla lähde ensin yhdeksi kovareunaiseksi väriksi.
Usein kysytyt kysymykset
- Minkä kokoinen lähdeikonin pitäisi olla?
- Niin suuri kuin on olemassa — 512 pikseliä tai enemmän on mukava. Noin 64 pikselin alapuolella antialiasointi on suuri osa kuvasta, eikä jäljitys erota pehmeää reunaa aidosta, mistä syntyvät kyhmyiset käyrät.
- Voiko koko ikonisetin muuntaa kerralla?
- Eräajo alkaa Pro-paketista, joka ottaa 30 tiedostoa kerralla; Studio 50 ja Agency 100. Setin muuntaminen yhdessä eräajossa merkitsee muutakin kuin nopeutta — jokainen tiedosto kulkee identtisten asetusten läpi, joten ikoneista tulee keskenään yhdenmukaisia.
- Säilyykö läpinäkyvyys?
- Kyllä, lähteestä, jossa sitä on. PNG:n tai WebP:n läpinäkyvät alueet pysyvät tyhjinä SVG:ssä. JPEG-muodossa ei ole lainkaan läpinäkyvyyttä, joten JPEG:stä tuleva ikoni saapuu taustallaan kiinteä muoto, jonka voi poistaa.
- Pitääkö ikonien olla SVG:tä vai fonttia?
- SVG:tä. Ikonifontit olivat korjausliike selainkauteen, joka päättyi: ne eivät osaa useita värejä, ne rikkoutuvat puuttuvan fonttitiedoston varaan, ja ruudunlukijat lukevat niitä tekstinä. Muunna SVG:ksi ja käytä sitä inline-muodossa tai spritenä.
Aiheeseen liittyvät oppaat
- Logon vektorointi — Rakenna pienestä JPG-logosta puhtaat, painovalmiit käyrät täsmällisillä brändiväreillä.
- Sinikopioiden ja teknisten piirustusten vektorointi — Muunna skannatut piirustukset ja kaaviot muokattavaksi viivatyöksi perimättä skannerin virheitä.
- Flyerien ja julisteiden vektorointi suurkokoiseen painoon — Pelasta tasainen suunnittelu A1-kokoon ja sitä suuremmaksi ilman pehmeitä reunoja — ja tiedä, mitkä osat kannattaa jättää muuntamatta.