0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Ortamlar
Çıkış çözünürlüğünü seçerek SVG dosyanı PNG veya JPG’ye dönüştür: vektör istenen boyutta yeniden çizildiği için sonuç her ölçekte net kalır. Dosya yükleyebilir ya da SVG kodunu yapıştırabilirsin. Tüm işlem tarayıcında yapılır, hiçbir dosya yüklenmez.
Kaynak

Bir SVG dosyasını sürükle ya da seçmek için tıkla

SVG

Nasıl çalışır

SVG bir vektör biçimidir: şekilleri koordinatlarla tanımlar, bu yüzden herhangi bir boyutta netliğini yitirmeden çizilebilir. PNG ve JPG ise piksel sayısı sabit olan bit eşlemlerdir. Rasterleştirme tam olarak şu adımdır: bir çözünürlük belirleyip vektörü o piksel ızgarasına çizmek.

Bu yüzden çözünürlük dönüştürmeden sonra değil, önce seçilir. Araç, SVG’nin genişlik ve yüksekliğini istenen boyuta göre yeniden yazar ve ancak ondan sonra çizer; böylece tarayıcı küçük bir görseli büyütmek yerine eğrileri o ölçekte yeniden çizer. Bir çarpan (2×, 4×…) ya da piksel cinsinden tam genişlik ve yükseklik verebilirsin.

PNG saydamlığı korur, JPG korumaz; bu yüzden saydam alanlar seçtiğin arka plan rengiyle doldurulur. Tüm çizim tarayıcında Canvas ile yapılır: ne dosya ne de SVG kodu herhangi bir sunucuya gönderilir.

Örnekler

<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 px24 px’lik bir simge 4× çarpanla dönüştürüldüğünde 96 × 96 px olur; yüksek yoğunluklu ekranlar için alışılmış boyut budur.
<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxwidth ve height öznitelikleri olmayan bir SVG boyutunu viewBox’tan alır; burada sosyal medya önizleme görseli için 1× ölçekte rasterleştirilmiştir.

Kullanım senaryoları

  • SVG kabul etmeyen uygulama mağazalarının veya web manifestolarının istediği PNG simgeleri üretmek.
  • Vektörel bir logoyu saydam arka planlı PNG’ye dönüştürüp bir sunuma ya da belgeye yerleştirmek.
  • SVG bir şemayı ya da grafiği JPG olarak dışa aktarıp e-postaya eklemek veya vektör kabul etmeyen bir platforma yüklemek.
  • Aynı simgenin yüksek yoğunluklu ekranlar için @2x ve @3x sürümlerini almak.
  • Bir SVG şablonundan web sitesinin önizleme görselini (Open Graph) üretmek.

Sık sorulan sorular

Hangi çözünürlüğü seçmeliyim?

Son kullanımın gerektirdiği çözünürlüğü. Sıradan ekranlar için görselin gösterileceği boyut yeterlidir; yüksek yoğunluklu ekranlarda bu değerin 2 ya da 3 katı uygundur. Baskı içinse inç cinsinden ölçüyü 300 ile çarparak 300 dpi elde edersin.

SVG dosyam neden beklemediğim bir boyutta çıkıyor?

Başlangıç boyutu width ve height özniteliklerinden alınır; bunlar yoksa ya da yüzde olarak verilmişse viewBox oranı kullanılır. İkisi de yoksa tarayıcı 300 × 150 px varsayar. Bu değeri yok sayıp özel kipte tam genişlik ve yüksekliği yazabilirsin.

Saydamlık korunuyor mu?

PNG’de evet, saydam arka plan seçeneğini işaretli bıraktığın sürece. JPG’nin alfa kanalı yoktur, bu yüzden her zaman düz bir rengin üzerine çizilir: varsayılan beyazdır, ama değiştirebilirsin.

Dış görsel ya da yazı tipi kullanan bir SVG neden başarısız oluyor?

Bir görselin içinde çizilirken SVG başka alan adlarından kaynak indiremez ve tarayıcı güvenlik gerekçesiyle dışa aktarmayı engeller. Çözüm, bu kaynakları SVG’nin kendi içine gömmektir: görselleri data URI olarak, metinleri de yola dönüştürerek.

PNG’den SVG’ye geri dönülebilir mi?

Doğrudan hayır: rasterleştirme vektör bilgisini yok eder, geriye yalnızca pikseller kalır. Eğrileri geri getirmek için vektörleştirme gerekir; bu da özgün dosyayı değil, yaklaşık biçimleri yeniden üretir. Kaynak SVG’yi her zaman saklamakta yarar var.

Ayrıca bakınız