Tutarlı bir UI kiti için PNG simgelerini SVG’ye dönüştürün

Tüm klasörü tek seferde dönüştürmeyin. En basit simgenizi, en yoğun simgenizi, eğri bir şekli ve iç boşluğu olan bir simgeyi içeren küçük bir grupla başlayın. SVG kurallarını bu örnekle belirleyin, ardından setin geri kalanına uygulayın. Böylece yanlış vektörleştirme kararlarını onlarca dosyaya yayılmadan yakalarsınız.

Dönüştürmenin kendisi yalnızca bir adımdır. Kullanılabilir bir UI kiti ayrıca ortak bir koordinat sistemi, tutarlı optik boyut, öngörülebilir renk davranışı, düzenlenebilir yollar ve simgeleri kullanacak üründe teslim kontrolü gerektirir.

Kısa iş akışı

1. PNG setinin envanterini çıkarıp yinelenenleri veya eksik kaynakları bulun.
2. Temsili simgeleri seçin; ortak ızgarayı, iç boşluğu, dolgu veya kontur modelini ve renk kurallarını belirleyin.
3. Örnek simgeleri gerçek yollara dönüştürün.
4. Silüeti, düğümleri, negatif alanı ve renk bölgelerini inceleyin.
5. Seti tek bir vektör düzenleyicide standartlaştırın, ardından kalan simgeleri dönüştürüp inceleyin.
6. Dışa aktarılan SVG'leri gerçek UI'da ve varlık işleme hattında test edin.

Hangi PNG simgelerinin SVG'ye dönüşmesi gerektiğine karar verin

Net sınırları olan düz renkli simgeler, vektörleştirme için güçlü adaylardır. Diğer görüntüler farklı bir yöntem gerektirir. Dönüştürücüyü açmadan önce klasörü sınıflandırın.

Elde kalan kaynak PNG yerine bir simge kapsayıcısıysa önce uygun ICO'dan SVG'ye veya ICNS'den SVG'ye iş akışıyla grafiği elde edin. Ardından oluşan grafiği aşağıdaki aynı UI kiti kurallarına göre standartlaştırın.

SVG dosya adı, piksellerin vektör yollarına dönüştüğünü kanıtlamaz. SVG Embedded Content belirtiminin açıkladığı gibi format, <image> öğesi aracılığıyla geçerli biçimde gömülü raster görüntü içerebilir. Dışa aktarılan dosya hâlâ tek bir dikdörtgen görüntü olarak seçiliyorsa veya çok yakınlaştırıldığında blok blok görünüyorsa kite eklemeden önce gömülü raster kontrollerini uygulayın.

Vektörleştirmeden önce UI kiti kurallarını belirleyin

Tek tek temiz olan simgelerden oluşan bir klasör, birlikte bakıldığında yine de tutarsız görünebilir. Özgün PNG'ler henüz uymasa bile önce set kurallarını yazın.

Tek bir koordinat uzayı seçin

Aynı bileşen boyutunu paylaşması gereken simgeler için tek bir viewBox kullanın. Sayıların 24'e 24 veya 16'ya 16 olması gerekmez; sisteminize uymaları gerekir. SVG, viewBox dikdörtgenini görüntülenen görünüm alanına eşler; dolayısıyla aynı dış ölçüler yalnızca grafikler içlerinde tutarlı biçimde konumlandırıldığında işe yarar. SVG 2 koordinat sistemi belirtimi bu eşlemeyi tanımlar.

Şunları kaydedin:

• ortak viewBox;
• amaçlanan görsel merkez ve taban çizgisi;
• minimum iç boşluk;
• hangi parçaların olağan optik sınırların ötesine kasıtlı olarak uzanabileceği.

Bir dolgu veya kontur modeli seçin

Simge ailesinin dolgulu silüetlerden, düzenlenebilir konturlardan veya belgelenmiş bir karışımdan oluşacağına karar verin. Kontur tabanlı bir simge setinde uç biçimleri, birleşimler ve algılanan kalınlık tutarlı olmalıdır. Dolgulu bir set ise tutarlı negatif alanlar ve kenar biçimi gerektirir. Vektörleştirme ince bir konturu kapalı bir dış hat şekline dönüştürebilir; bu nedenle önizlemeye güvenmek yerine geometriyi inceleyin.

Rengin nasıl kontrol edileceğine karar verin

Tek renkli bir sistem için hedef sistemin simgeye ait tasarım belirtecine eşleyebileceği, tekrarlanabilir bir renk kuralı kullanın. Çok renkli simgeler için izin verilen paleti ve hangi bölgelerin değişebileceğini belirleyin. Görünür bir amaçları yoksa kenar yumuşatmadan kalan, birbirine çok yakın, küçük ton farkları olan renkleri korumayın.

Önce temsili bir örneği dönüştürün

Zor durumları ortaya çıkaran dört ila altı simge seçin. Bir daire veya yay, bir çapraz çizgi, küçük bir harf içi boşluk veya delik ve ailenin en yoğun simgesini ekleyin. Set birden fazla renk kullanıyorsa bunlardan birini de ekleyin.

1. PNG'leri hazırlayın

Bulabildiğiniz en temiz dışa aktarımı kullanın. İstenmeden eklenmiş arka plan dikdörtgenlerini kaldırın, tutarlı biçimde kırpın ve yalnızca daha fazla piksel oluşturmak için küçük, bulanık bir kaynağı büyütmeyin. Kalite kaybetmeden PNG'yi SVG'ye dönüştürme için kaynak hazırlama kılavuzu, vektörleştirmeye özgü ayrıntıları ele alır.

Her özgün dosyanın dokunulmamış bir kopyasını saklayın. Belleğinize güvenmek yerine SVG'yi kaynakla karşılaştırabildiğinizde temizlemeyi değerlendirmek daha kolaydır.

2. Örnek simgeleri vektörleştirin

Otomatik bir vektörleştirme aracı veya tasarım yazılımınızdaki vektörleştirme aracını kullanın. Illustrator'ın güncel Image Trace iş akışı renk, yollar, köşeler ve gürültü için kontroller sunar. Figma'nın güncel Vectorize özelliği vektörleştirmeden sonra renk modları sunar ve karmaşık veya düşük çözünürlüklü görüntülerin iyi vektörleştirilemeyebileceğini belirtir (Adobe Image Trace; Figma Vectorize).

Tarayıcı üzerinden ilerlemek için örneği PerfectVector'ın PNG'den SVG'ye dönüştürücüsüne yükleyin. Önizlemeyi özgün görüntüyle karşılaştırın, şekilleri ve renk bölgelerini inceleyin, ardından vektör düzenleyicinizde standartlaştırmak istediğiniz SVG'yi indirin. Klasörün geri kalanına geçmeden önce temsili grubu deneyin.

Kitinizin ana düzenleyicisi Figma ise Figma Vectorize ve harici SVG iş akışı karşılaştırması, iki yöntemi aynı örnek üzerinde karşılaştırmanıza yardımcı olur. Düzenlemeniz gereken delikler ve renk bölgeleri de dâhil olmak üzere şekilleri içe aktarmadan sonra değerlendirin.

3. Yalnızca önizlemeyi değil, yolları inceleyin

Her sonucu bir vektör düzenleyicide açıp şekilleri seçin. SVG yolları, SVG 2 Paths belirtiminde tanımlanan çizgi ve eğri segmentleri de dâhil olmak üzere komutlardan ve koordinatlardan oluşur. Silüeti korumaya yetecek sayıda düğüm gerekir; evrensel bir hedef sayı yoktur.

Şunları arayın:

• basit bir eğrinin çevresinde yoğun düğüm zincirleri;
• başıboş benekler veya arka plan dikdörtgenleri;
• aynı kenarın üst üste binen kopyaları;
• kenar yumuşatmanın oluşturduğu küçük renk parçaları;
• vektörleştirme sırasında kapanmış delikler veya harf içi boşluklar;
• seçilebilir yollar yerine tek bir raster dikdörtgen.

Basit bir şekil noktaların altında kaybolmuşsa sadeleştirmeden önce fazla düğüm teşhisini kullanın. Aşırı kapsamlı bir temizleme köşeleri kaydırıp küçük boşlukları kapatabilir; bu nedenle düzenlenen yolu PNG ile karşılaştırın.

Simgeleri tek bir aile olarak standartlaştırın

Örnek vektörleştirmeler yapısal olarak sağlam olduğunda bunları ortak ızgaraya yerleştirip birlikte inceleyin. Bir setin sisteme dönüştüğü yer burasıdır.

Set düzeyinde inceleme

Seti gerçek arayüz boyutunda ve düzenleme için daha yüksek bir yakınlaştırmada kontrol edin:

Optik düzeltmeye izin verilir. Bir dairenin, kareyle aynı boyutta görünmesi için kareyi içeren kutunun biraz dışına uzanması gerekebilir. Kural, her şekli aynı geometrik sınırlara zorlamak yerine belgelenmiş bir ızgarayla desteklenen tutarlı algıdır. Yazdırılabilir görsel program kartı iş akışı, bu ayrımı resim kutularına, ayrı etiketlere ve ölçülendirilmiş bir PDF sayfasına uygular.

Kart yerleşiminden önce şekil düzenlemesi gerektiren günlük rutin resimlerinden oluşan bir set için görsel destek grafikleri dönüştürücüsünü temsili bir çizimde kullanın. Etiketleri ayrı tutun ve dönüştürülen resmin amaçlanan anlamı hâlâ taşıdığını kontrol edin.

PerfectVector ile bu süreç nasıl işler?

PerfectVector, kaynak hazırlama ile seti standartlaştırma arasındaki vektörleştirme aşamasına uygundur. Temsili bir PNG örneğini düzenlenebilir vektör şekilleri olarak yeniden oluşturmak için kullanın; ardından çıktıyı bu kit açısından önemli ölçütlerle değerlendirin:

1. Her simge silüetini ve negatif alanlarını koruyor mu?
2. Amaçlanan bölgeleri seçip yeniden renklendirebiliyor musunuz?
3. Eğriler yönetilebilir sayıda düğüm kullanıyor mu?
4. Sonucu standartlaştırmak, elle veya uygulamanın kendi aracıyla yapılan bir vektörleştirmeden daha kolay mı?

Örnek geçerse kalan uygun PNG'leri dönüştürüp set düzeyinde inceleme için aynı ana dosyaya alın. Başarısız olursa daha fazla simgeyi işlemeden önce kaynağı veya vektörleştirme yöntemini değiştirin. PerfectVector, tasarım sistemine ait optik hizalama ve adlandırma kararlarının yerini almaz.

Kaynağı kaybetmeden temizleyin

Dosyaları iki katman hâlinde tutun:

• Kaynak arşivi: dokunulmamış PNG'ler, varsa özgün tasarım dosyaları ve kökenleriyle ilgili notlar.
• Düzenlenebilir ana dosya: ortak ızgarada standartlaştırılmış vektör simgeleri.
• Teslim çıktıları: ürünün kullandığı optimize edilmiş SVG'ler.

Şekil düzenlemelerini ana dosyada yapın, ardından teslim dosyalarını yeniden oluşturun. Ayrı dışa aktarılmış dosyaları elle düzenlemekten kaçının; aksi hâlde düzeltmeler kopyalar arasında farklılaşır. SVG'nin yeniden renklendirilmesi, yeniden şekillendirilmesi veya tuvalinin düzeltilmesi gerekiyorsa SVG düzenleme iş akışını kullanın ve düzeltilmiş geometriyi ana sete geri aktarın.

Teslimde yeniden kullanılabilir web simgeleri kullanılıyorsa grafik onaylandıktan sonra SVG symbol sprite iş akışını izleyin. Set uygulamaya girmeden önce symbol kimliklerini, iç içe referansları, koordinat sınırlarını, boyama kurallarını ve örnek öğelerin adlarını kontrol eder. Arayüz simgeleri canvas üzerinde çiziyorsa SVG yollarını Path2D ile canvas'a eşleyin ve koordinat dönüşümünü, renkleri, açıklıkları ve çizim tamponunun çözünürlüğünü ana SVG dosyasına göre doğrulayın.

Tasarım kütüphanesinin hedefi Penpot ise kitin geri kalanını eklemeden önce tuvale örnek bir SVG yerleştirip bir renk bölgesini ve bir konturu test edin. Penpot SVG içe aktarma kılavuzu, proje dosyası içe aktarmayı grafik yerleştirmeden ayırır; Penpot'un kendi şekillerini, ham SVG içeriğini ve düzenlenebilir etiketleri nasıl kontrol edeceğinizi açıklar. Bu, doğru görünen ancak kitin gerektirdiği düzenlemeleri desteklemeyen bir simgeyi yakalar.

Teslimden önce birkaç simgeyi önemli olan her ortamda test edin: tasarım kütüphanesi, uygulama bileşeni ve varsa derleme veya optimizasyon adımı. Sistem kullanıyorsa devre dışı ve ters renkli durumları da kontrol edin. Yapısal olarak temiz bir dosya, renk veya boyut varsayımları bileşenle örtüşmüyorsa kite yine de uygun olmayabilir. Hedef Android ise varlık uygulamaya girmeden önce görünüm alanı boyutlarını, dolguları, yol karmaşıklığını ve içe aktarıcı desteğini doğrulamak için PNG'den VectorDrawable'a içe aktarma kontrol listesini kullanın. Godot projeleri için doku içe aktarma türünü seçmek ve raster boyutunu, aşırı örneklemeyi ve desteklenen grafikleri doğrulamak üzere Godot SVG içe aktarma kontrol listesini kullanın. Unity projeleri için düzenleyiciyle uyumlu içe aktarıcıyı seçmek ve UI Toolkit veya sprite hedefini doğrulamak üzere Unity SVG içe aktarma kontrol listesini kullanın.

SwiftUI projeleri için adlandırılmış görüntü kaynağını, özgün veya şablon renk davranışını ve son görüntüleme boyutunu doğrulamak üzere SVG varlık kataloğu ve görüntüleme iş akışını kontrol edin.

UI kiti teslim kontrol listesi

• Vektörleştirilen her simge, mevcut en temiz kaynaktan geldi.
• Simgeler belgelenmiş viewBox, iç boşluk ve hizalama kurallarını paylaşıyor.
• Optik boyut ve algılanan görsel ağırlık, gerçek UI boyutunda tutarlı.
• Dolgulu ve konturlu simgeler sistemin belirtilen modeline uyuyor.
• Renk bölgeleri onaylı palete veya tasarım belirteci kuralına öngörülebilir biçimde eşleniyor.
• Eğriler, belirgin yol karmaşası olmadan doğruluk için yeterli sayıda düğüm kullanıyor.
• Hiçbir SVG, yanlışlıkla gömülmüş raster, arka plan kutusu veya yinelenen kenar içermiyor.
• Dosya ve bileşen adları benzersiz ve kararlı.
• Dışa aktarılan set, ürünün normal optimizasyon adımından sonra test edildi.
• Kaynak arşivi, düzenlenebilir ana dosya ve teslim dosyaları ayrı tutuluyor.

Sık sorulan sorular

Tüm PNG simgelerini temizlemeden önce topluca dönüştürebilir miyim? Dönüştürebilirsiniz, ancak temsili bir örnek daha güvenlidir. Setin en zor şekillerini kapsayan birkaç simgeyi dönüştürün, ızgara ve yol kurallarını belirleyin ve ancak sonra geri kalanını işleyin. Aksi hâlde tek bir yanlış vektörleştirme seçimi, tüm klasörde tekrarlanan temizleme işleri oluşturabilir.

Her SVG simgesi aynı viewBox'ı mı kullanmalı? Aynı UI bileşenini paylaşan simgeler genellikle aynı viewBox değerinden yararlanır, ancak içindeki grafik optik ayar gerektirebilir. Dairelerin, sivri şekillerin veya alışılmadık derecede yoğun simgelerin belgelenmiş taşma ya da iç boşluk değişikliklerini kullanmasına izin verirken koordinat uzayını tutarlı tutun.

Bir UI simgesinde kaç düğüm olmalı? Evrensel bir sayı yoktur. Amaçlanan silüeti, köşeleri ve negatif alanları koruyan en az sayıda düğümü kullanın. Benzer karmaşıklıktaki simgeleri karşılaştırın ve yoğun bir nokta zinciri içeren her basit eğriyi inceleyin.

SVG seti bittikten sonra PNG simgelerini saklamalı mıyım? Evet. Özgün PNG'leri ve varsa daha eski tasarım kaynaklarını bir arşivde saklayın. Bir vektörleştirmenin yeniden yapılması gerektiğinde köken bilgisi ve görsel referans sağlarlar. Düzenlemeler için standartlaştırılmış ana vektör dosyasını kullanın ve teslim SVG'lerini o ana dosyadan oluşturun.

Kaynaklar

1. W3C — SVG Coordinate Systems, Transformations and Units — SVG görünüm alanlarını, koordinat sistemlerini, viewBox değerini ve grafiğin görüntülenen bir bölgeye nasıl eşlendiğini tanımlar.
2. W3C — SVG Paths — Düzenlenebilir SVG yol geometrisini oluşturan çizgi ve eğri komutlarını tanımlar.
3. W3C — SVG Embedded Content — SVG'nin vektör yolları yerine raster görüntü içeriği barındırabileceğini doğrular.
4. Adobe Illustrator — Vectorize images using Image Trace — Güncel raster vektörleştirme iş akışını ve düzenlenebilir yol çıktısını belgeler.
5. Figma Learn — Convert static images to vector layers — Figma'nın güncel Vectorize iş akışını, renk modlarını ve kaynak görüntü sınırlamalarını belgeler.

---

Tüm klasörle değil, en zor birkaç simgeyle başlayın. Örnek PNG'leri SVG'ye dönüştürün, yollarını ve renk bölgelerini inceleyin, ardından iş akışını genişletmeden önce en iyi sonucu UI kiti kurallarınıza göre standartlaştırın.