SVG'yi fontları kaybetmeden PNG'ye nasıl dönüştürebilirim?

SVG'den PNG çıktısının neden beyan edilen boyutun 2 katı olduğu ve neden tarayıcı kumanda alanının dış fontları ve bağlantılı görselleri render sırasında sessizce bıraktığı.

August 9, 2026

Bir SVG içinde piksel yoktur. Bu bir XML'dir: yollar, dolgu, bir viewBox ve belki de dosyanın aslında içermediği bir fontu adlandıran bir <text> elementi. PNG'ye rasterleştirmek, bir piksel ızgarası seçmek ve bu şekilleri üzerine boyamak anlamına gelir, bu nedenle sonucu beğenip beğenmeyeceğinizi belirleyen iki şey vardır. İstediğiniz piksel sayısı ve render sırasında yüklenmesine izin verilenler.

Bu render'ı tarayıcınızın içinde çalıştırıyoruz. Dosya bir blob URL'sine gider, bir <img> elementi onu yükler, tarayıcı onu bir OffscreenCanvas'a boyar ve bir WebAssembly kodlayıcı PNG'yi yazar. Bu uygulamanın API yolları ve sunucu işlemleri yoktur, bu nedenle yayımlanmamış bir logo kimsenin geçici alanında silinmeyi beklemez. Çoğu SVG'den PNG'ye dönüştürücü önce yükler ve sonra temizleme sözü verir. Bizimki ise hiçbir baytı nereye göndermiyor, bu da gizlilik modelimizin tamamının amacıdır.

Bir tarayıcı bir SVG'yi rasterleştirirken ne olur?

SVG'niz bir <img> elementine verilir ve bu detay sayfadaki her şeyi etkiler. Bir resim olarak yüklenen bir SVG, scriptlerin çalışmadığı ve dış referansların alınmadığı kısıtlı bir işleme modunda çalışır; bu, SVG 2 uyumluluk kuralları tarafından güvenli işleme modları olarak tanımlanır. Yükleme tamamlandığında, drawImage ile OffscreenCanvas üzerine boyar, pikselleri geri okur, @jsquash/png ile kodlar ve ardından baytlar üzerinde seviye 3'te oxipng çalıştırırız. Bu adım kayıpsızdır. Alfa, tüm yolculuk boyunca hayatta kalır, bu nedenle şeffaf bir logo şeffaf olarak çıkar.

PNG'nin gerçek boyutu ne olacak?

Dönüştürücümüz, SVG'nin içsel boyutunun iki katında render alır. 500x500 bir SVG, 1000x1000 olarak çıkar. İkileme, size ücretsiz bir retina kalitesinde dosya sağlar ve aynı zamanda bir spesifikasyon tam bir piksel sayısı talep ettiğinde insanların takıldığı şeydir. Tarayıcı, hiç kullanılabilir bir içsel boyut bildirmediğinde, 1024x1024 ile ikileme yapmadan önce bunu yerine koyar, böylece PNG 2048x2048 olarak çıkar. CSS Görüntüleri spesifikasyonu bir boyutun neden kaybolabileceğini kapsar: içsel genişlik veya yükseklik olmayan bir değiştirilmiş öğe varsayılan bir nesne boyutuna geri döner ve kendi başına bir viewBox bir boyut eklenmeden bir oran sağlar. Bu nedenle, kök <svg> üzerinde genişlik ve yükseklik ayarlayın, hedefinizin yarısına. 256 girdi, 512 çıktı.

Metnim neden yanlış fontta çıktı?

Bu en yaygın şikayettir ve dönüştürücüde bir hata değildir. Bir @font-face kuralı bir .woff2 URL'sine işaret ediyorsa, bu bir dış referans olarak sayılır, bu nedenle güvenli mod, başlamadan önce bu alımı engeller. Resmin etrafındaki sayfa tarafından yüklenen fontlar da içeri giremez, çünkü bir <img> içindeki SVG, kendi font çözümlemesini yapan ayrı bir belgedir. Aldığınız şey, makinenin font-family listesinden eşleştirebildiği her şeydir; bu, bir inceleme yapanın dizüstü bilgisayarında, seçmediğiniz bir yedek anlamına gelir. Çözüm, metni metin olarak göndermeyi bırakmaktır. Illustrator bunu Type > Create Outlines olarak adlandırır. Inkscape bunu Path > Object to Path olarak adlandırır. Her iki yöntem de her glifi bir yola dönüştürür, dosya biraz büyür ve render makineye bağlı olmaktan çıkar.

SVG'mdeki fotoğraf neden kayboldu?

Aynı kural, farklı bir semptom. SVG'niz bir <image> elementi aracılığıyla bir bitmap'i mutlak bir https URL'si ile çekiyorsa, bu URL alınmaz ve PNG, fotoğrafın olması gereken yerde bir boşlukla geri gelir. Bir data: URI iyi çalışır, çünkü engellenecek bir ağ isteği yoktur. Gömmenin ikinci bir nedeni vardır: bir canvas'a boyanan bir çapraz kaynak bitmap onu kirletir ve pikselleri geri okumak bir SecurityError fırlatır. Bu başarısızlık en azından kendini duyurur. Engellenen bir referans sessizdir, bu da insanlara bir öğleden sonra kaybettirir. Dönüştürmeden önce bir metin düzenleyicisinde dosyayı açın ve http için arama yapın.

Bir PNG'yi tekrar SVG'ye dönüştürebilir miyim?

Hayır, ve başka türlüymüş gibi davranmıyoruz. Dönüştürücümüz SVG'yi çözümler ve bunu kodlayamaz: yapımda JPEG, PNG, WebP, AVIF ve PDF yazan kodlayıcılar var ve 11 format arasında 24 çiftin hiçbiri SVG'yi hedef olarak almaz. Piksellerden yollara geri dönmek, kenarların nerede olduğunu tahmin eden bir makinedir ve izlenmiş bir kelime markası genellikle gönderilecek kadar yakın değildir. Hala varsa, orijinalinden yeniden dışa aktarın. Gerçekten ihtiyacınız olan şey daha büyük bir boyutta raster ise, yükselticimiz Real-ESRGAN'ı çalıştırır ve her zaman PNG yazar: 400x269 bir dosyayı 4 kat 1600x1076'ya çıkardı.

Bir SVG'yi favicon setine nasıl dönüştürebilirim?

ikon oluşturucu SVG'yi doğrudan alır, bu da sıkıştırıcı, yenileyici ve kırpıcı için geçerli değildir: bu üçü yalnızca JPEG, PNG, WebP, AVIF ve GIF kabul eder. SVG'nizi, iki boyutundan daha büyük olan bir kare kanvas üzerine render eder veya 512 piksel, hangisi kazanırsa, bu nedenle 64x64 bir simge bile 512'lik bir kanvas alır. Yedi dosya çıkar: favicon.ico 16, 32 ve 48'i paketler, favicon-16x16.png, favicon-32x32.png, 180px apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png ve site.webmanifest. O .ico'nun neden hala 4.6 KB kazandığı ayrı bir tartışmadır. Bir seferde bir dosya, 10 MB sınırı. dönüştürücü toplu araçtır: her çalışmada 10 dosya ve 50 MB.

PNG'yi sonradan sıkıştırmalı mıyım?

Genellikle evet ve mod, herhangi bir kaydırıcıdan daha önemlidir. 900x606 boyutunda 942.4 KB şeffaf bir PNG'de, kayıpsız yol (oxipng seviye 3) 383.9 KB çıktı. Bu %59'luk bir kesimdir ve her piksel girdiyle bit düzeyinde aynıdır. Palet yolu (imagequant) aynı dosyayı 256 renge indirerek 98.3 KB'ya, %90'lık bir kesime götürdü. Düz vektör sanatı, palet modunun en iyi durumudur, çünkü altı dolguya sahip bir logonun vermesi gereken 256 renkten hiçbiri yoktur. Sıkıştırma ayrıca tüm meta verileri de çıkarır. Her ikisini de sıkıştırıcıda çalıştırın ve hangisi dayanıyorsa onu saklayın.

Bunu sonraki adım olarak yapın: SVG'yi bir metin düzenleyicisinde açın, bağlantılı fontları ve görselleri yakalamak için http için arama yapın, herhangi bir canlı metni dış hatlara alın, ardından kök <svg> üzerinde genişlik ve yüksekliği hedef boyutunuzun yarısına ayarlayın ve /convert/svg-to-png yükleyin. PNG bir web sayfasına gidiyorsa, doğrudan sıkıştırıcıya gönderin ve şeffaflığı olan bir dosya için PNG ile WebP sayıları formatı değiştirip değiştirmeyeceğinizi söyler. Bir belgeye gidiyorsa, JPG'den PDF'ye dönüştürülmüş bir görüntünün sonunda sahip olduğu sayfa boyutunu kapsayan notlarımız var.