04: Mengapa SVG? Kecil. - Trik CSS

Anonim

Ukuran file SVG bergantung pada seberapa rumitnya, bukan seberapa "besar" itu. Ingat SVG tidak terlalu peduli pada ukurannya, mereka fleksibel dan tajam apa pun yang terjadi.

Bayangkan gambar raster 100 × 100 piksel. Itu 10.000 piksel informasi. SVG hanyalah instruksi tentang cara menggambar sesuatu, jadi jika instruksi tersebut cukup sederhana, mereka bisa sedikit lebih kecil daripada harus menyimpan data pada setiap piksel. Ini sedikit lebih kompleks dari itu, karena kompresi berperan di kedua sisi, tetapi gagasan keseluruhan ada di sana.

Ini tidak sesederhana "SVG lebih kecil" - dan tidak ada rumus yang ditetapkan untuk memutuskan format mana yang akan digunakan yang selalu benar. Terkadang sangat jelas. Bentuk solid logo Apple? Vektor akan lebih kecil untuk hampir semua ukuran. Ilustrasi pohon ek dengan banyak daun? Vektor mungkin terlalu rumit dan format gambar raster akan lebih kecil.

Gambar dari presentasi Todd Parker.

Anda mungkin hanya perlu menyimpan salinan dengan kedua cara, mengoptimalkan keduanya, dan menguji ukuran file.

SVG biasanya bagus untuk hal-hal seperti:

  • Logo
  • Ikon
  • Ilustrasi sederhana
  • Grafik
  • Maps

Saya bertaruh Anda sudah memiliki intuisi yang cukup bagus tentang jenis grafik apa yang masuk akal untuk dijadikan vektor.

File

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