SVG görüntüleri yüksek çözünürlüklü png, jpg veya gif'ten daha iyi ölçeklenmiş görünüyor mu?

Bir görüntüyü büyütmek istiyorsanız, bir SVG'nin akıllıca bir seçim olduğunu biliyorum.

Ancak benim durumum, kullanıcıların bir CMS aracılığıyla yükleyebilmelerini istediğim ikonlara sahip olmam. SVG'ler oluşturmak için biraz daha zorlayıcıdır ve bu nedenle jpg, gif veya png yöneticiler için ideal bir format gibi görünür.

Ekran boyutuyla aynı veya daha büyük olarak yüklendiyse ve doğru oranda tutulduysa, jpgs, gif'ler veya png boyutları küçültüldüğünde SVG kadar yüksek kalitede olabilir mi?

Benim varsayım büyük olasılıkla tıpkı başka biçimi olarak bulanıklaşmaya böylece gif rağmen tarayıcıları, çok belirli bir boyutun altındaki bir svg antialiase gerektiğini olurdu görünüşte daha bulanıklık.

(Not: cevabım OP'nin soruşturması hakkında bir yorum olduğu için lütfen bu sorudan önce OP'nin kendi cevabını okuyun )

Bu, Android Chrome'un bilinen bir sorunudur. Bazı yapılarında kenar yumuşatmayı devre dışı bıraktılar, bu da vektör şekillerinin keskin kenarlarla oluşturulmasına neden oldu. Bunun nedeni, kenar yumuşatma hesaplamaları tarafından oluşturulan aşırı yükü azaltmaktı. Şikayetler nedeniyle, kenar yumuşatmayı etkinleştirmesi gereken bir güncelleme yayınladılar.

Stack Overflow'da bu sorunu tartışan birkaç konu var. İşte onlardan biri:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

IPod Touch Safari'de aynı soruna bir referans bulamadım, ancak muhtemelen problemin aynı olduğunu varsayarak tahmin etmek güvenlidir.

Kenar yumuşatmayı devre dışı bırakıldığında bile zorlamaya çalışmanın yolları vardır, örneğin, temelde öğenin etrafına biraz dolgu ekleyen bu hile , tarayıcının bazı nedenlerden dolayı kenar yumuşatma uygulamasına neden olur. Ayrıca , öğenin şekil oluşturma özelliğini keskin kenarlardan farklı bir şeye ayarlamayı deneyebilir ve tarayıcının öğeyi onayıp almadığını görebilirsiniz.

Sadece bir test yaptım ve tek fark mobil tarayıcılarda görünüyor.

Twitter simgesinin 990 x 900 piksellik bir görüntüsünü oluşturdum (bu simge iyi ölçeklendirme için çok ayrıntılı bir tasarım, bu test için çok iyi görünüyor). Bunu SVG, JPG, GIF, Şeffaf GIF (sadece kuş şekli, arka plan rengi yok, bunun yerine CSS ile ekledim), PNG, şeffaf PNG olarak kaydettim.

Sonra bunları 15px, 25px, 50px, 100px ve 150px'e düşürdüm.

İşte Firefox'taki sonuçlar:

Chrome'daki sonuçlar şunlardır:

Hangi piksellerin üretildiğini görebilmemiz için en küçük sonuçların ekranını yakınlaştırırsak, Firefox (üst) saydam olmayan sürümlerdeki kenarları hafifçe koyulaştırır, ancak diğer tüm sonuçlar çok benzerdir.

Ancak, bir iPod Touch Safari tarayıcısında SVG sürümü oldukça bulanık görünüyor ve diğerleri oldukça pikselli:

Benzer bir sonuç Android Chrome'da da görülüyor. Bunun ekran görüntüsünü almadım.

Bunun nedeninin, ekranın ana farkı olan piksel yoğunluğu ile ilgili bir şey olup olmadığını merak ediyorum, ancak tüm görüntüler sadece SVG'den ziyade mobilde farklı şekilde ele alınırsa daha anlamlı olurdu.

Birisi bunun neden böyle olduğunu açıklayabilirse, kabul edilen cevap işaretini aktaracağım. Aksi takdirde, TL'yi tahmin ediyorum; DR yanıtı, bulanık veya pikselli simgeleri tercih etmenize (veya duyarlı kesme noktalarınız için piksel mükemmel boyutlarda çok sayıda simge yapmanıza) bağlı olmasıdır.

edit: svgs genellikle elma cihazlarda genellikle çok daha açık olduğunu gözlemledim - twitter kuş bu yukarıdaki testlerimde göstermek için çok ayrıntılı olabilir, bu yüzden simgeler için kullanmak için doğru format olduğunu hissediyorum.

Vektör görüntüleri ile bitmap görüntüleri arasında çok önemli bir ayrım vardır. Biraz sadeleştirirsek, vektör görüntüler, bitmap görüntüler sizin tarafınızdan oluşturulurken istemci tarafından oluşturulur.

Bu, görüntüyü gönderdiğiniz uygulamanın nasıl davrandığı hakkında daha fazla söz sahibi olduğu anlamına gelir. Sonuçta aşağıdaki dezavantajlarınız olur :

• Görüntünün sunulabilir olması daha fazla kaynak gerektirir
  • Bu durumda işlenen, daha iyi yapmak için yeterli kaynağa sahip olmadığı için kaliteyi düşürmeyi tercih edebilir.
• Her görüntüleme sisteminin kendi tuhaflıkları ve kusurları vardır
  • Tutarlı olmayı zorlaştırır
  • Bir programcının problemlerini yaşarsınız

Öte yandan, bunun bazı faydaları vardır :

• Görüntü serbestçe ölçeklenebilir ve daha manipülatif seçeneklere sahip olabilir.
  • Bu, istemciler sonunda yapılan işin bir sonucudur, böylece öğeleri gönderirseniz daha büyük bir resim elde etmek için pikselleri hesaplamak için daha fazla zaman harcayabilirler.
• Çoğu durumda veriler piksel görüntüsünden daha küçüktür (olması gerekmese de)

Bir sistemin arabası oluşturucusu varsa yapabileceğiniz çok şey yok. Son başvuruda bir seçim yapmanız ve bu seçimi kötü kararlar vermek için kullanabilir.

Hangisi daha iyi

Görüntünüzü ne kadar iyi oluşturabileceğinize ve emrinizde ne kadar bant genişliğiniz olduğuna bağlıdır. Tarayıcıların yaptıklarından daha iyi bir render yapmak kesinlikle mümkündür. Şaşırtıcı olmayan biri de Illustrator'dan daha iyi bir iş yapabilir. Ama sonra ertelenmiş bir görüntüye sahip olmanın tüm avantajlarını kaybedersiniz.

Üçüncü bir seçenek daha var.

Eğer sonuçlardan memnun değilseniz, her zaman kendi render motorunuzu yapmaya çalışabilirsiniz. Webgl'i destekleyen platformlarla bunu yapabilirsiniz. Bir örnek için buraya bakın . Ancak bu oldukça serttir ve uygulama detaylarından sizi kurtarmaz.

(Richard B'nin cevabı hakkında henüz yorum yapmak için yeterli puan yok.)

Sorunuzu cevaplamak için Richard B, Bu etkiyi daha düşük güçlü donanımlarda kenar yumuşatma gerektiren öğeler üzerinde sık sık görüyoruz. Bu, kenar yumuşatma azaltıldığında veya bu ortamlardan kaldırıldığında yuvarlak köşeli DOM öğelerinde bile olur.

Şirketimizde, daha düşük güç donanımı kullandığımız ve bu "son derece pürüzlü kenarlı şekiller" sorunuyla karşılaşmaya başladığımız bazı durumlar var. Performansı artırmak için kenar yumuşatma miktarını devre dışı bıraktık / azalttık. Bu, mobil cihazlardaki testlerinizin yaptıkları sonuçları döndürmesinin nedeni ile aynı olabilir.