PNG'yi SVG'ye Dönüştürme: Logo ve İkon Vektörleştirme

PNG bir raster resimdir: her biri bir renge ve isteğe bağlı olarak bir saydamlık değerine sahip, sabit bir piksel ızgarası. 500 × 500 px bir logo tam olarak 250.000 kareden oluşur ve başka hiçbir şey içermez. Bu yüzden afiş boyutuna büyütmek, her kareyi yalnızca büyütür ya da aralarındaki boşlukları bulanıklaştırır. SVG ise bir vektör resimdir; <path>, <circle> ve <rect> gibi şekilleri koordinatları ve dolgu renkleriyle listeleyen bir metin dosyasıdır. Tarayıcı ya da kesim makinesi bu şekilleri gereken her boyutta yeniden çizer. Vektör bir logonun telefon ekranında da fuar bannerında da net kalmasının nedeni budur.

Vektörden rastere geçmek kolaydır, çünkü oluşturucu şekilleri pikseller üzerine boyar; SVG'den PNG'ye dönüştürme bunu bir saniyede yapar. Tersi yönde kayıpsız bir kestirme yoktur, çünkü piksel ızgarası onu oluşturan şekillere dair hiçbir kayıt tutmaz. Birinin pikselleri inceleyip her şeklin nerede başlayıp bittiğini tahmin etmesi gerekir. Bu tahmin adımına izleme (tracing) ya da vektörleştirme denir. Illustrator'dan komut satırı programına kadar her dürüst PNG'den SVG'ye dönüştürücü, aslında bir izleyicidir.

Bazı dönüştürücüler zor kısmı atlar. Orijinal PNG'yi base64 metni olarak gömülü tek bir <image> öğesi içeren geçerli bir SVG dosyası yazarlar; bu da dosyayı PNG'den yaklaşık üçte bir oranında büyütür. Sonuç SVG olarak açılır ve dosya türü kontrolünden geçer, ama yine de vektör ambalajındaki bir piksel resmidir: yakınlaştırırsanız aynı pürüzlü kenarları görürsünüz, kesim makinesi de izleyecek yol bulamaz. Herhangi bir SVG'yi metin düzenleyicide açıp data:image/png arayın; bu metin varsa hiçbir şey vektörleştirilmemiştir.

İzleme, en baştan şekil olarak çizilmiş resimlerde iyi sonuç verir. Bir tasarım uygulamasından dışa aktarılmış logo, düz bir simge, siyah konturlu bir karikatür, taranmış bir imza ya da şablon; hepsi net kenarlarla ayrılmış birkaç düz renkten oluşur. İzleyici her rengi bölgelere ayırır, sınırlarını takip eder ve boyunca yumuşak eğriler uydurur; böylece SVG, tasarımcının çizdiği şekillere yakın çıkar. Logotipteki kalın harfler de iyi izlenir, çünkü büyük bir harf de dolu bir şekildir. Her harf yeniden renklendirebileceğiniz ya da boyutlandırabileceğiniz, ama artık yeniden yazamayacağınız bir ana hatta dönüşür.

Fotoğraflar tam tersidir. Bir portre ya da ürün fotoğrafında birbirine karışan binlerce ince ton vardır ve vektör biçiminin bunu anlatmanın verimli bir yolu yoktur. İzleyiciden 16 renk isterseniz belirgin bantlı, posterize bir illüstrasyon elde edersiniz; 64 isterseniz PNG'den çok daha büyük bir dosyada on binlerce küçük şekil çıkar ve yine de fotoğrafa benzemez. Yumuşak geçişler, gölgeler ve parlamalar da aynı şekilde ince bant yığınlarına dönüşür. Küçük yazı üçüncü sorunlu alandır: 10–12 px'te kenar yumuşatma her harfi arka planına karıştırır ve izleyici "e" ile "o" arasındaki farkı ayırt edemez.

Çözünürlük, hiçbir ayardan daha önemlidir. İzleyici her eğriyi kenar boyunca uzanan piksel merdivenine uydurur; bu merdiven ne kadar inceyse eğri o kadar doğru olur. PNG'yi Figma, Canva, Photoshop ya da bir sunumdan kendiniz dışa aktardıysanız, görüntü boyutunun iki üç katında yeniden dışa aktarın; 1500–2000 px genişliğindeki bir logo izleyiciye bol malzeme sağlar. Küçük bir PNG'yi, sonuç %100 yakınlaştırmada temiz görünmedikçe önce yapay zekâ büyütücüyle büyütmeyin; çünkü uydurulmuş kenar dokusu da gerçek kenarlar kadar sadakatle izlenir.

Sonra arka planı sadeleştirin. PNG tam saydamlığı destekler ve saydam arka plan en kolay durumdur: tamamen saydam her piksel boş alan sayılır, bu yüzden SVG'de çizimin arkasında beyaz bir kutu olmaz. PNG'de düz bir zemin varsa önce çizimin etrafını sıkı biçimde kırpın; kesin çerçeveleme için bir resmi orana göre kırpma rehberimize bakabilirsiniz. Tişört üzerinde fotoğraflanmış logo gibi karmaşık bir arka plan, izlemeden önce kaldırılmalı ya da tek bir düz renkle boyanmalıdır.

Son olarak, izleyici sizin yerinize yapmadan renk sayısını kendiniz azaltın. Kaynak dosyada gölgeleri, parlamaları ve gradyan katmanlarını gizleyin; vektör sürümünde gerekmiyorsa gradyan dolguyu orta rengiyle değiştirin. Kontur rengi dahil kalan düz renkleri sayın ve sayıyı not edin; bir sonraki adımda gireceğiniz en yararlı sayı budur. Aynı logonun JPEG ve PNG sürümleri arasında seçim yapıyorsanız PNG'yi alın, çünkü JPEG sıkıştırması her kenarın çevresine gürültü ekler; ayrıntıları JPG, JPEG ve PNG farkı yazısında bulabilirsiniz.

Her izleyici, etiketler farklı olsa da aynı üç soruyu sorar. Birincisi kaç rengin tutulacağıdır. PNG'den SVG'ye dönüştürücüde Renk modu, Renkli, Gri tonlama ve Siyah beyaz arasında seçim yapar; Renk sayısı ise piksellerin 2 ile 64 arasında kaç kümeye ayrılacağını belirler. Not ettiğiniz sayıya eşitleyin. Çok yüksek ayarlamak, izleyicinin kenar yumuşatmalı piksellerini kendi ince renklerine ayırmasına yol açar ve her şeklin çevresinde silik bir hale olarak görünür; çok düşük ayarlamak iki marka rengini tek renkte birleştirir.

İkinci soru kenarların nasıl ele alınacağıdır. Yumuşatma, piksellerin bıraktığı basamakları yuvarlar; Ayrıntı ise bir lekenin ne kadar küçük olsa da şekil olabileceğine karar verir. PNG sayfası Ayrıntı 70 ve Yumuşatma 40 ile başlar; bu, temiz bir dışa aktarımdaki küçük köşeleri korur. Toz ve başıboş noktalar çıkarsa Ayrıntı'yı düşürün, eğriler dalgalı görünürse Yumuşatma'yı artırın. Düz kenarlardan oluşan geometrik logolar için Eğriler'i Düz çizgiler'e, bloklu kalmasını istediğiniz piksel sanatı için Piksel kenarları'na ayarlayın.

Üçüncü soru yalnızca siyah beyaz izleme için geçerlidir: mürekkep ile kâğıt arasındaki çizgi nereye çekilecek. Eşik 1 ile 254 arasındadır ve varsayılanı 128'dir. Eşikten koyu pikseller siyah, açık olanlar boş olur. İnce mavi tükenmez kalemle atılmış bir imza için soluk çizgiler kalsın diye 160–180'e doğru artırın; hafif gri kâğıt üzerindeki kalın bir keçeli kalem çizimi için kâğıt dokusu leke olmasın diye 100'e doğru düşürün. Etkiler birbirini etkilediğinden her seferinde yalnızca bir ayarı değiştirip karşılaştırın.

Küçük önizlemeyle yetinmeyin. SVG'yi tarayıcıda açıp en sıkı eğriye, yani bir harfin karnına ya da bir sivri ucun köşesine %400–800 yakınlaştırın. İyi bir izlemede yumuşak yaylar ve tasarımda köşe olan yerlerde keskin köşeler görünür; zayıf bir izlemede dalgalanmalar, çukurlar ve yuvarlanmış uçlar vardır. Ardından dosyayı Inkscape, Illustrator veya Figma gibi bir vektör düzenleyicide açıp ana hat ya da düğüm görünümünü etkinleştirin. Basit iki renkli bir logo genellikle birkaç yüz düğüm gerektirir; sizinkinde birkaç bin görünüyorsa izleyici gürültüyü takip etmiştir ve yolları düzenlemek ya da kesmek zahmetli olur.

Dosya boyutu hızlı bir sağlama kontrolüdür. Düz bir logonun optimize edilmiş SVG'si genellikle birkaç kilobayttan birkaç on kilobayta kadardır ve çoğu zaman çıktığı PNG'den küçüktür. Kaynak PNG'den birkaç kat büyük bir izleme dosyası çoğunlukla fazla renk, fazla ayrıntı ya da izlenmemesi gereken bir fotoğraf demektir. SVG'yi optimize et seçeneğini açık tutun; koordinatları yuvarlar ve yolları görünür bir değişiklik olmadan birleştirir. Son olarak çizimi afiş boyutuna ve favicon boyutuna ölçekleyip ikisinde de iyi okunduğunu doğrulayın.

Ücretsiz masaüstü seçeneği Inkscape'tir. PNG'yi içe aktarın, seçin ve Path > Trace Bitmap (Shift+Alt+B) menüsünü açın. Brightness cutoff gibi tek taramalı modlar çizgi çizimlere uygun tek bir siyah yol üretir; çok taramalı modlar belirli sayıda rengi ya da griyi üst üste katmanlar olarak izler. Inkscape'in siyah beyaz izlemesi, Peter Selinger'in 2001'de yayımladığı bir izleme kitaplığı olan Potrace üzerine kuruludur. Potrace'in kendisi PNG yerine PBM, PGM, PPM veya BMP okuyan, yalnızca iki tonlu resimleri işleyen ve SVG, PDF, EPS ya da DXF yazan bir komut satırı programıdır; bu da onu çok sayıda taramayı betikle toplu işlemek için iyi bir seçim yapar.

Adobe Illustrator'da Image Trace, Illustrator CS6'da eski Live Trace'in yerini aldı. PNG'yi yerleştirin, Window > Image Trace menüsünü açın ve Black and White Logo, 3 Colors veya 16 Colors gibi bir ön ayarla başlayın; ardından gelişmiş bölümde Paths, Corners ve Noise değerlerini ayarlayın. İzleme, Expand'a tıklayana kadar canlı kalır; tıkladığınızda sıradan, düzenlenebilir yollara dönüşür. İkisi de yüklü değilse, tarayıcıdaki bir dönüştürücü aynı renk azaltma, kenar bulma ve eğri uydurma sürecini çalıştırır; resimden SVG'ye dönüştürücü ayrıca JPG, WebP ve HEIC kabul eder ve SVG yerine EPS, PDF veya DXF yazabilir.

Web'de SVG, 2001'den beri bir W3C Önerisidir ve güncel her tarayıcı onu <img> etiketinde, CSS arka planı olarak ya da HTML içinde satır içi işler; satır içi kullanımda renkleri fare üzerine gelince bile değişebilir. İzlenmiş bir logo, retina ekranlar için gereken birkaç PNG boyutunun yerine genellikle tek küçük bir dosya koyar. Kesim makineleri için SVG, Cricut Design Space ve Silhouette Studio'nun beklediği biçimdir: izlenen her şekil bir kesim yoluna dönüşür, çok renkli bir izleme ise farklı vinil renklerinden kesebileceğiniz ayrı katmanlar olarak gelir. Lazer kesiciler ve CNC yazılımları genellikle DXF'i tercih eder; PNG'den DXF'e aynı izleme ayarlarından bunu üretir.

Baskı atölyeleri vektör çizim ister, çünkü baskı makinesi, nakış dijitalleştirici ya da tabela kesici piksel değil kenar ister; izlenmiş bir SVG çoğu zaman etiket, tişört ya da banner için bunu karşılar. Yine de bir yaklaşımdır: eğriler uydurulmuş tahminlerdir, renkler piksellerden ortalanmıştır ve yazılar ana hatta çevrilmiştir. Bu yüzden bir şirket logosunu izlemeden önce onu yapana sorun. Bir tasarımcı ya da ajansın neredeyse her zaman kesin eğrileri, adlandırılmış renkleri ve yazı tipleriyle orijinal AI, EPS, PDF veya SVG dosyası vardır ve göndermek onlar için bir dakikalık iştir. İzleme, orijinal kaybolduğunda, logo yalnızca taranmış bir antetli kâğıtta kaldığında ya da çizim size ait olduğunda doğru araçtır.