SVG bir görüntüyü şu şekilde saklar: matematiksel şekiller Bu, bulanıklık olmadan herhangi bir boyuta ölçeklenirken, PNG sabit bir piksel ızgarasını saklar. Seçimi bu tek fark belirler: ölçeklenmesi gereken logolar, simgeler ve düz grafikler için SVG, fotoğraflar ve karmaşık ayrıntılar için PNG. SVG (Ölçeklenebilir Vektör Grafikleri), 2001 yılında W3C tarafından standartlaştırılan XML tabanlı bir formattır; PNG (Taşınabilir Ağ Grafikleri), 1996'dan kalma bir tarama formatıdır. Bu karşılaştırma, vektör ile taramayı, her birinin ölçeklendirmeyi ve dosya boyutunu, şeffaflığı, düzenlemeyi, tarayıcı desteğini ve hangisinin nerede kullanılacağına ilişkin net bir kuralı nasıl ele aldığını açıklar.

Her iki format da genel olarak daha iyi değildir çünkü farklı sorunları çözerler. SVG, birçok boyutta görünen grafiklerde rakipsizdir; PNG, fotoğraflar ve ayrıntılı görseller için tek mantıklı seçimdir. Daha bir dönüştürücüyü açmadan görüntünüzün hangi aileye ait olduğunu bilmek soruyu yanıtlar.

Vektör ve raster

İki format, görüntüleri zıt şekillerde tanımlar. SVG, buraya bir daire çizmek, bu yolu o renkle doldurmak gibi talimatları listeler, böylece tarayıcı onu her boyutta yeni bir şekilde işler. PNG gerçek rengini saklar her piksel mozaik gibi bir ızgarada. Vektör, temiz kenarlı şekillere uygundur; Raster, milyonlarca benzersiz pikselin tanımlanacak şeklin olmadığı fotoğraflara uygundur. Aralarındaki her pratik farklılığın kökü budur.

Bir benzetme yardımcı olur. Vektör bir tariftir: Hangi ölçekte olursa olsun onu takip ederseniz aynı yemeği elde edersiniz. Raster, bitmiş yemeğin fotoğrafıdır: Büyüttüğünüzde daha büyük, daha bulanık pikseller görürsünüz. Tarif her boyutta mükemmel kalır; fotoğraf öyle değil.

Ölçeklendirme: SVG kazanır

Ölçeklendirme SVG'nin belirleyici avantajıdır. Bir SVG logosu kalıyor 16 piksellik favicon'dan reklam panosuna kadar çok keskinçünkü matematik her boyutta yeniden hesaplanır. PNG, yazılımın hiç yakalanmamış pikselleri icat etmesi gerektiğinden, çözünürlüğünü aşacak şekilde büyüttüğünüz anda bulanıklaşır. Birden çok boyutta gösterilen herhangi bir şey için SVG, PNG'nin farklı çözünürlüklerde birden fazla dışa aktarmaya ihtiyaç duyduğu durumlarda tek bir dosya sunar.

Bu göründüğünden daha önemli. Modern ekranlar, küçük telefonlardan büyük 4K monitörlere kadar çeşitlilik gösterir ve bir tasarımın hepsinde net görünmesi gerekir. Bir SVG, her ekranı tek bir dosyadan yönetir. PNG'nin küçük bir sürümü, büyük bir sürümü ve genellikle de yönettiğiniz varlıkları çoğaltan bir retina sürümü olması gerekir.

Dosya boyutu

Dosya boyutu PNG'nin tam tersi olan boyutlara değil karmaşıklığa bağlıdır. SVG'nin ağırlığına uygun iki renkli basit bir logo birkaç kilobayt ve herhangi bir ölçekte bu boyutu koruyun; genellikle PNG'den daha küçüktür. Ancak SVG boyutu şekil sayısıyla birlikte büyür, dolayısıyla izlenen fotoğraf PNG'den kat kat daha büyük olur ve yavaş işlenir. PNG boyutu piksel sayısıyla birlikte büyür, bu nedenle büyük bir fotoğraf ne olursa olsun ağırdır.

Ders, formatı içerikle eşleştirmektir. Düz bir simge için SVG hem daha küçüktür hem de sonsuz ölçeklenebilirdir. Ayrıntılı bir fotoğraf için SVG binlerce yola dağılırken PNG tahmin edilebilir bir boyutta kalır. Ağırlığı belirleyen şey format adı değil karmaşıklıktır.

Şeffaflık

Her iki format da şeffaflığı destekler, dolayısıyla burada ikisi de kazanmaz. Bir şeklin arkasında hiçbir dolgu bulunamayacağından ve PNG, bir şekil taşıdığından, SVG bunu yerel olarak ele alır. tam alfa kanalı pürüzsüz, kısmi şeffaflık için. Bir logo, her iki formatta da herhangi bir arka plan üzerinde şeffaf kalır. Aradaki fark, SVG'nin şeffaflığının şekil açıklamasının bir parçası olması, PNG'nin ise her piksel için bir opaklık değeri saklamasıdır.

Düzenleme ve esneklik

Düzenleme, grafikler için SVG'yi tercih eder. SVG şekilleri açıklayan bir metin olduğundan, yolları CSS ile yeniden renklendirin ve canlandırınve içindeki herhangi bir metin, bir ekran okuyucunun okuyabileceği ve bir arama motorunun dizine ekleyebileceği gerçek metin olarak kalır. PNG sabit piksellerden oluşur, dolayısıyla rengi değiştirmek kaynaktan yeniden dışa aktarma anlamına gelir. Yeniden biçimlendireceğiniz, tema yapacağınız veya canlandıracağınız bir logo için SVG çok daha esnektir.

Tarayıcı desteği

Destek her ikisi için de evrenseldir, dolayısıyla seçime karar vermez. Her tarayıcı SVG ve PNG'yi eklentiler olmadan okur ve her ikisi de uzun yıllardır okur. Pratik fark bağlamdır: SVG web sayfalarına ve uygulama arayüzlerine aittir, PNG ise e-posta, belgeler ve SVG'yi kabul etmeyebilecek eski yazılımlarda da çalışır. Bir web sitesi için her ikisi de güvenlidir; Bir e-posta logosu için PNG daha güvenilir seçimdir.

Her biri ne zaman kullanılmalı

Kural basit ve ezberlemeye değer:

SVG'yi kullanın ölçeklenmesi ve net kalması gereken logolar, simgeler, grafikler, diyagramlar ve çizimler için.
PNG'yi kullan ekran görüntüleri, ayrıntılı grafikler ve yumuşak kenarlı veya çok renkli herhangi bir görüntü için.
Fotoğraflar için ikisini de kullanmayın uzun vadede: JPG veya WebP, fotoğrafları PNG'den çok daha küçük sıkıştırır.

Marka varlıkları için bir ana vektör dosyası tutun ve e-posta veya bazı uygulama yüklemeleri gibi SVG'nin kabul edilmediği durumlarda PNG kopyalarını dışa aktarın.

SVG ve duyarlı tasarım

Duyarlı tasarım, SVG'nin geçimini sağladığı yerdir. Modern bir sitenin telefonda, dizüstü bilgisayarda ve 4K monitörde net görünmesi gerekir ve SVG bunların üçünü de yönetir. herhangi bir piksel yoğunluğunda bir dosya. Küçük, büyük ve retinayı ayrı ayrı dışa aktarmaya gerek yoktur ve tarayıcı görüntüyü yüksek çözünürlüklü bir ekran için ölçeklendirdiğinde bulanıklık yaşanmaz. Vektör, düzenin gerektirdiği boyutta kendisini net bir şekilde yeniden çizer.

PNG bununla eşleşemez. Retina ekranda keskin kalabilmek için PNG'nin çift çözünürlükte dışa aktarılması gerekir; bu da dosya boyutunu iki katına çıkarır ve o zaman bile bunun ötesine uzatıldığında bulanıklaşır. Duyarlı düzenler için birden fazla PNG boyutunu yönetmek, tek bir SVG'nin ortadan kaldırdığı gerçek bir bakım maliyetidir.

PNG pratikte SVG'yi yendiğinde

PNG, itibarının gösterdiğinden daha fazla durumda kazanıyor. Herhangi bir görüntü fotoğrafik ayrıntılar, degradeler, dokular veya yumuşak gölgeler PNG'ye ait çünkü onu SVG'ye izlemek şişirilmiş, çirkin bir karmaşa yaratıyor. Ekran görüntüleri, metni vektörleştirilmeyen arayüz ayrıntılarıyla karıştırdıkları için PNG bölgesidir. Yüzlerce renk içeren karmaşık bir illüstrasyon, binlerce yoldan oluşan devasa bir SVG'den ziyade PNG olarak daha küçük ve daha temizdir.

İnsanların yaptığı hata, SVG'nin her zaman modern ve üstün bir seçim olduğunu varsaymaktır. Yalnızca düz, sert kenarlı grafikler için üstündür. Ayrıntılı bir görüntüyü SVG'ye aktardığınızda, istediğinizin tam tersi şekilde yavaş işlenen daha büyük bir dosya elde edersiniz.

SVG ve güvenlik hakkında bir not

SVG, PNG'nin taşımadığı bir hususu taşır: kod olduğundan, bir SVG dosyasıdır komut dosyaları içerebilir. Bir siteye yüklenen kötü amaçlı bir SVG, teorik olarak görüntülendiğinde JavaScript çalıştırabilir. Pek çok platformun kullanıcı tarafından yüklenen SVG'leri sterilize etmesinin veya reddetmesinin nedeni budur ve bu nedenle yalnızca bilinen bir kaynaktan gelen SVG'lere güvenmelisiniz. Saf piksel verisi olan PNG böyle bir risk taşımaz. Kendi logolarınız ve simgeleriniz için bu bir sorun değildir, ancak bazı yükleme formlarının neden SVG'yi değil de PNG'yi kabul ettiğini açıklar.

SVG'ye dönüştürürken sık karşılaşılan hatalar

PNG'den SVG'ye dönüşümlerin çoğunu iki hata bozar. İlki bir fotoğrafı vektörleştirmeye çalışıyorumbinlerce yol ve orijinalinden daha büyük bir dosya üretir. İkincisi, otomatik izlemenin ardından orijinal bitmap'i SVG'nin içine gömülü olarak bırakmaktır, bu nedenle dosya gerçekten bir SVG sarmalayıcıdaki bir PNG'dir ve hiçbir şey kazanmaz. Yalnızca düz grafikleri çizin ve bir marka logosu için, temiz geometri ve en küçük dosyayı sağlayan otomatik izlemeye güvenmek yerine onu bir vektör düzenleyicide yeniden çizin.

PNG'i SVG'ye dönüştürme

PNG'yi SVG'ye dönüştürmek, vektörleştirme anlamına gelir: pikselleri yollara dönüştürmek. Bu işe yarar düz logolar, simgeler ve çizgi resimlerizlenecek temiz şekilleri olmayan fotoğraflar için başarısız olur. Bizim PNG'den SVG'ye dönüştürücü tarayıcınızdaki basit grafikleri izler, dolayısıyla hiçbir şey yüklenmez. Sahip olduğunuz bir marka logosunu bir vektör düzenleyicide yeniden çizmek, herhangi bir otomatik izlemeden daha temiz bir sonuç üretir. Fotoğraflar için, bizim kullanın PNG'den JPG'ye dönüştürücü bunun yerine.

Sık sorulan sorular

SVG duyarlı tasarım için iyi midir?

Evet ideal. Bir SVG her ekranda ve piksel yoğunluğunda keskin kalırküçük, büyük ve retina PNG'lerini ayrı ayrı dışa aktarma ihtiyacını ortadan kaldırır.

Neden bazı siteler SVG yüklemelerini reddediyor?

Çünkü bir SVG komut dosyaları içerebilirPNG'den farklı olarak. Platformlar güvenlik amacıyla kullanıcı SVG'lerini temizler veya engeller; bu nedenle bazı formlar yalnızca PNG'yi kabul eder.

Dönüştürülen SVG'm neden PNG'den daha büyük?

Muhtemelen bir fotoğrafı takip etti veya bitmap'i gömülü halde bıraktı. Yalnızca düz grafikleri vektörleştirin ve izlemeden sonra orijinal görüntüyü silin, böylece SVG pikselleri değil yolları tutar.

SVG PNG'den daha mı iyi?

Grafikler için evet. SVG küçük boyutta bulanıklık olmadan ölçeklenir. Fotoğraflar için PNG kazanır çünkü fotoğrafların vektör olarak depolanacak temiz şekilleri yoktur.

SVG ve PNG arasındaki fark nedir?

SVG: ölçeklenebilir matematik; PNG sabit bir piksel ızgarasıdır. SVG her boyutta keskin kalırken PNG, çözünürlüğünü aşacak şekilde büyütüldüğünde bulanıklaşır.

Fotoğraflar için SVG kullanabilir miyim?

Hayır, kullanışlı değil. Fotoğrafların milyonlarca rengi ve yumuşak kenarları vardır izlenecek şekil olmadığından SVG fotoğrafı büyük ve dağınıktır. PNG veya JPG kullanın.

Hangisi daha küçük: SVG mi yoksa PNG mi?

Basit grafikler için SVG. İki renkli bir logo SVG olarak birkaç kilobayttır herhangi bir boyutta. Fotoğraflar için PNG, izlenen fotoğraf balonları nedeniyle daha küçüktür.

SVG şeffaflığı koruyor mu?

Evet. SVG şeffaflığı yerel olarak desteklerPNG'nin alfa kanalı gibi, böylece logo her türlü arka plan üzerinde şeffaf kalır.

Tüm tarayıcılar SVG'yi destekliyor mu?

Evet. Her modern tarayıcı SVG ve PNG'yi okur eklentiler olmadan. SVG web sayfalarına uygundur, PNG ise e-posta ve eski yazılımlarda da çalışır.

PNG'yi SVG'ye nasıl dönüştürebilirim?

İzini sür. Bir vektörleştirici düz bir PNG'yi SVG yollarına kadar izler, logolar ve simgeler için işe yarar ancak fotoğraflar için işe yaramaz.

Bir SVG'yi oluşturduktan sonra düzenleyebilir miyim?

Evet. SVG yolları herhangi bir vektör düzenleyicide açılır Dosya sabit pikseller değil, şekilleri açıklayan metin olduğundan CSS ile yeniden renklendirin veya canlandırın.

Bir web sitesi logosu için hangi formatı kullanmalıyım?

SVG. Tek bir dosyadan her ekranda keskin ölçeklendirme yaparve metni arama motorları tarafından okunabilir durumda kalır. SVG'nin kabul edilmediği e-postalar için PNG'yi saklayın.

Bir simge için PNG mi yoksa SVG mi daha iyidir?

Ölçeklendirme için SVG. Bir SVG simgesi her boyutta net kalırPNG simgesi birden fazla dışa aktarıma ihtiyaç duyar ve büyütüldüğünde bulanıklaştırılır.

SVG ve PNG farklı sorunları çözer: SVG, her boyutta keskin kalan ölçeklenebilir matematiği depolarken PNG, büyütüldüğünde bulanıklaşan sabit bir piksel ızgarasını depolar. SVG, CSS ile ölçeklenmesi, düzenlenmesi ve canlandırılması gereken logolar, simgeler ve çizgi resimlerde kazanır ve her ekrana tek bir dosyadan hizmet verir. PNG, fotoğraflar, ekran görüntüleri ve ayrıntılı görseller için kazanır ve SVG'nin kabul edilmediği durumlarda çalışır. Formatı içerikle eşleştirin ve tarayıcınızda basit bir grafiği vektörleştirmek veya taramalı bir fotoğrafı işlemek için yukarıdaki dönüştürücülerimizi kullanın.

Hızlı başvuru: SVG veya PNG

Ulaşın SVG görüntü ölçeklenmesi gereken bir logo, simge, grafik veya çizgi çizimi olduğunda, onu CSS ile yeniden renklendirmek veya canlandırmak istediğinizde veya bir dosyanın her ekran boyutuna sunulması gerektiğinde. Ulaşın PNG görüntü bir ekran görüntüsü, ayrıntılı bir grafik veya degradeler, dokular veya yumuşak kenarlar içeren herhangi bir şey olduğunda ve e-postada veya SVG'yi reddeden daha eski bir yazılımda çalışması gerektiğinde. Bölme çizgisi basittir: düz, keskin kenarlı grafikler vektöre dönüşür, ayrıntılı olan her şey raster olur.

Bir vektör master'ı tutmak

Herhangi bir marka varlığı için orijinali vektör ana kopyası olarak saklayın ve gerektiğinde taramalı kopyaları dışa aktarın. Tek bir SVG logosu, her biri talep üzerine doğru formatta ve boyutta dışa aktarılan bir favicon, bir sosyal avatar ve bir yazdırma dosyası oluşturabilir. Diğer şekilde, yani bir raster PNG'den vektöre geri dönmek, izleme anlamına gelir ve bu, hiçbir zaman temiz geometriyi tam olarak kurtarmaz. Bu nedenle, mümkün olduğunda ana dosyayı SVG olarak saklayın ve PNG dışa aktarımlarını, istediğiniz zaman yeniden oluşturabileceğiniz tek kullanımlık kopyalar olarak değerlendirin.

Sonuç olarak

SVG ve PNG uzman oldukları kadar rakip değiller. Vektörler şekilleri ve ölçeği sonsuza kadar tanımlar, dolayısıyla logolar ve simgeler SVG'ye aittir. Pikseller ayrıntıları yakalar, dolayısıyla fotoğraflar ve ekran görüntüleri PNG'ye aittir. Tek bir soru sorarak seçim yapın: Bu görselde temiz, düz şekiller veya ince fotoğraf detayları var mı? Bu cevap her zaman formatı belirler ve bir vektör ana kopyasını bulundurmak, ihtiyacınız olan raster kopyayı her zaman dışa aktarabileceğiniz anlamına gelir.