Tukar icon dark mode guna imej format SVG. Senang ke susah?

SVG dalam term panjang ialah Scalable Vector Graphics. SVG ni bukan imej yang biasa kita guna macam format JPG, JPEG dan PNG tu. Tapi SVG ni imej yang dihasilakan oleh kod. Imej SVG ni menggunakan teknik bentuk geometrik macam titik, garis, lengkung dan bentuk poligon.

Dengan kata lain, SVG ni macam font. Kita boleh ubah warna dan saiz ikut pilihan kita tanpa mengurangkan kualiti imej tu. Bila zoom, imej format SVG ni takkan pecah. Kalau tak percaya, cuba zoom in blog ni. Imej smiley kat bawah tu tak pecah.

So, lepas godek-godek blog aku, aku jumpa kod SVG ni kat bahagian dark mode. Dalam site Iconify ni, memang banyak bentuk SVG. Sekali tengok macam emoji tapi emoji hitam putih.

Kod yang diberikan ada dalam bentuk:

• HTML
• CSS
• SVG
• React

Aku pilih SVG. Contoh kod SVG macam ni:

M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200s-89.7 200-200 200zm117.8-146.4c-10.2-8.5-25.3-7.1-33.8 3.1c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1c-10.2 8.5-11.5 23.6-3.1 33.8c30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8zM168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm160-60c-25.7 0-55.9 16.9-59.9 42.1c-1.7 11.2 11.5 18.2 19.8 10.8l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c8.5 7.4 21.6.3 19.8-10.8c-3.8-25.2-34-42.1-59.7-42.1z

Lepas aku tukar kod SVG, dapat lah hasil yang macam ni:

Sekarang lagi kemas sikit berbanding yang dulu. Kalau perasan, Google pun ada buat dark mode jugak.

Dalam 2-3 tahun ni memang trend dark mode kat smartphone. Memang kita dah tau sejak 2016 lagi. Diorang mula cuba implement kat YouTube, Gmail dsb. Salah satu sebab adalah untuk kesihatan mata. Sekarang zaman siber. Smartphone jadi satu keperluan, bukannya kehendak lagi. Bila terlalu lama mengadap phone, mata pun terkesan. Mungkin dark mode ni akan jadi trend kat website jugak nanti?