SVG Dosyası Nedir ve Ne Zaman PNG'ye Çevrilir?

Bir SVG dosyası pikselleri değil talimatları saklar: şu noktadan şu noktaya bir eğri çiz, bu alanı şu renge boya, bu metni şu yazı tipiyle yerleştir. Tarayıcı bu talimatları ekranda gerçek zamanlı çizdiği için görüntü her ölçüde keskin kalır ve dosya çoğu zaman birkaç kilobayttan ibarettir. Buna karşılık aynı dosya, fotoğraf için tamamen yanlış bir araçtır ve bazı ortamlarda hiç açılmaz. Bu yazı iki tarafı da dürüstçe ele alıyor.

Rasterleştirme gerektiğinde SVG to PNG dönüştürücü saydamlığı koruyan çıktıyı, SVG to WebP dönüştürücü daha küçük dosyayı, SVG to JPG dönüştürücü ise en geniş uyumluluğu verir. En küçük sonucu arıyorsanız SVG to AVIF dönüştürücü denenebilir; çıktının ölçüsünü sonradan ayarlamak için görsel boyutlandırıcı işinizi görür.

SVG dosyası nedir, raster biçimlerden farkı nerede başlar

Raster bir görsel, satır satır dizilmiş renkli noktalardan oluşur. 400 piksel genişliğindeki bir PNG'yi 1200 piksele büyüttüğünüzde tarayıcının elinde ek bilgi yoktur; var olan noktaları tahminle çoğaltır ve sonuç bulanıklaşır. Vektör bir çizimde ise büyütme işlemi yalnızca aynı matematiksel tanımın daha büyük bir tuvale uygulanmasıdır, dolayısıyla kayıp yoktur.

İkinci fark düzenlenebilirliktir. Bir SVG metin düzenleyicisinde açılabilir; içindeki renkleri, çizgi kalınlıklarını ve hatta bütün bir katmanı elle değiştirebilirsiniz. Bu, marka renkleri değiştiğinde yüzlerce ikonu yeniden çizmek yerine tek bir arama-değiştir işlemiyle güncellemek anlamına gelir.

Dosya boyutu neye göre değişir

Vektör dosyasının ağırlığı ekrandaki büyüklüğüne değil, içindeki düğüm sayısına bağlıdır. Sade bir ikon 800 baytta biter; otomatik izleme yazılımının ürettiği, on binlerce düğüm içeren bir çizim ise megabaytlara ulaşabilir ve tarayıcıyı zorlar. Bu yüzden karmaşık illüstrasyonlarda vektör her zaman kazanmaz.

Bunu ölçmenin pratik bir yolu var: aynı çizimi hem vektör hem de kullanacağınız gerçek ölçüde raster olarak kaydedin ve iki dosyanın boyutunu karşılaştırın. Raster çıktı belirgin biçimde küçükse çizim vektörde tutulmayacak kadar karmaşık demektir. Bu karşılaştırma bir dakika sürer ve tartışmayı sezgiye bırakmaz.

Vektörün gerçekten kazandığı yerler

• Logolar ve marka işaretleri. Aynı dosya kartvizitte de, tabelada da, favicon'da da kullanılabilir.
• Arayüz ikonları. Yüksek yoğunluklu ekranlarda ayrı bir dosya seti üretme zorunluluğu ortadan kalkar.
• Grafik ve şemalar. Metin, gerçek metin olarak kalır; ekran okuyucular ve arama motorları içeriği okuyabilir.
• Renk varyasyonu gereken görseller. Koyu tema için ayrı bir dosya üretmek yerine tek bir tanımın renk değeri değiştirilir.

Buna karşılık fotoğraflar, doğal dokular ve binlerce renk geçişi içeren illüstrasyonlar vektöre uygun değildir. Raster bir görselden otomatik vektör üretmek de bilinçli olarak sunulmayan bir işlemdir: sonuç ya orijinalden çok uzaklaşır ya da orijinalden daha ağır bir dosya olur.

Animasyon ve etkileşim

Vektör çizimlerinin az bilinen bir avantajı, parçalarının tek tek adreslenebilmesidir. Bir grafikte tek bir sütunun rengini vurgulamak, bir haritada tek bir bölgeyi işaretlemek ya da bir ikonun yalnızca ok kısmını döndürmek, ek dosya üretmeden yapılabilir. Aynı işi raster bir görselle yapmak için ya her durum için ayrı bir dosya hazırlamanız ya da görselin üzerine ayrı katmanlar bindirmeniz gerekir.

Bu esneklik bedava değildir: çok sayıda hareketli parça içeren bir çizim, özellikle düşük güçlü telefonlarda çizim maliyeti yaratır. Ölçüt basittir; sayfa kaydırılırken takılma hissediyorsanız hareketi azaltın ya da o parçayı önceden rasterleştirilmiş bir görsele çevirin.

Bir SVG dosyası ne zaman PNG'ye çevrilmeli

Vektörün üstünlüğü tartışmasız görünse de, günlük işte rasterleştirmeyi gerektiren birkaç net durum var.

• Hedef ortam vektör kabul etmiyor. Sosyal ağların paylaşım görselleri, e-posta şablonları ve birçok pazaryeri paneli yalnızca raster dosya alır.
• Görsel bir belgeye gömülecek. Ofis programları ve baskı akışları çoğu zaman sabit çözünürlüklü bir dosyayla daha öngörülebilir davranır.
• Yazı tipi bağımlılığı var. Metni eğriye çevirmemiş bir çizim, o yazı tipinin bulunmadığı bir bilgisayarda farklı görünür. Rasterleştirmek bu riski ortadan kaldırır.
• Çizim aşırı karmaşık. On binlerce düğüm barındıran bir dosyayı her ziyaretçiye çizdirmek yerine tek seferde raster çıktı almak daha hızlıdır.

Bu dört durumun hiçbiri yoksa vektörde kalın. Rasterleştirme geri dönüşü olmayan bir adımdır; kaynak dosyayı her hâlükârda saklayın.

Karşılaştırma tablosu: vektör ve raster çıktı

Ölçüt	Vektör (SVG)	PNG çıktı	WebP çıktı	JPG çıktı
Ölçek değişince	Kayıpsız	Bulanıklaşır	Bulanıklaşır	Bulanıklaşır
Saydamlık	Var	Var	Var	Yok
Metin seçilebilir	Evet	Hayır	Hayır	Hayır
Tipik ikon boyutu	1 – 4 KB	8 – 25 KB	5 – 15 KB	12 – 30 KB
Uyumluluk	Web'de yüksek, panellerde düşük	Her yerde	Yüksek	Her yerde
Düzenlenebilirlik	Metin düzenleyicide	Görsel düzenleyicide	Görsel düzenleyicide	Görsel düzenleyicide

Rasterleştirme ayarları: çözünürlük, yoğunluk ve zemin

Bir vektörü rastere çevirirken üç karar sonucu belirler.

Çıktı ölçüsü

Vektörün doğal bir pikseli olmadığı için hedef ölçüyü siz söylemelisiniz. Dönüştürme sırasında çizim 144 nokta yoğunluğunda işlenir ve tek kenar için 4000 piksellik bir üst sınır uygulanır. Pratikte kapak görselleri için 1200 piksel, ikonlar için 256 piksel fazlasıyla yeterlidir; gerekenden büyük üretmek yalnızca dosyayı şişirir.

Zemin rengi

Saydam bir çizimi alfa kanalı olmayan bir hedefe gönderirseniz boş alan düz bir renge dönüşür. Sonucun beklediğiniz gibi çıkması için ya saydamlığı taşıyan bir hedef seçin ya da zemini çizimin içinde bilinçli olarak tanımlayın.

Yazı tipleri ve dış kaynaklar

Çizim içindeki metin bir yazı tipine referans veriyorsa ve o yazı tipi işlemi yapan ortamda yoksa, harfler yedek bir tiple çizilir. Bunu önlemenin en güvenli yolu, dışa aktarmadan önce metni eğriye çevirmektir. Aynı şekilde dışarıdan görsel çağıran bir çizim, o kaynağa ulaşılamadığında eksik render edilir.

Ortam notu: vektör girdisinin işlenebilmesi için sunucuda uygun bir çizim bileşeni bulunmalıdır. Bu bileşen yoksa sayfa açılır ama işlem bir hata mesajıyla döner; böyle bir durumda çizimi yerel bir programda rasterleştirip PNG'den WebP'ye dönüştürücü ile devam etmek en hızlı çözümdür.

Yayında vektör kullanırken pratik notlar

Çizimi sayfaya koymanın iki yolu var ve ikisi farklı davranır. Dosyayı normal bir görsel etiketiyle çağırmak en basit yoldur: tarayıcı önbelleğe alır, sayfa kodu temiz kalır, ancak çizimin içine sonradan müdahale edemezsiniz. Çizimi doğrudan sayfa koduna gömmek ise renkleri sayfanın stil kurallarıyla yönetmenize izin verir; koyu temada ikonun rengini tek bir kuralla değiştirmek böyle mümkün olur. Bedeli, aynı ikonu on yerde kullandığınızda kodun on kez tekrarlanması ve önbellek avantajının kaybolmasıdır.

Erişilebilirlik tarafında iki küçük alışkanlık yeterlidir. Anlam taşıyan bir çizime kısa bir başlık tanımı ekleyin ki ekran okuyucu ne olduğunu söyleyebilsin; yalnızca süs amaçlı bir çizimi ise açıkça gizleyin, aksi hâlde okuyucu boş bir grafiği duyurmaya çalışır. Bu iki adım toplam beş saniye alır ve sayfanın kullanılabilirliğini gözle görülür biçimde iyileştirir.

Son bir uyarı: tasarım programlarının dışa aktardığı çizimler genellikle gereksiz meta veriyle, gizli katmanlarla ve aşırı ondalık hassasiyetle gelir. Yayına almadan önce bu fazlalığı temizlemek dosyayı çoğu zaman yarıya indirir. Temizlenmemiş bir dosya, bir ikon için 40 kilobayta çıkabilir; aynı ikonun temiz hâli 2 kilobayttır.

Sık sorulan sorular

PNG'yi tekrar vektöre çevirebilir miyim?

Otomatik bir dönüşüm olarak hayır. Raster bir görselden vektör üretmek, var olmayan bilgiyi tahmin etmek demektir; sonuç ya çizimin sadeleştirilmiş bir taklidi olur ya da orijinalden ağır, binlerce düğümlü bir dosya. Doğru yol, kaynak çizime geri dönmek veya işareti yeniden çizmektir.

Vektör dosyası güvenli mi?

Dosya biçimi kendi içinde betik ve dış referans taşıyabildiği için, bilinmeyen kaynaklardan gelen çizimleri doğrudan sitenize gömmemek gerekir. Rasterleştirmek bu riski tamamen ortadan kaldırır: çıktıda yalnızca piksel kalır.

Favicon için hangi biçim kullanılmalı?

Modern tarayıcılar vektör favicon'u destekliyor, ancak eski istemciler ve işletim sistemi kısayolları hâlâ raster bekliyor. Pratik çözüm ikisini birlikte sunmak: vektör dosyayı ana kaynak yapıp 32, 96 ve 180 piksellik raster kopyaları da üretmek.

Çizimimi küçültmek için ne yapabilirim?

Gereksiz düğümleri temizlemek, kullanılmayan katmanları silmek ve ondalık hassasiyeti düşürmek çoğu dosyada yarıdan fazla kazanç sağlar. Bu adımlardan sonra hâlâ büyükse çizim muhtemelen vektör olarak tutulmaya uygun değildir.

Hangi hedef biçimde duracağınıza karar veremediyseniz görsel formatı nasıl seçilir yazısı karşılaştırmayı tek tabloda topluyor; çıktıları yayına hazırlarken SEO için görsel optimizasyonu rehberindeki dosya adı ve alt metin kurallarına da göz atın.