Bir SVG Neden Siz Dönüştürene Kadar Boyutsuzdur
İnsanlar sık sık SVG'den PNG'ye "kalite kaybetmeden" nasıl dönüştürüleceğini sorar; oysa sorunun içinde önce açıklığa kavuşturulması gereken bir yanlış anlama var. Bir SVG'nin kaybedecek kalitesi yoktur. Hiç pikseli yoktur ki.
Vektörler Tarif Eder, Pikseller Saklar
SVG; eğriler, dolgular ve metinden oluşan şekillerin sabit piksel boyutu olmayan bir koordinat sistemindeki tarifidir. PNG ise sabit bir piksel ızgarasıdır. Bu yüzden SVG'den PNG'ye dönüştürmek her zaman bir boyut seçmek demektir ve sonuç, seçtiğiniz her boyutta nettir.
Bir SVG'yi metin düzenleyicide açın; talimatlar görürsünüz: şu noktaya git, şuraya eğri çiz, bu renkle doldur. Çizimin kaç piksel genişliğinde olduğunu söyleyen hiçbir şey yoktur. Buna tarayıcı görüntüleme anında karar verir ve her seferinde farklı karar verebilir.
viewBox, width ve height Aslında Ne Anlama Gelir
Boyutu kök öğedeki üç öznitelik belirler. viewBox koordinat sistemini tanımlar: "bu çizim yatayda 0'dan 240'a, dikeyde 0'dan 160'a uzanır". width ve height varsa varsayılan bir görüntüleme boyutu önerir. Birçok SVG'de yalnızca viewBox, bazılarında yalnızca width ve height, birkaçında ise hiçbiri yoktur.
Bu dönüştürücü hangileri varsa onları okur, bir tarayıcının yapacağı gibi içsel bir boyut hesaplar ve bunu 1× tabanı olarak kullanır. Hiçbiri tanımlı değilse yine kullanılabilir bir görsel alabilmeniz için 1.024 piksele geri düşer.
"Kalite Kaybetmeden" Neden Yanlış Soru
SVG aynı talimatlardan her boyutta işlenebildiği için 4.000 piksellik bir PNG, 400 piksellik olanla tamamen aynı netliktedir; işleyici yalnızca daha fazla ayrıntı çizer. Kalite kaybetmenin tek yolu küçük işleyip PNG'yi sonradan büyütmektir. Çözüm, son boyutu burada, dönüştürme anında seçmek ve PNG'yi asla büyütmemektir.
Bu SVG'den PNG'ye Dönüştürücü Ne Yapar
Bu araç SVG dosyalarınızı tarayıcıda okur, çalıştırılabilir her şeyi kaldırır, her birini seçtiğiniz boyutta tarayıcının kendi motoruyla işler ve şeffaflığı korunmuş kayıpsız PNG'leri tek tek ya da ZIP olarak size verir.
Tarayıcınızla Aynı İşleyici
Sunucu taraflı dönüştürücüler ayrı bir kütüphane kullanır – librsvg, Inkscape, ImageMagick – ve her birinin eksikleri vardır: desteklemediği bir filtre, yerine başkasını koyduğu bir yazı tipi, biraz farklı çizdiği bir degrade. Geri aldığınız PNG, baktığınız SVG ile aynı olmayabilir.
Burada işlemeyi Blink, Gecko ya da WebKit – hangi tarayıcıyı kullanıyorsanız o – yapar ve SVG'yi bir canvas'a çizer. SVG tarayıcınızda doğru görünüyorsa PNG de aynı görünür; çünkü kelimenin tam anlamıyla aynı çizimdir.
Scriptler Temizlenir, Hiçbir Dosya Yüklenmez
SVG bir XML'dir ve <script> öğeleri, onload işleyicileri ve gömülü HTML içerebilir. Kaynağı bilinmeyen bir dosya öylece açılacak bir şey değildir. Dönüştürücü işlemeden önce scriptleri, olay özniteliklerini ve foreignObject bloklarını kaldırır; sonucu da zaten kod çalıştıramayan bir görsel öğesinin içinde işler. İki katman, ikisi de yerel.
Hiçbir aşamada hiçbir dosya yüklenmez. Bir toplu dönüştürme sürerken tarayıcınızın geliştirici araçlarındaki Ağ paneli boş kalır.
SVG'den PNG'ye 3 Adımda Nasıl Dönüştürülür
SVG dosyalarınızı bırakın
Bir ya da daha fazla .svg dosyasını kesikli alana sürükleyin ya da tıklayıp seçin. Masaüstünde tek seferde en fazla 10 dosya. Her satırda vektörün canlı önizlemesi görünür; tarayıcılar SVG'yi doğal olarak gösterir, yani gördüğünüz şey işlenecek olandır.
Boyut ve arka plan seçin
Dönüştürme Ayarları'nda Ölçek (SVG'nin kendi boyutunun 1×, 2×, 3× ya da 4× katı) ya da Genişlik (hazır bir değer ya da herhangi bir piksel genişliği; yükseklik en boy oranını izler) seçin. Ardından arka planı belirleyin: varsayılan olarak şeffaf ya da düzleştirmek için beyaz, siyah ya da istediğiniz bir renk.
PNG'leri ya da bir ZIP indirin
Dönüştür'e basın. Her dosya çıktı boyutlarını ve PNG boyutunu gösterir. Tek tek indirin ya da Tümünü İndir'e basarak orijinal adları ve .png uzantısıyla bir ZIP alın.
En fazla 10 SVG dosyası bırakın. Yerel olarak okunur, hiçbir dosya yüklenmez.
Bir ölçek seçin ya da genişlik yazın, ardından şeffaf ya da düz bir arka plan belirleyin.
Her PNG'yi tek tek ya da hepsini bir ZIP olarak indirin.
Doğru Çıktı Boyutunu Seçmek
Boyut bir tercih olduğuna göre seçeneklerin ne işe yaradığını bilmek işinize yarar. İki mod neredeyse her durumu karşılar.
1×, 2×, 3× – Ekran Yoğunluğuna Uyum
Standart bir monitör her CSS noktası için bir piksel gösterir. Retina ya da HiDPI ekran iki, çoğu modern telefon üç piksel gösterir. Ekranda 32 punto olan bir simge bu yüzden ilki için 32, ikincisi için 64, üçüncüsü için 96 piksellik PNG ister. 1×, 2× ve 3× tam olarak bu anlama gelir.
Web ve uygulama işlerinde aynı SVG genellikle üç ölçekte de dışa aktarılır. Dosyayı bir kez bırakın, 1× ile dönüştürün, ayarı değiştirin, tekrar dönüştürün; ya da doğrudan 3× ile dışa aktarıp küçültmeyi platforma bırakın.
Yaygın Hedefler için Boyut Tablosu
Favicon: 16, 32 ve 48 piksel; en iyisi 512 piksellik bir PNG'den PNG ICO Dönüştürücü ile üretmek. Uygulama simgeleri: mağazalar için 1024 piksel, ardından simge seti oluşturucu. Sosyal medya avatarları: 400 ile 800 piksel arası. Open Graph görselleri: 1200×630. Pazar yeri ilanları: genellikle uzun kenarda 2000 piksel.
Baskı ve Pazar Yerleri için Özel Genişlik
Baskı için fiziksel boyuttan 300 DPI ile geriye doğru hesaplayın: A4 sayfa 2.480 piksel genişliğinde, A3 3.508, 15 cm'lik bir etiket 1.800 pikseldir. Genişlik moduna geçin, sayıyı yazın; yükseklik SVG'nin en boy oranını izler. Dönüştürücü, çıktıyı uzun kenarda 16.384 pikselle sınırlar – tarayıcıların canvas'a koyduğu sınır budur – ve bir istek küçültülmek zorunda kaldıysa bunu size söyler.
Şeffaflık, Arka Planlar ve Kenarlar
Çoğu SVG'nin – logolar, simgeler, illüstrasyonlar – arka planı yoktur: şekiller boşlukta durur. PNG bunu saklayabilir; bu iş için JPG yerine PNG'yi tercih etmenin iki nedeninden biri budur.
Arka Planı Şeffaf Tutmak
Burada varsayılan şeffaftır. SVG'nin boyamadığı her piksel, eğri ve çapraz kenarlar boyunca kısmen kaplanan pikseller dahil, boş kalır. PNG'nin koyu bir slaytta, renkli bir düğmede ya da bir fotoğrafın üzerinde görünür bir çerçeve olmadan durmasını sağlayan bu yumuşak kenar pikselleridir.
Sonuçlar, indirmeden önce şeffaflığı doğrulayabilmeniz için dama deseni üzerinde gösterilir.
Ne Zaman Bir Renge Düzleştirmeli
Bazı hedefler alfa kanalını işleyemez: eski e-posta istemcileri, bazı baskı iş akışları, arka planda JPG'ye çeviren birkaç pazar yeri yükleyicisi. Bunlar için arka plan ayarından Beyaz, Siyah ya da özel bir renk seçin. Şekil o rengin üzerine bindirilir ve PNG tamamen opak olur.
Görselin duracağı yere uyan rengi seçin. Beyaza düzleştirip PNG'yi koyu bir zemine koyarsanız kenar pikselleri – artık soluk turuncu, soluk mavi, şeklin rengi neyse – hafif bir hale gibi görünür. Bu hale, dönüştürülmüş logolarla ilgili en yaygın şikâyettir ve bir işleme hatası değil, bir arka plan tercihidir.
Ne Ters Gidebilir (ve Nasıl Düzeltilir)
Tarayıcıda işlemek PNG'nin ekranla eşleşmesi demektir; ama bir görselin neyi yükleyebileceğine dair tarayıcı kurallarını da miras alır.
Eksik Yazı Tipleri
SVG içindeki metin, dosyanın adını verdiği yazı tipiyle işlenir. Bu yazı tipi makinenizde yüklü değilse ve dosyaya gömülmemişse tarayıcı yerine başka birini koyar ve PNG'de o görünür. URL ile başvurulan web yazı tipleri de yüklenmez: görsel olarak işlenen bir SVG'nin dış kaynak çekmesine izin verilmez.
Güvenilir çözüm, SVG'yi dışa aktarmadan önce tasarım aracınızda metni eğrilere (outline) dönüştürmektir. Harfler yola dönüşür ve her yerde aynı işlenir.
Eksik Bağlantılı Görseller
Aynı kural <image href="https://…"> için de geçerlidir. URL'den çekilen bir raster görsel boş çıkar. Bunun yerine gömün; çoğu düzenleyicide bağlantıyı SVG içinde bir data URI'ye çeviren "görselleri göm" dışa aktarma seçeneği vardır. Gömülü görseller sorunsuz işlenir.
Boş ya da Minik Çıktı
Ne viewBox'ı ne de width ve height'ı olan bir SVG burada yedek boyutta işlenir; çizim başlangıç noktasından uzaktaysa görünür alanın dışına düşebilir. Çalışmayı kapsayan bir viewBox ekleyin. Minik bir çıktı neredeyse her zaman SVG'nin küçük bir width ve height tanımladığı anlamına gelir; Genişlik moduna geçip gerçekten istediğiniz boyutu yazın.
Belirti, Neden, Çözüm
| Belirti | Olası neden | Çözüm |
|---|---|---|
| PNG'de yanlış yazı tipi | Yazı tipi yüklü değil / web yazı tipi engellendi | Dışa aktarmadan önce metni eğrilere dönüştürün |
| SVG içindeki fotoğraf boş | Gömülü değil, URL ile bağlantılı | Görseller gömülü olarak yeniden dışa aktarın |
| PNG minik | SVG küçük bir width/height tanımlıyor | Genişlik modunu kullanıp hedefi yazın |
| Çalışma kesik | viewBox çizimi kapsamıyor | viewBox'ı düzenleyicide düzeltin |
| Koyu zeminde hale | Beyaza düzleştirilmiş | Şeffaf bırakın ya da gerçek arka plan rengine düzleştirin |
| Filtre ya da bulanıklık farklı görünüyor | Sunucu dönüştürücüsü farklı bir motor kullanmış | Burada dönüştürün; tarayıcı işler |
İnsanlar PNG Olarak SVG ile Ne Yapıyor
SVG kusursuz ölçekleniyorsa neden SVG'den PNG'ye dönüştürmeli ki? Çünkü hâlâ pek çok yazılım vektör kabul etmiyor.
Simge Setleri ve Favicon'lar
Uygulama mağazaları, favicon formatları ve birçok simge sistemi sabit boyutlu PNG ister. SVG'den PNG'ye ihtiyacınız olan en büyük boyutta bir kez dönüştürün, gerisini simge oluşturucu ya da PNG ICO Dönüştürücü ile kesin.
SVG'yi Reddeden Platformlar
Sosyal ağlar, pazar yerleri, topluluk forumları ve çoğu CMS medya kütüphanesi SVG yüklemeyi reddeder; kısmen güvenlik nedeniyle, çünkü SVG script taşıyabilir. Şeffaf arka planlı 2× bir PNG evrensel alternatiftir.
E-posta İmzaları ve Bültenler
E-posta istemcileri SVG'yi ayıklar ya da kırık görsel gösterir. E-postadaki logolar PNG'dir; ideal olarak 2× ile dışa aktarılır ve Retina ekranlarda net kalsın diye yarı boyutta gösterilir.
Baskı ve Büyük Format
Matbaalar PDF ve yüksek çözünürlüklü raster kabul eder. Genişlik moduyla bir logoyu 3.000 ya da 4.000 piksel işleyin; poster boyutunda temiz basılır. Hedef boyutta rasterleştirilen vektörlerde büyütme bulanıklığı olmaz.
Tarayıcı Tabanlı ve Sunucu Tabanlı SVG Dönüştürücüler
İnternetteki neredeyse her SVG'den PNG'ye dönüştürücü dosyayı yükler ve sunucuda librsvg, Inkscape ya da başsız (headless) bir tarayıcıyla işler. Basit şekillerde işe yarar, karmaşık her şeyde sapar.
Doğruluk
Her işleme kütüphanesi SVG spesifikasyonunun biraz farklı bir dilimini destekler. Filtreler, maskeler, karışım modları, dosya içindeki CSS ve yol üzerindeki metin her zamanki kurbanlardır. Tarayıcı motorları var olan en eksiksiz SVG işleyicileridir ve makinenizdekiyle işlemek, PNG'nin önizlemeden farklı olamayacağı anlamına gelir.
Gizlilik ve Sınırlar
Yayımlanmamış bir logo, bir ürün diyagramı, iç rakamlar içeren bir grafik: bunları bir dönüştürücüye yüklemek kimsenin niyet etmediği küçük bir sızıntıdır. Sunucu araçları ayrıca dosya boyutunu ve günlük kullanımı sınırlar; çünkü işleme onlara paraya mal olur. Kendi cihazınızda işlemek ikisini de ortadan kaldırır: sızacak bir şey de yok, sayılacak bir şey de.
Sunucunun daha iyi yaptığı şey: çok eski bir donanım, karmaşık SVG'lerden oluşan bir grubu bir veri merkezinden daha yavaş işler. On logo için hiçbir fark yaratmaz.
PNG'lerle Sonra Ne Yapmalı
SVG'den PNG'ye dönüştürmenin çıktısı standart PNG'dir; buradaki her araç onu yeniden yüklemeye gerek kalmadan kabul eder.
Web için PNG Sıkıştırıcı'dan geçirin ya da WebP'ye dönüştürün; ikisi de şeffaflığı korur ve boyutu düşürür. E-posta ya da fotoğraf için PNG JPG Dönüştürücü düzleştirir ve küçültür. Sonradan tam boyut için Resim Boyutlandırma. Raster ile başlayıp keşke vektör olsaydı diyorsanız PNG SVG Dönüştürücü ters yönde gider.