Bir SVG'nin pikseli yoktur, bu yüzden bu işlem dönüştürme değil, render alma

Bu sitedeki diğer tüm dönüştürücüler, zaten var olan pikselleri taşır. Bu araç ise farklı bir şey yapar ve bu fark, sayfanın okunmaya değer olmasının sebebidir. Bir SVG aslında hiç görsel içermez. Talimatlar içerir: buraya bir daire çiz, bu yolu şu gradyanla doldur, bu koordinatlara metin yerleştir. Bunu bir PNG'ye dönüştürmek, bu talimatları seçtiğiniz bir boyutta çalıştırmak demektir. Hiçbir şey gerilmez ve hiçbir şey tahmin edilmez, çünkü gerilecek veya tahmin edilecek orijinal bir piksel ızgarası yoktur.

Muhtemelen neden PNG'ye ihtiyacınız var

Format mükemmeldir ama neredeyse hiçbir şey onu kabul etmez. E-posta istemcileri bir SVG'yi göstermez. Ofis programları gömmeye çalıştığınızda sorun çıkarır. Sosyal ağlar ve çoğu yükleme formu onu doğrudan reddeder, tasarım dünyası dışındaki yazılımlar ise teknik olarak bir metin dosyası olduğu için ona öyle davranır. PNG ise herkesin kabul ettiği versiyondur.

Büyük boyut burada size hiçbir şeye mal olmaz

Bir fotoğrafı büyütmek, hiç yakalanmamış pikseller uydurur; bu yüzden 2 kat büyütmede görüntü yumuşar, 10 kat büyütmede ise tamamen bozulur. Bir vektörü render almakta böyle bir sınır yoktur. 24 piksellik bir ikon, 1024 pikselde render alındığında, bu şişirilmiş bir 24 piksellik ikon değildir; aynı çizim 1024 boyutunda yeniden oluşturulur, her eğri ve kenar o boyuta göre hesaplanır. Tam olarak bunu test ettik: 24'e 24 bir ikon, 1024'e 1024 olarak geri döndü ve renkleri kaynak değerleriyle birebir aynıydı, kenarları ise merdiven basamağı gibi değil, yumuşak anti-aliasing ile pürüzsüzdü.

Bundan çıkarılacak pratik tavsiye şudur: PNG'niz o andan itibaren sabit bir ızgara olacağı için, gerçekten kullanacağınız en büyük boyutta render alın, en küçükte değil. Daha büyük yapmak size sadece birkaç milisaniyeye mal olur, başka bir şeye değil.

Boyutu siz seçersiniz, ya da dosya belirler

Bir genişlik yazarsınız ve çizim, oranları korunarak o genişliğe sığdırılır. 2:1 oranında bir logoya 400'e 400 isterseniz, size asla sıkıştırılmış bir kare değil, net bir 400'e 200 döner. 256, 512, 1024 ve 2048 için tek tıkla hazır ayarlar ve SVG'nin kendi belirttiği boyutta render almak için Orijinal seçeneği vardır. 200'e 100 boyutunda bir dosyada, Orijinal tam olarak 200'e 100 döndürdü. Üst sınır, her kenar için 16.384 piksel ve toplamda 64 megapiksel olup, bu da 8000'e 8000 bir renderı kapsar.

Şeffaflık, kısmi olan dahil

PNG gerçek bir alfa kanalı taşır; yani arka planı şeffaf olan bir logo, yine şeffaf arka planla döner ve bir sunumda ya da ürün sayfasında etrafında beyaz kutu olmadan kullanılmaya hazır olur. İyi bir render motorunu dikkatsiz olandan ayıran şey, kısmi şeffaflıktır: yumuşak gölgeler, soluk kenarlar, yarı saydam olarak ayarlanmış herhangi bir şey. %50 opaklıkta tanımlanmış bir şekil, çıktıda tam olarak yarı alfa olan 128 değeriyle ölçüldü. Her render gerçek bir RGBA görsel olarak döndü. Şeffaflığı düzleştirmek isterseniz, arka plan ayarını düz bir renge çevirip renk seçiciden istediğiniz tonu seçebilirsiniz.

Metin ve gradyanlar: genellikle sorun çıkaran iki şey

Sunucu taraflı SVG render alma işlemi, iki öngörülebilir noktada başarısız olur. Yazı tipleri eksik olur, bu yüzden metin kaybolur veya yanlış bir fontta görünür. Ve bir kez tanımlanıp id ile referans verilen gradyanlar çözülemez, bu yüzden şekiller düz veya siyah döner. İkisini de kontrol ettik. Metinler, temiz anti-aliasing kenarlarıyla render alındı ve url() ile referans verilen doğrusal bir gradyan, bir renkten diğerine düzgün bir geçiş olarak oluşturuldu. Eğer bir dosya sunucuda bulunmayan bir font isterse, yerine bir yedek kullanılır ve sonuçta bu belirtilir, böylece siz sonradan fark etmek zorunda kalmazsınız.

Başkasının SVG'sini yüklemek burada güvenlidir

Bir SVG yasal olarak JavaScript içerebilir ve internetteki başka kaynaklara işaret edebilir. Bu nedenle e-posta sağlayıcıları bu formatı engeller ve bir yabancının gönderdiği dosyada dikkatli olmanız için gerçek bir sebeptir. Burada render alma işlemi, başsız bir tarayıcı yerine özel bir vektör motorunda çalışır: scriptler asla çalıştırılmaz ve harici referanslar asla alınmaz. Dosya içindeki hiçbir şey çalışamaz, dışarıya veri gönderemez veya bir şey okuyamaz. Geri dönen şey, çizimin gerçek statik halidir; bu yüzden animasyonlar da hareket etmek yerine ilk kare olarak render alınır.

Hızlı ve tekrarlanabilir

Klasik Ghostscript kaplanı, 94,5 KB yoğun bezier yolu ve SVG render motorları için klasik bir işkence testi olarak, 512 piksellik bir PNG'ye 53 milisaniyede render alındı. Aynı dosyayı iki kez render almak, bayt bazında birebir aynı çıktı üretir; böylece bir sonucu yaklaşık değil, tam olarak yeniden elde edebilirsiniz. Sıkıştırılmış .svgz dosyaları doğrudan okunur ve format dosyanın kendi baytlarından tespit edilir, böylece yeniden adlandırılmış veya uzantısı olmayan bir dosya da render alınır.

Bir seferde bir ikon seti

Birkaç dosya aynı ayarlarla render alınır ve orijinal adlarıyla tek bir ZIP olarak döner. Hepsi icon.svg adlı üç farklı dosya, icon.png, icon_1.png ve icon_2.png olarak döner; böylece ikisi sessizce kaybolmaz. Toplu işlemde bozuk veya SVG olmayan bir dosya atlanır ve sonucu isimlendirilir, diğerlerinin işlemi bozulmaz.

Ne elde edersiniz

• Küçük bir dosyanın büyütülmüş kopyası değil, seçtiğiniz boyutta render alınmış bir PNG
• Oranlar korunur, hiçbir şey gerilmiş veya sıkıştırılmış olarak dönmez
• Yarı saydam şekiller ve yumuşak gölgeler dahil tam alfa, ya da seçtiğiniz herhangi bir arka plan rengi
• Metin ve gradyanlar atlanmadan render alınır, font değişiklikleri rapor edilir
• Script çalıştırılmaz ve harici referans alınmaz, böylece bilinmeyen bir SVG'yi güvenle yükleyebilirsiniz
• Hesap gerekmez, filigran yoktur ve dosyalar bir saat sonra sunucudan silinir

Sırada ne var?

4000 piksellik bir render büyük bir dosyadır, bu yüzden PNG Sıkıştır genellikle sayfaya koymadan önceki ilk adımdır ve PNG'den WebP'ye ise web için bir adım daha ileri taşır. Vektörü de saklayacaksanız, SVG Sıkıştır önce editör fazlalıklarını temizler.