PNG'den SVG'ye nasıl kullanılır
- Bir PNG, GIF veya WebP sprite bırak.
- Bir çıktı modu seç: renk başına bir path (en küçük), birleştirilmiş dikdörtgenler veya piksel başına bir rect.
- Görüntüleme boyutunu ayarla; viewBox piksel cinsinden kalır, bu yüzden SVG her durumda temiz ölçeklenir.
- İstersen düz renk bir arka plan ekle.
- .svg dosyasını indir ya da kodu kopyala.
Neler elde edersiniz
- shape-rendering="crispEdges" içeren SVG
- Moda göre dosya boyutu karşılaştırması
- Kopyalanabilir SVG kaynak kodu
Onunla oyun yaparken öğrendiğimiz ipuçları
- Path modu genelde en küçüğüdür; web, ikonlar ve lazer kesim için istediğin budur.
- Rect modu elle düzenlemesi ya da CSS ile animasyon yapması en kolay olandır, çünkü her blok ayrı bir elemandır.
- Sprite'ları küçük tut. 64×64 bir sprite anında dönüşür; binlerce renkli fotoğraf benzeri bir görsel devasa bir SVG üretir.
- Yarı saydam pikseller fill-opacity olur, böylece yumuşak gölgeler dönüşümden sağ çıkar.
Kullanım alanları
- Sprite'ları bir web sitesinde keskin ikon veya logo olarak kullanmak
- Piksel sanatını büyük boyutta basmak (poster, çıkartma, ürün)
- Piksel sanatını Figma, Illustrator veya Inkscape'e aktarmak
- Piksel tasarımlardan lazer kesim ve vinil kesim yapmak
SSS
Dönüşüm kayıpsız mı?
Evet. Her piksel, birebir rengi ve alfasıyla tam olarak bir şeklin içinde yer alır. SVG'yi orijinal boyutta rasterleştirirsen orijinal PNG'yi geri alırsın.
Neden görseli doğrudan trace etmiyoruz?
Trace araçları kenarları yumuşatıp eğrilere çevirir ve bu piksel sanatını mahveder. Bu dönüştürücü, piksel ızgarası üzerindeki keskin 90° kenarları korur.
Hangi mod en küçük dosyayı üretir?
Path modu. Aynı renkteki dikdörtgenler, kısa göreli komutlarla tek bir path elemanını paylaşır. Araç her modun boyutunu gösterir, böylece karşılaştırabilirsin.
Büyütünce bulanık görünür mü?
Hayır. SVG, shape-rendering="crispEdges" ve tam sayı koordinatlar kullanır, bu yüzden kenarlar her yakınlaştırmada keskin kalır.
Boyut sınırı var mı?
512×512 piksele kadar. Daha büyük görseller işe yaramayacak kadar büyük SVG'ler üretir.
Görselim yükleniyor mu?
Hayır, dönüşüm tarayıcında gerçekleşir.