04: Neden SVG? Küçük. - CSS Hileleri

Anonim

Bir SVG dosyasının boyutu, ne kadar "büyük" olduğuna değil, ne kadar karmaşık olduğuna bağlıdır. SVG'lerin hangi boyutta oluşturulduklarını gerçekten önemsemediğini, ne olursa olsun esnek ve keskin olduklarını unutmayın.

100 × 100 piksellik bir raster görüntü düşünün. Bu 10.000 piksel bilgidir. SVG sadece bir şeyin nasıl çizileceğine dair talimatlardır, bu nedenle bu talimatlar yeterince basitse, her bir pikselde veri depolamak zorunda kalmadan biraz daha küçük olabilirler. Bundan biraz daha karmaşık, çünkü her iki tarafta da sıkıştırma devreye giriyor, ancak genel fikir orada.

Yine de "SVG daha küçüktür" kadar basit değildir - ve hangi formatın kullanılacağına karar vermek için her zaman doğru olan belirli bir formül yoktur. Bazen çok açık. Apple logosunun sağlam bir şekli mi? Vektör hemen hemen her boyut için daha küçük olacaktır. Çok yapraklı meşe ağacının bir resmi mi? Vektör çok karmaşık olabilir ve bir tarama görüntü formatı daha küçük olacaktır.

Todd Parker tarafından yapılan bir sunumdan görüntü.

Her iki şekilde de bir kopya kaydetmeniz, ikisini de optimize etmeniz ve dosya boyutunu test etmeniz gerekebilir.

SVG genellikle aşağıdaki gibi şeyler için harikadır:

  • Logolar
  • Simgeler
  • Basit çizimler
  • Grafikler
  • Haritalar

Bahse girerim, ne tür grafiklerin vektör olmasının mantıklı olduğu konusunda zaten oldukça iyi bir sezginiz var.

Dosyalar

  • 04-icon_62532.png.webp
  • 04-icon_62532.svg