Sharp ile SVG’den PNG’ye: boyut, yoğunluk ve netlik

Güncel bir Sharp işlem hattında her dışa aktarmaya SVG’den başlayın ve resize() işlevini gerçekten ihtiyaç duyduğunuz piksel genişliğiyle çağırın. 2x bir görsele ihtiyacınız varsa çıktıdaki piksel sayısının iki katını isteyin. Önce küçük bir PNG oluşturup ardından bu dosyayı büyütmeyin. Ayrıca eski bir density çözümünü her işlem hattına kopyalamayın: Sharp 0.34.4 testimizde daha yüksek girdi yoğunluğu kullanıldığında da kullanılmadığında da aynı pikseller üretildi.

SVG’den 1x ve 2x PNG oluşturun

Sharp constructor bir SVG dosyası veya buffer kabul eder; resize API ise çıktı boyutlarını belirler. 256 CSS piksel boyutunda gösterilecek, 64 birimlik kare bir simge için 1x kullanımda 256 piksellik, 2x kullanımda ise 512 piksellik bir PNG dışa aktarın:

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

Yüksekliği belirtmezseniz Sharp’ın olağan yeniden boyutlandırma davranışı kaynak en-boy oranını korur. Kullanacağınız yere uygun gerçek çıktı genişliklerini seçin; “2x”, hedeflenen CSS görüntüleme boyutuna göre piksel boyutlarını ifade eder. Bir SVG niteliği değildir ve her ekranda belirli bir sonuç vaat etmez. Simgeyi 256 CSS piksel boyutunda göstermek istiyorsanız 256 ve 512 piksellik PNG’leri bu görüntüleme boyutunda karşılaştırın ve daha büyük dosyanın ek boyutuna değip değmediğine karar verin.

Orijinal test simgemizde width="64" height="64" viewBox="0 0 64 64" tanımlıydı. Depoda sürümü sabitlenmiş Sharp 0.34.4 ile bunu 64, 512 ve 1.024 piksel boyutlarında oluşturduk. 512 ve 1.024 piksellik çıktılar SVG’den üretildi; köşeleri şeffaf, boyalı merkezleri opaktı ve istenen boyutları bildiriyordu. Bunlar bu test örneği ve sürüm için gözlemlerdir; tüm SVG çizimleri için bir performans karşılaştırması değildir.

Orijinal Sharp 0.34.4 oluşturma testi

Görsel, sorunun nasıl oluştuğunu somutlaştırıyor: ilk çıktı 64 piksellik bir PNG olduğunda, sonraki yeniden boyutlandırma bu piksellere interpolasyon uygular. Yeniden çizilecek yollar artık yoktur. Bu testte doğrudan oluşturduğumuz ve yoğunluğunu ayarladığımız 512 piksellik sonuçlar, ham RGBA kanallarının tamamında aynıydı. Kaynak SVG, oluşturma betiği ve sonuç meta verileri makalenin araştırma paketinde saklanmaktadır.

Sharp’ta density kullanmanız gerekiyor mu?

Sharp’ın density constructor seçeneği, SVG veya PDF girdisi okunurken kullanılan DPI değerini kontrol eder; belgelenmiş varsayılan değeri 72’dir. Bu, resize() içinde nihai bir genişlik istemekten farklıdır. Büyütme sırasında bulanıklığı önlemek için girdi yoğunluğunu artıran eski Sharp örnekleriyle karşılaşabilirsiniz. Bu örnekler geçmişte gerçekten yaşanan bir sorunu anlatır: Sharp issue #1421, 2018’de 32 piksellik bir SVG’nin 512 piksele büyütüldüğünde pikselleştiğini bildirir. Bunlar, aynı geçici çözümün güncel bir kurulumda hâlâ gerekli olduğunun kanıtı değildir.

Sharp 0.34.4 üzerinde tam olarak şu iki yöntemi test ettik:

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

64 piksellik vektör simgemizde her iki işlem hattı da aynı 512 × 512 RGBA piksellerini üretti. Girdi yoğunluğunu yalnızca belirli bir dosya ve kurulu Sharp sürümü buna ihtiyaç olduğunu gösterdiğinde ayarlayın; ardından yükseltmelerden sonra karşılaştırmayı tekrarlayın. Daha yüksek bir DPI değerini her durumda netlik sağlayan bir ayar olarak görmeyin. İlk sorulması gereken yararlı soru, Sharp nihai PNG’yi oluştururken elinizde hâlâ vektör geometrisi olup olmadığıdır.

PDF’lerle de çalışıyorsanız bu girdiyi ayrıca test edin: bu SVG deneyi PDF davranışını ortaya koymaz. Benzer şekilde, daha yeni Sharp belgelerindeki withDensity(), çıktının DPI meta verilerini anlatır; bu, constructor’ın SVG girdisini oluştururken kullandığı yoğunluktan farklı bir işlemdir.

Boyutları, şeffaflığı ve kaynak içeriğini kontrol edin

Önizlemenin yakınlaştırma davranışına bakarak tahmin yürütmek yerine çıktı üzerinde Sharp’ın metadata API’sini kullanın:

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

Buradaki kare test örneği için beklenen boyutlar 256 × 256 ve 512 × 512’dir. hasAlpha, alfa kanalı bulunduğunu gösterir, ancak belirli bir köşenin şeffaf olduğunu kanıtlamaz; dosyayı teslim ederken şeffaflık önemliyse dosyayı inceleyin veya piksel örnekleri alın. Test edilen tüm çıktılarda örneğimizin köşe alfa değeri sıfır, merkez alfa değeri ise 255’ti. SVG’nin içindeki beyaz bir dikdörtgen, PNG biçiminden bağımsız olarak her PNG’ye boyanırdı.

Doğrudan oluşturulan yeni ve büyük bir çıktı hâlâ pikselliyse SVG’nin içeriğini inceleyin. SVG standardı, raster bir görseli gömen veya ona bağlantı veren bir <image> öğesine izin verir. Bu nedenle bir dosyanın uzantısı .svg olabilirken içindeki çizim hâlâ düşük çözünürlüklü bir PNG olabilir. SVG’lerin içindeki raster görselleri bulma rehberimiz, nesneleri ve XML’i nasıl kontrol edeceğinizi gösterir. Sharp’ın çıktı genişliğini artırmak, bu gömülü pikselleri yollara dönüştüremez.

Görselin kullanılacağı yeri de kontrol edin. 1.024 piksel boyutunda gösterilen 512 piksellik bir dosya bulanık görünebilir. %100’ün çok ötesine yakınlaştırılmış bir görüntüleyici, dışa aktarma doğru olsa bile PNG ızgarasını ortaya çıkarır. Gerçek görüntüleme boyutunda ve arka planda karşılaştırın; ardından daha büyük bir PNG mi yoksa SVG’nin kendisini mi sunacağınıza karar verin. Web’de kullanım için satır içi SVG ile bir görüntü öğesindeki SVG farklı entegrasyon seçenekleri sunar; hedef ortam SVG’yi desteklediğinde ikisi de PNG gerektirmez.

PerfectVector bu süreçte nerede yer alır?

Sharp bir SVG’yi rasterleştirir; bir PNG’den düzenlenebilir yollar çıkarmaz. Ana çiziminiz yalnızca raster bir simge veya logoysa bu dışa aktarma işlem hattından önce bir SVG oluşturup inceleyin. PNG simgelerini SVG UI kitine dönüştürme rehberi, bir küme genelinde tutarlı geometriyi ve teslim kontrollerini ele alır. PerfectVector’ın görselden vektöre dönüştürme iş akışı, yalnızca raster biçimde bulunan çizimlerden bir SVG adayı oluşturabilir. Bu sonucu açın; silüetini, küçük ayrıntılarını ve gerçek yollar içerip içermediğini kontrol edin. Ardından onayladığınız SVG’den 1x ve 2x PNG’lerinizi oluşturun. Zaten temiz bir orijinal SVG’niz varsa onu saklayın ve doğrudan Sharp kullanın.

Sık sorulan sorular

Sharp ile SVG’den PNG’ye dönüştürdüğüm çıktı neden bulanık görünüyor? İşlem hattının önce küçük bir PNG oluşturup sonra onu büyütüp büyütmediğini kontrol edin. Ardından SVG’de gömülü raster içerik olup olmadığını inceleyin ve teslim edilen PNG’yi gerçek görüntüleme boyutunda karşılaştırın. Güncel bir Sharp sürümünde, girdi yoğunluğuna yönelik geçici bir çözüm eklemeden önce doğrudan SVG’den nihai boyutta PNG oluşturmayı test edin.

Sekiz kat büyütme için density: 576 gerekli mi? Sharp 0.34.4 üzerindeki 64 pikselden 512 piksele SVG test örneğimiz için gerekli değildi: doğrudan yeniden boyutlandırma ile yoğunluğu ayarlanmış yeniden boyutlandırma aynı RGBA piksellerini üretti. SVG’niz ve kurulu çizim motorunuz farklı davranabilir; bu nedenle bu sayıyı bir kural olarak benimsemek yerine tam olarak kullanacağınız girdileri test edin.

Şeffaf bir 2x PNG nasıl oluştururum? SVG’den, hedeflenen CSS boyutlarının iki katında bir görsel oluşturun ve PNG olarak dışa aktarın. Ortaya çıkan genişliği ve yüksekliği doğrulayın, ardından boyanmamış bir alanda şeffaflığı inceleyin. Şeffaf bir tuval, SVG’de zaten bulunan bir arka plan şeklini kaldırmaz.

Kaynaklar

1. Sharp — Constructor — SVG girdi desteği ve girdi için density seçeneği.
2. Sharp — Resizing images — Örneklerde kullanılan çıktı boyutlandırma davranışı.
3. Sharp — Input metadata — Boyut ve alfa meta verisi kontrolleri.
4. Sharp GitHub — SVG to PNG pixelation issue #1421 — Sürümü sabitlenmiş güncel sürüm testinden açıkça ayrı tutulan, geçmişte bildirilmiş sorun.
5. Sharp — Output options — Yeni çıktı yoğunluğu meta verilerini, girdinin oluşturma yoğunluğundan ayırır.
6. W3C — SVG 2 embedded content — Bir SVG’nin neden raster pikseller içerebildiği.

Ana dosyanız yalnızca raster biçimindeyse PerfectVector ile bir SVG adayı oluşturun, yollarını inceleyin ve onayladığınız dosyadan gerekli her PNG boyutunu oluşturmak için Sharp kullanın.