Bir İkon Nasıl Vektörleştirilir
6 dk okuma · 2 Ağu 2026 tarihinde yayınlandı · 2 Eki 2026 tarihinde güncellendi
Bir ikon aynı anda her boyutta yaşar. Aynı dosya, menüde 16 piksellik bir öğe, 24 piksellik bir düğme, 512 piksellik bir uygulama karesi ve ara sıra bir posterdir. Bu, yalnızca altındaki geometri dürüst olduğunda çalışır: az düğüm, kapalı yollar ve başladığın rasterin yumuşatmasından arta kalan kenar artığı olmadan.
Bu yüzden bir ikonu vektörleştirmek, dönüştürmenin kendisinden çok ona ne verdiğinle ve sonrasında ne budağınla ilgilidir. Bu rehber ikisini de kapsar.
Elindeki en büyük rasterden başla, sonra onu düzleştir
Yumuşatma burada düşmandır. 32 piksellik bir ikonda, her çapraz boyunca uzanan yumuşak gri pikseller görüntünün büyük bir bölümüdür ve motorun bunların gerçek bir ara ton değil keskin bir kenar olması gerektiğini bilmesinin bir yolu yoktur. Ona 512 piksellik bir sürüm ver; aynı kenar, kırk dokuz temiz piksele karşı tek piksellik bir geçiş olur — şekil tartışmasızdır.
İkon tek renkliyse, dönüştürmeden önce onu gerçekten tek renkli yap: şeffaf üzerinde saf siyah ya da beyaz üzerinde saf siyah, yumuşak gölgesiz ve hafif iç parıltısız. Bu etkilerin her biri çıktıda şekillere dönüşür ve çıktıdaki şekiller, bulup silmen gereken düğümlerdir.
Sonucu %100'deki görünüşüne göre değil düğüm sayısına göre değerlendir
Baktığın boyutta neredeyse her izleme iyi görünür. Önemli olan test düğüm sayısıdır: yolu aç ve noktaları say. İyi çizilmiş bir ikon, yalnızca eğrinin gerçekten yön değiştirdiği yerlerde nokta taşır — yuvarlatılmış bir karenin sekizi, bir çemberin dörtü, bir chevron'un üçü ya da altısıdır. Basit bir şekil altmışla geri geldiyse, motor piksel gürültüsünün peşindeydi ve o şekil yavaş işlenir, kötü düzenlenir ve ölçeklendiğinde hafifçe yanlış görünür.
Lite ve üzerinde, bunu doğrudan yöneten şey ayrıntı ayarıdır: düşük ayrıntı daha agresif birleştirir ve daha az, daha temiz düğüm üretir. Köşeler yumuşamaya yeni başlayana kadar aşağı it, sonra bir kademe geri çek. Free'de düzey otomatik seçilir ve onu etkilemenin yolu kaynağın kalitesidir.
Piksel ızgarasına önce değil, sonra hizala
İkon setlerinin bir ızgarası vardır — genellikle iki piksellik güvenli payla 24×24 ya da yoğun arayüzler için 16×16. İzlenen yol, pikseller neredeysel oraya düşer; bu ızgaraya yakındır ama üzerinde değildir ve küçük işleme boyutlarında 'yakın' olmak, bir sıradaki ikonun komşularından yarım piksel ağır görünmesini sağlayan şeydir.
Bitmiş yolları editöründe tam koordinatlara kilitle ve SVG'nin viewBox'ını ızgarana ayarla. Bu ilk seferde uğraştırıcı, sonrasında mekaniktir ve tasarlanmış görünen bir ikon setini dönüştürülmüş görünen birinden ayıran şey budur.
Tek kalınlık, tek stil, tek dosya
Bütün bir seti yeniden inşa ediyorsan, hepsini tek bir toplu işte dönüştür ki aynı ayarlardan geçsinler, sonra set genelinde çizgi kalınlığını elle eşitle. Bir ikon ailesi aile olarak okunur, çünkü çizgileri uyuşur; birkaç oturum boyunca tek tek izlenmiş bir set uyuşmaz ve uyuşmazlık, tek bir ikon bile yanlış görünmezken görünür.
Toplu dönüştürme Pro'da başlar; Pro aynı anda 30 dosya alır. Altındaki planlarda dosyalar tek tek dönüştürülür ki yirmilik bir set için bu bir engel değil, birkaç dakikalık tıklamadır.
Adım adım
- 01
En büyük raster sürümü edin
Varsa 512 piksel ya da daha fazlası. 32 piksellik bir kaynak çoğunlukla yumuşatmadan ibarettir ve yumuşatma, motorun yanlış yaptığı şeydir.
- 02
Tek renge düzleştir
Dönüştürmeden önce düşen gölgeleri, iç parıltıları ve geçişleri kaldır. Her biri çıktıda fazladan şekillere dönüşür.
- 03
SVG'ye dönüştür
Yükle ve sonucu indir. SVG, hem web hem uygulama ikonları için yerel biçimdir.
- 04
Düğüm sayısını kontrol et
Yolu editöründe aç. Basit bir şekil düzinelerce değil, bir avuç nokta taşımalı. Düzinelerce noktası varsa, kaynakta gürültü vardı.
- 05
İkon ızgarana kilitle
Yolları tam koordinatlara hizala ve viewBox'ı ızgara boyutuna ayarla ki ikon 16 ve 24 pikselde net işlensin.
Sık karşılaşılan sorunlar
- İkon, vektör olmasına rağmen 16 pikselde bulanık görünüyor
- Yolları piksel ızgarasına hizalı değildir, bu yüzden işleyici her kenarı yumuşatıyor. Koordinatları tam sayılara kilitle ve viewBox'ı ızgarana uyacak şekilde ayarla.
- Basit bir şekil düzinelerce düğümle geri geldi
- Kaynakta, motorun ayrıntı olarak okuduğu yumuşatma ya da JPEG gürültüsü vardı. Daha büyük, daha temiz bir kaynak kullan; Lite ve üzerinde ayrıntı düzeyini düşür.
- Keskin olması gereken köşeler yuvarlanmış
- Yumuşatma çok yüksek ayarlanmış. Lite ve üzerinde bir kademe düşür — gerçek köşeler Güçlü'ye kadar keskin kalır ve yalnızca Maksimum her şeyi yuvarlar.
- İkonun farklı renkte soluk bir dış çizgisi var
- Bu, özgünün yumuşatılmış kenar artığıdır ve kendi ince şekli olarak izlenmiştir. Editörde sil ve bir dahaki sefere kaynağı önce tek, keskin kenarlı bir renge düzleştir.
Sık sorulan sorular
- Kaynak ikon ne boyutta olmalı?
- Var olanın en büyüğü — 512 piksel ve üzeri rahattır. Yaklaşık 64 pikselin altında yumuşatma görüntünün büyük bir bölümünü kaplar ve motor yumuşak bir kenarı gerçek bir kenardan ayıramaz; tümsekli eğrileri üreten budur.
- Bütün bir ikon setini tek seferde dönüştürebilir miyim?
- Toplu dönüştürme Pro'da başlar; Pro tek seferde 30 dosya alır, Studio 50 ve Agency 100. Bir seti tek toplu işte dönüştürmek hızdan daha fazlası için önemlidir — her dosya aynı ayarlardan geçer, böylece ikonlar birbiriyle tutarlı çıkar.
- Şeffaflık korunur mu?
- Evet, onu taşıyan bir kaynaktan. Bir PNG ya da WebP'nin şeffaf alanları SVG'de boş kalır. Bir JPEG'in hiç şeffaflığı yoktur; bu yüzden JPEG'den gelen bir ikon, arka planı silebileceğin dolu bir şekil olarak gelir.
- İkonlar SVG mi olmalı yoksa font mu?
- SVG. İkon fontları, sona eren bir tarayıcı dönemine ait bir çözümdü: birden çok renk yapamazlar, font dosyası eksik olduğunda bozulurlar ve ekran okuyucular onları metin olarak okur. SVG'ye dönüştür ve satır içinde ya da sprite olarak kullan.
İlgili rehberler
- Bir Logo Nasıl Vektörleştirilir — Yalnızca küçük bir JPG olarak elinde olan bir logoyu, markanın tam renkleriyle temiz, baskıya hazır eğrilere dönüştür.
- Blueprint'ler ve Teknik Çizimler Nasıl Vektörleştirilir — Taranmış çizimleri ve şemaları, tarayıcının hatalarını devralmadan düzenlenebilir çizgi işine dönüştür.
- Büyük Format için El İlanı ya da Poster Nasıl Vektörleştirilir — Düz bir tasarımı, yumuşak kenarlar olmadan A1 ve daha büyüğü için kurtar — ve hangi kısımları dönüştürmeyeceğini bil.