Modern web sitelerinde SVG simgeleri ve PNG simgeleri

Neden bu kadar az sayıda modern web sitesinin simgeler için yalnızca PNG'leri kullandığını merak ediyorum (ancak bu varsayım sadece benim gözlemime dayanıyor). Şimdiye kadar, PNG'leri SVG'ler üzerinden kullanmanın ana nedenlerinin IE8 ve SVG'nin daha fazla CPU gücü kullanması olduğunu biliyorum (ancak bunun basit 1K simgeleri için herhangi bir sorun olduğuna inanmıyorum). Sprite, resim veya satır içi SVG olarak kullanıldığında, SVG'leri kullanmanın birçok avantajını görebiliyorum (ve şu anda kullanıyoruz).

(Soru Araştırma: PNG Sprite - SVG sprite - Icon fontlar performansa odaklanır ve ilgili bir cevabı yoktur, Icon Font - SVG önbelleğe alma ve ağ sorunu ağ trafiğine odaklanır, ancak örneğin şablon oluşturarak kolayca çözülebilir.)

Yeni web sitesi yalnızca modern tarayıcıları destekliyorsa, SVG kullanmamak için herhangi bir neden var mı (veya - simgeler için PNG kullanmanın herhangi bir nedeni var mı)? IE8'i önemsemiyorsak ve SVG kullanımı şablonlama ve / veya önbelleğe alma ile destekleniyorsa, yalnızca SVG'lere güvenmek için herhangi bir yakalama var mı?

SVG'nin iyi bir seçim olmasının nedenleri:

• her boyuttaki tarayıcıyı, özellikle cs'ler ile sorunsuz bir şekilde destekler. background-size
• fareyle üzerine gelme efekti gibi bunları yukarı / aşağı ölçekleyebilirsiniz.
• SVG'leri gömebilir ve JavaScript ve DOM ile bunlara gerçek zamanlı değişiklikler yapabilirsiniz.
• SVG'lerin ve SVG'lerin bölümlerinin stilini CSS ile (değişen renkler, ana hatlar vb.)
• SVG'leri ister istemcide ister sunucuda dinamik olarak oluşturabilirsiniz. Metin tabanlı yapıları nedeniyle, bunları oluşturmak için düşük seviyeli kitaplıklara veya güçlü sunuculara ihtiyacınız yoktur.

PNG'nin iyi bir seçim olmasının nedenleri:

• tarayıcı desteği
• PNG hareketli grafik sayfaları oluşturmak için mevcut araçlar
• çoğu kişinin bilgisayarında PNG uyumlu bir düzenleyici vardır
• Grafikleriniz fotoğraflar veya diğerlerinin vektörleştirilmesi zor

Diğer endişeler:

• bazı SVG düzenleyicileri, meta verileri SVG'lerinizde depolayabilir, bu da dosya boyutunu artırabilir ve muhtemelen istemeden verileri açığa çıkarabilir
  • Örneğin, Inkscape'de bir PNG dışa aktardığınızda, kaydettiğinizde SVG'de bu dizine giden mutlak yolu kaydetti / kaydetti
  • SVG kompresörleri bunu kaldırabilir, ancak ben test etmedim (varsa düzenlemekten çekinmeyin)

Çok basit şekiller / tasarımlar göstermiyorsanız veya özellikle grafik bölümlerini uygulama ile değiştirmeniz gerekmedikçe, SVG'yi kullanmak için çok fazla teşvik yoktur. Orijinal boyutun iki katı bir PNG oluşturabilir (retina ekranlar için) ve dosya boyutunun daha küçük olmasını sağlayabilirsiniz - eski tarayıcılar için daha iyi kapsamdan bahsetmeye gerek yok (javascript veya çoklu dolgulara gerek yoktur).

Bunu vektör grafikleriyle UI'ler oluşturan biri olarak söylüyorum. Bu harika bir tasarım aracı, ancak yayınlama / bant genişliği / erişim için PNG'nin üstünden geçmek zor. Daha dün gece iyi bilinen bir logoyu test ettim. CocaCola.svg neredeyse 20K idi. Düz / düz bir renk olduğu için 12 renkli palet sıkıştırmasıyla PNG-8 olarak dışa aktardım ve 1,6 K (!!!) 'ye düşürdüm Sadece birkaç logo için bu çok önemli değil, ancak 40'ı göstermeniz gerektiğinde onlardan .. peki, resmi anladınız.

En iyi bölüm, bir PNG'yi bir base64 veri uri'sine dönüştürebilmeniz ve bunları doğrudan stil sayfanıza yerleştirebilmenizdir. Bu, özellikle mobil tarayıcılarda performans ve uyumluluk sorunları ile zaten ünlü olan bir format olan SVG için önerilmez.

Kapanışta her ikisi için de güçlü yönler ve kullanım durumları olduğunu söylemeliyim, ancak PNG çok daha fazla iz bıraktı ve akıntıyla gittiğinizde daha az dirençle karşılaşıyorsunuz. SVG'nin daha iyi uyum sağladığı garip durumlar için, bu makaleyi ve bu öğrenme kaynağını şiddetle tavsiye ediyorum.

Mutlu Tasarımlar!

SVG harikadır (FakeRainBrigand nasıl güzel bir şekilde tanımlanmıştır) ve güzel bir şekilde işlenir, ancak oldukça karmaşık olabilir. Bir tarayıcının, piksel tabanlı görüntüler yerine vektör verileriyle uğraşırken yapacak daha fazla işi vardır. Görüntü bir öğedir, bir SVG'nin satır içi kullanıldığında DOM'a bile eklenebilecek çok sayıda alt öğesi olabilir.

Herhangi bir değerli performans testi yapmadım, ancak mantıksal açıdan SVG, özellikle orta yaşlı mobil tarayıcılar (CPU stresi) ile uğraşırken performans söz konusu olduğunda dikkatli kullanılmalıdır. Farklı Android ve IOS cihazlarında 100 SVG görüntüye karşı 100 PNG görüntü tarafından tüketilen CPU gücünü görebileceğiniz bir grafiğe sahip olmak çok faydalı olur ...

SVG ile ilgili diğer bir sorun da, Tag'ın bazı Android / Samsung için tarayıcılar ve eski güzel IE'miz ne olursa olsun bir genişlik ve yükseklik özniteliğine ihtiyaç duymasıdır. Ve A *** e Illustrator gibi çoğu modern SVG Düzenleyicisi yalnızca "viewBox" özelliğini ekler.

SVG ile ilgili en harika şey, herhangi bir piksel yoğunluğunda güzel ve net hale getirmesidir.

Doğru, png hemen hemen her yerde kullanılıyor. Bence bunun nedeni, çoğu durumda SVG'nin oldukça işe yaramaz olması, görüntünün daha büyük olması (bence) ve bilgisayarın görüntüyü her yakınlaştırdığınızda yeniden oluşturması gerektiğinden (çünkü her zaman görüntüleri yakınlaştırıyorsunuz, değil mi? ?) Bunun en önemli neden olduğunu düşünüyorum.

Performans açısından SVG'nin korkunç olabileceğine dikkat edelim . Chrome gibi modern tarayıcılarda bile (bunu 2019'da yazıyor!), Birkaç 100s (neredeyse 3-800) svg simgesiyle CMS benzeri bir sayfa, tarayıcıyı tam anlamıyla 5 saniyeden uzun bir süre işlemeyi bitirmek için askıya alıyor. Bu arada CPU'yu maksimize etmek.

Başka bir yerde belirtildiği gibi, sayfaya gömülü SVG'lerin sayısı, tarayıcı üzerindeki yükü katlanarak artırır, dolayısıyla böyle bir durumla karşılaşırsanız

Seçenek # 1: svg'leri webfont'a dönüştürün (Performans çizelgesine buradan bakın: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Seçenek # 2: Düz, eski PNG'lere geri dönün

Anında renk değişikliği gibi süslü bir şey yapmak istemediğiniz ve çok sayıda SVG örneğinizin olduğu bu gibi durumlarda, eski PNG işi yapar ve günü kurtarır!