SVG'den PNG'ye Dönüştürücü Online

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

1. Bir SVG dosyası bırakın veya seçin
2. Araç SVG’yi bir <img> öğesine yükler
3. Hedef boyutlarınızda bir Canvas öğesi oluşturulur
4. SVG, drawImage() ile Canvas’a çizilir
5. 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:

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.