SVG’yi PNG’ye Dönüştürme
SVG ve PNG temelde farklı amaçlara hizmet eder. SVG vektör formatıdır: şekilleri her yakınlaştırma düzeyinde mükemmel işleyen matematiksel koordinatlarla tanımlar. PNG raster formatıdır: belirli genişlik ve yüksekliğe sahip sabit bir piksel ızgarası. SVG’yi PNG’ye dönüştürmek, bir çözünürlük seçmek ve vektör sanatını o boyutta piksellere dondurmak anlamına gelir.
Bu araç, Canvas API’sini kullanarak tarayıcınızda rasterleştirme yapar. Dosyalar makinenizden çıkmaz.
Nasıl Çalışır
- Bir SVG dosyası bırakın veya seçin
- Araç SVG’yi bir
<img>öğesine yükler - Hedef boyutlarınızda bir Canvas öğesi oluşturulur
- SVG,
drawImage()ile Canvas’a çizilir - Canvas,
toDataURL('image/png')ile PNG dışa aktarır
Tarayıcının SVG işleme motoru tüm ağır işleri halleder: anti-aliasing, metin düzeni, gradyan enterpolasyonu ve filtre efektleri.
Geliştiriciler Neden SVG’lerin PNG Sürümlerine İhtiyaç Duyar
SVG, web’de simgeler, logolar ve illüstrasyonlar için ideal formattır. Ancak tarayıcı dışındaki birçok bağlam SVG’yi tamamen reddeder:
Sosyal medya ve Open Graph resimleri
Twitter, Facebook, LinkedIn ve Slack önizleme kartları raster resimler gerektirir. og:image meta etiketini bir SVG URL’sine ayarlarsanız, çoğu platform bunu yok sayar veya bozuk resim gösterir.
E-posta istemcileri
Çoğu e-posta istemcisi, güvenlik nedenleriyle SVG etiketlerini kaldırır ve SVG resimlerini engeller. PNG, e-posta başlıkları, imzalar ve satır içi grafikler için güvenli seçimdir.
Yerel uygulama varlıkları
iOS ve Android, belirli boyutlarda raster simgeler gerektirir. Kaynak logonuz SVG ise, her hedef çözünürlükte PNG dışa aktarımlarına ihtiyacınız vardır.
Çözünürlük Seçimi
SVG viewBox koordinat sistemini tanımlar ancak çıktı boyutunu tanımlamaz. Rasterleştirirken piksel boyutlarını seçersiniz:
| Kullanım | Önerilen boyut |
|---|---|
| Sosyal medya resmi | 1200 x 630 |
| Uygulama simgesi (yüksek çöz.) | 512 x 512 |
| Favicon (PNG yedek) | 32 x 32 veya 48 x 48 |
| E-posta başlık grafiği | 600 x 200 |
| Dokümantasyon figürü | 2x görüntüleme boyutu |
Temiz Rasterleştirme İpuçları
Yazı tiplerini gömme
SVG, CSS @font-face veya Google Fonts bağlantıları aracılığıyla özel yazı tipleri kullanıyorsa, bu yazı tiplerinin rasterleştirme sırasında tarayıcıda mevcut olması gerekir. En güvenli yaklaşım, dışa aktarmadan önce vektör düzenleyicinizde metni yollara dönüştürmektir.
Bağlantılı resimleri gömme
Harici resimlere <image href="..."> ile başvuran SVG’ler, harici URL’ye erişilemezse bu resimleri boş olarak işler. Base64 Kodlayıcı kullanarak resimleri SVG’nin içine Base64 veri URI’leri olarak gömün.
Açık viewBox ayarlama
viewBox özniteliği olmayan SVG’ler, boyutlandırma için width ve height değerlerine güvenir. İkisi de yoksa Canvas beklenmeyen bir boyutta işleme yapabilir.
Vektör ve Raster: Ödünleşim
SVG’yi rasterleştirmek tek yönlü bir işlemdir. Evrensel uyumluluk kazanırsınız ancak çözünürlük bağımsızlığını kaybedersiniz. 256x256 PNG, 512x512’de bulanık görünür. Birden çok boyuta ihtiyacınız varsa, tek bir PNG’yi ölçeklemek yerine SVG kaynağından her hedef çözünürlükte rasterleştirin.