04: Mengapa SVG? Kecil. - Trik CSS

Anonim

Ukuran fail SVG bergantung pada seberapa kompleksnya, bukan seberapa "besar" itu. Ingat SVG tidak begitu peduli dengan ukuran apa yang diberikan, mereka fleksibel dan tajam tidak kira apa pun.

Bayangkan gambar raster 100 × 100 piksel. Itu 10,000 piksel maklumat. SVG hanyalah petunjuk tentang cara menggambar sesuatu, jadi jika arahan itu cukup mudah, ia sedikit lebih kecil daripada menyimpan data pada setiap piksel. Ini sedikit lebih kompleks daripada itu, kerana pemampatan berlaku di kedua-dua belah pihak, tetapi idea keseluruhannya ada.

Ini tidak semudah "SVG lebih kecil" - dan tidak ada formula yang ditetapkan untuk menentukan format yang akan digunakan yang selalu betul. Kadang-kadang ia sangat jelas. Bentuk pepejal logo Apple? Vektor akan lebih kecil untuk hampir semua ukuran. Ilustrasi pokok oak dengan banyak daun? Vektor mungkin terlalu rumit dan format gambar raster akan lebih kecil.

Imej dari persembahan oleh Todd Parker.

Anda mungkin hanya perlu menyimpan salinan dengan dua cara, mengoptimumkan keduanya, dan menguji ukuran fail.

SVG biasanya bagus untuk perkara seperti:

  • Logo
  • Ikon
  • Ilustrasi ringkas
  • Carta
  • Peta

Saya yakin anda sudah mempunyai intuisi yang cukup baik mengenai jenis grafik yang masuk akal untuk menjadi vektor.

Fail

  • 04-ikon_62532.png.webp
  • 04-ikon_62532.svg