Skip to content
user@convertitive:~$convertitive

SVG'den PNG'ye Çevirme

Bir SVG bırakın ya da kodunu yapıştırın, boyut seçin, PNG indirin. Hiçbir şey tarayıcınızdan çıkmaz.

SVG çözünürlükten bağımsızdır — aynı dosya 16 pikselde de 16.000 pikselde de keskin görünür — ama web’in hatırı sayılır bir kısmı hâlâ onunla baş edemez. E-posta istemcileri onu ayıklar, eski CMS’ler yüklemeyi reddeder, favicon hatları sabit boyutlu bitmap ister ve tasarımcı olmayan bir ekibe varlık teslim eden bir tasarımcının çoğu zaman her yerde açılan bir dosyaya ihtiyacı olur. Vektörü rastere işte o zaman düzleştirirsiniz — ve kaynağın sabit bir çözünürlüğü olmadığından çıktı boyutlarını siz seçersiniz. Bu araç, SVG’nizi tarayıcının kendi rasterleştiricisiyle tam belirttiğiniz boyutta bir canvas üzerine işler, ardından — şeffaflık korunarak — bir PNG kodlar; dosya cihazınızdan hiç ayrılmaz.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. SVG'nizi yükleyin

    Bir .svg dosyasını (8 MB'a kadar) bırakma alanına sürükleyin, tıklayıp seçin ya da ham SVG kodunu metin kutusuna yapıştırın. Her iki durumda da araç, doğal boyutu saptamak için width, height ve viewBox özniteliklerini okur.

  2. Çıktı boyutunu ayarlayın

    Piksel cinsinden tam bir genişlik veya yükseklik yazın — en-boy oranı kilitliyken diğer boyut otomatik izler — ya da doğal boyutu çarpmak için 1x, 2x veya 4x düğmelerine basın. Retina ekranlar için genel tercih 2x'tir.

  3. Bir arka plan seçin

    Şeffaf (varsayılan), SVG'nin alfa kanalını PNG'de olduğu gibi korur. Görsel şeffaflıkla baş edemeyen bir yerde duracaksa — yalnızca JPEG kabul eden bir iş akışı veya bazı e-posta istemcileri gibi — Beyaz ya da özel bir renk seçin.

  4. Önizleyin ve indirin

    Sonuç, hangi alanların şeffaf kaldığını tam olarak görebilmeniz için damalı bir arka plan üzerinde canlı işlenir. PNG İndir'e tıklayın — dosya, tarayıcınızın canvas kodlayıcısıyla yerel olarak üretilir ve asla hiçbir yere yüklenmez.

Frequently asked questions

SVG'm bir sunucuya yükleniyor mu?
Hayır. SVG yerel bir blob URL'sine dönüştürülür, tarayıcınızın kendi SVG motoru tarafından ekran dışı bir görsele işlenir, bir canvas'a çizilir ve canvas.toBlob() ile PNG'ye kodlanır — hepsi cihazınızda, JavaScript ile. Hiçbir yükleme isteği yoktur.
SVG'm neden tuhaf bir boyutta işleniyor?
Pek çok SVG — özellikle simge dışa aktarımları — yalnızca viewBox taşır, width/height öznitelikleri içermez. Böyle bir dosyayı <img> içinde gösteren tarayıcılar varsayılan bir boyuta düşer (çoğunlukla 300×150, bazen 0×0); çeviricilerin garip boyutlu çıktılar üretmesinin nedeni budur. Bu araç SVG kaynağını doğrudan ayrıştırır: width ve height varsa onları kullanır; yalnızca viewBox varsa 512 piksellik varsayılan genişlikte viewBox oranını alır; ikisi de yoksa 512×512'ye döner. Saptanan boyutu dışa aktarmadan önce her zaman değiştirebilirsiniz.
SVG'deki metin PNG'de neden farklı görünüyor?
SVG <text> öğeleri, rasterleştiren tarayıcıda hangi yazı tipleri varsa onlarla işlenir ve <img> bağlamında harici web fontu referansları getirilmez — özenle seçtiğiniz yazı karakteri genel bir tarayıcı yazı tipine düşer. Tipografi kritikse, SVG'yi dışa aktarmadan önce tasarım aracınızda metni çizgiye dönüştürün (metni yola çevirin); yollar her yerde birebir aynı rasterleşir.
Gömülü görseller veya harici CSS neden görünmüyor?
Bir tarayıcı, <img> öğesi içindeki bir SVG'yi rasterleştirirken dosyayı bağımsız bir belge gibi ele alır: harici referanslar — bağlı stil sayfaları, web fontları ve başka URL'lere işaret eden <image> etiketleri — getirilmez; çapraz kaynaklı içerik canvas'ı kirletip dışa aktarmayı tümden engelleyebilir. Çözüm SVG'yi kendi kendine yeter hale getirmektir: CSS'i satır içine alın ve raster görselleri data: URI olarak gömün.
Şeffaflık korunuyor mu?
Evet. PNG tam bir alfa kanalına sahiptir ve arka plan Şeffaf ayarındayken SVG'nizin boyamadan bıraktığı her alan çıktıda şeffaf kalır. Damalı önizleme tam olarak nereleri gösterir. Beyaz veya özel bir rengi yalnızca zemini bilinçli olarak düzleştirmek istediğinizde seçin.
Retina / yüksek DPI ekranlar için hangi ölçeği kullanmalıyım?
Görselin gösterileceği boyutun 2 katında dışa aktarın — 200×80 CSS pikselinde gösterilecek bir logo 400×160 piksellik bir PNG olmalıdır. Yüksek DPI ekranlar her CSS pikseline yaklaşık dört fiziksel piksel sığdırır; bu yüzden 1x bir dışa aktarım onlarda yumuşak görünür. 4x yalnızca baskıya yakın kullanımlara değer; normal web gösterimi için dosya boyutunu bir kez daha dörde katlamaktan başka işe yaramaz.

About

Tarayıcılar görsel bağlamında SVG'yi nasıl rasterleştirir

Bir SVG'yi <img> öğesi üzerinden yüklemek (veya bir canvas'a çizmek), tarayıcının SVG motorunu kısıtlı bir moda sokar: dosyadaki betikler asla çalışmaz, olay işleyicileri yok sayılır ve harici kaynaklar — yazı tipleri, stil sayfaları, referans verilen görseller — getirilmez. Belge, saf ve kendi içinde bütün bir resim olarak işlenir. İstemci tarafında çalışan böyle bir çeviriciyi bulduğunuz herhangi bir SVG ile güvenle kullanılabilir kılan tam da bu kısıtlamadır: kötü niyetli bir dosya bile yalnızca piksel olarak ele alınır, asla kod olarak değil. Aracın temel sınırlamasının kaynağı da aynıdır — SVG'nin dışarıdan çektiği hiçbir şey görünmez.

Boyut seçimi: büyük rasterleştirin, sonra küçültün

Bir vektörü büyütmenin maliyeti yoktur ama bir rasteri büyütmek onu her zaman bozar. Bu yüzden sağlam iş akışı, herhangi bir tüketicinin ihtiyaç duyacağı en büyük boyutta — örneğin nominal tasarım boyutunun 4 katında — bir kez rasterleştirmek ve daha küçük varyantları o ana PNG'yi küçülterek üretmektir; küçültme neredeyse kayıpsız bir işlemdir. Tersini yapmak (küçük dışa aktarıp sonra büyütmek), SVG'nin bedavaya sunabileceği ayrıntıyı çöpe atar. PNG kayıpsız sıkıştırıldığından, cömert bir dışa aktarım boyutunun tek gerçek maliyeti diskteki baytlardır.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.