İzlenmiş SVG'niz Neden PNG'den Büyük Çıkıyor?

Bir PNG'yi SVG'ye izletirsiniz ve küçük, temiz, sınırsız ölçeklenebilir bir dosya beklersiniz. Elinize kat kat büyük ve biraz yanlış görünen bir şey geçer. Ters giden bir şey yok - izleme zaten bunu yapar; nedenini anlamak iki dakika sürer ve epey hayal kırıklığından kurtarır.

İzleme, piksele dönüştürmenin tersi değildir#

Önce net olalım: bir PNG'yi SVG'ye çevirmek, onun geldiği vektör dosyasını geri getirmez. O dosya, eğer bir zamanlar vardıysa, gitmiştir. Piksele dönüştürme biçimleri atıp bir renk ızgarası saklar ve hiçbir şey onları yeniden kurmaz.

İzleyicinin yaptığı bunun yerine piksellerden başlayıp yeni biçimler uydurmaktır. Pikselleri benzer renkli bölgelere ayırır, her bölgenin çevresine bir dış çizgi çizer ve içini doldurur. Sonuç resme yaklaşır. Eskisine benzeyen yeni bir çizimdir.

Bu ayrım, sonrasındaki her şeyi açıklar.

Dosya neden büyüyor#

PNG ile SVG tümüyle farklı şeylerin bedelini öder.

PNG piksellerin bedelini öder, hem de ucuza. Örüntü bularak sıkıştırır: aynı piksellerden oluşan bir dizi neredeyse hiçbir şeye mal olmaz, yumuşak bir gradyan biraz daha fazlasına.

SVG sınırların bedelini öder, hem de pahalıya. Her bölgenin dış çizgisinin koordinat olarak yazılması gerekir. Tek bir düz biçim bir avuç sayıdır. Bin küçük bölge, bin dış çizgidir.

Yani bir SVG'nin maliyeti piksel sayısıyla değil, görseldeki ayrı bölge sayısıyla büyür. Bir logoda yaklaşık altı tane vardır. Bir fotoğrafta on binlerce.

Aynı ilişki, üç gerçek dosyada ölçüldü:

Logo küçülüyor: dört yol onu eksiksiz anlatıyor ve artık her boyuta ölçekleniyor. Çizim kabaca üçe katlanıyor. Fotoğraf ise özgününün on katından fazlasına şişiyor ve üstelik daha kötü görünüyor.

Fotoğraflar neden umutsuz vaka#

Bir fotoğrafta düz bölge yoktur. Her yeri yumuşak bir geçiştir: ten tonları, gökyüzü, gölge, bulanıklık. İzleyici bunların hepsini düz biçimlerle yaklaşık olarak vermek zorundadır; yani ya birkaç büyük biçim (o zaman poster gibi görünür) ya da binlerce küçük biçim (o zaman dosya patlar). Bu seçimden kaçıran bir ayar yoktur.

Buna karşılık JPEG tam da bu işte olağanüstü iyidir. Kimsenin fark etmediği ayrıntıyı atarak yumuşak renk değişimini ucuza saklar. Bir SVG'den bununla yarışmasını istemek, yanlış biçimden en kötü olduğu işi istemektir.

Aradaki fark önceden kolayca görülebilir, çünkü fotoğraflar ile çizimler içerdikleri ayrı renk sayısı bakımından çok büyük ölçüde ayrışır. Üç sınama dosyamızda ölçüldü: siyah logoda 244 ayrı renk, düz çizimde 150 ve fotoğrafta 59.629. Üç büyüklük mertebesi. PNG'den SVG'ye ve JPG'den SVG'ye araçlarımız bunları sayar ve siz beklemeden önce sizi uyarır.

Asıl önemli denetim renk sayısıdır#

Tek bir ayar değiştirecekseniz bunu değiştirin. Aynı düz çizim üzerinde:

İki renk, on altıdan otuz kat küçük bir dosya üretti. Ve tek yönlü olmayan satıra dikkat edin: altı renk, sekizden daha büyük bir dosya verdi, çünkü biraz daha kötü bir palet bir bölgeyi birkaç parçaya böldü. Nicemleme düzenli ilerlemez; bu da "ne kadar çoksa o kadar iyi" varsaymak yerine birkaç ayarı deneyip bakmak için bir başka neden.

Düşükten başlayın. Yalnızca önizleme gözle görülür biçimde iyileşirken yükseltin - düz çizimlerin çoğunda bu, beklediğinizden çok önce durur.

İzleme gerçekten ne zaman işe yarar#

Kaynak gerçekten düz biçimlerden oluşuyorsa işe yarar:

• Logolar ve kelime markaları, özellikle beyaz üzerine siyah
• Çizgi çalışmaları ve taranmış çizimler
• İmzalar ve mühürler
• Bir kesim makinesini süren her şey: vinil kesiciler, lazer oymacılar ve nakış yazılımları piksel değil yol ister, dolayısıyla burada izleme bir iyileştirme değil, tek giriş yoludur
• Elde düzenlemek için kaba bir başlangıç noktası, Illustrator ya da Inkscape'te

Fotoğraflarda, gradyanlarda, gölgelerde, yumuşak odakta ya da metin ekran görüntülerinde ise işe yaramaz. Bunların hepsi yumuşak geçişlere dayanır ve düz bölgeler bir yumuşak geçişi ya bantlaşma ya da devasa sayıda biçim üretmeden temsil edemez.

Kötü bir kaynağa yardım eden iki şey#

Taranmış ya da JPEG ile sıkıştırılmış bir şeyi izletiyorsanız, işin çoğunu iki ayar yapar:

En küçük alanı yükseltin. JPEG sıkıştırması, düz beyaz kâğıt gibi görünen yerlerde soluk bloklu bozulmalar bırakır ve izleyici bunların her birini sadakatle çizer. 16 ya da 32 pikselin altındaki bölgeleri atmak, görünür bir kayıp olmadan yol sayısını genellikle belirgin biçimde düşürür.

İzletmeden önce karşıtlığı artırın. Mürekkep gerçekten siyah, kâğıt gerçekten beyazsa ara gri tonlar azalır; dolayısıyla daha az bölge, daha az yol ve daha küçük bir dosya. Herhangi bir görsel düzenleyicide harcanan beş saniye, sonradan izleyici ayarlarıyla yapılan her türlü uğraşı yener.

Kısa özet#

• İzleme, piksellerden yeni biçimler uydurur. Özgün bir vektör dosyasını geri getirmez.
• SVG boyutu pikselle değil renk bölgesi sayısıyla büyür; logoların küçülüp fotoğrafların patlamasının nedeni budur.
• SVG'ye izlenmiş bir fotoğraf tipik olarak on kat büyük ve daha kötü görünür. Özgününü saklayın.
• Önemli olan ayar renk sayısıdır. 2'den başlayın ve yukarı doğru çalışın.
• Düz çizimlerde sonuç gerçekten mükemmeldir: sınama logomuz 7,7 KB'dan 1,9 KB'a ve dört yola indi, üstelik artık her boyuta ölçekleniyor.