Tingkatkan Layanannya, GitHub Mengganti Icon Fonts dengan SVG


man-person-apple-iphone

[Sumber: pexels]

GitHub memberikan sebuah pengumuman tentang penggantian seluruh basis kode Octicons dengan alternatif SVG pada tanggal 22 Februari 2016. Perubahan tersebut bertujuan agar layanan ikon di GitHub menjadi lebih mudah, lebih cepat, dan lebih gampang diakses.

Terdapat beberapa alasan mengapa GitHub beralih dari icon font ke SVG. Beberapa alasan tersebut adalah permasalahan yang terdapat pada icon font rendering, peningkatan pengubahan halaman, kemudahan akses, ketepatan ukuran dari glyphs, kemudahan authoring, dan kemudahan membuat animasi.

Sebelumnya, Github menggunakan icon fonts dalam menyediakan layanan ikonnya. Dengan Icon font, developer dapat memasukan ikon ke bundel CSS yang digunakan, dan dapat mengubah ukuran dan warna ikon dengan menggunakan CSS tersebut.

Akan tetapi, dalam beberapa browser yang menggunakan basis Webkit, sebagian ikon akan terlihat kabur tergantung pada lebar ukuran browser. Pengubahan ukuran pixel yang seharusnya untuk memberikan peningkatan keterbacaan malah membuat ikon yang digunakan terlihat menjadi lebih buruk.

Dengan beralih menggunakan SVG, ikon-ikon pada GitHub akan diubah kedalam bentuk gambar bukan lagi teks. Dengan begitu, ukuran pixel ikon tersebut akan terkunci dengan baik pada semua resolusi yang digunakan. Sehingga ikon-ikon tidak akan terlihat kabur pada semua browser.

Selain itu, dengan menggunakan SVG, pengubahan halaman pun akan meningkat. Yang semula akan muncul sebuah tampilan cepat dari unstyled content saat icon font teruduh, terbagikan, atau pun lainnya,  kini tak akan ada tampilan seperti itu.

Beberapa pengguna menimpa font-font dari GitHUb, seperti yang tertulis di Death to Icon Fonts. Untuk pengubahan font itu, ikon berbasis font hanya akan menampilkan sebuah kotak kosong yang tidak memberikan arti apapun dan mengacaukan tampilan dari halaman GitHub. Akan tetapi, dengan menggunakan SVG, ikon akan ditampilkan terlepas dari penimpaan font yang digunakan.

Selain itu, dengan menggunakan SVG, developer dapat dengan mudah untuk menawarkan glyphs dengan berbagai ukuran yang tepat. Kemudahan penambahan ikon juga diberikan dengan penggunaan SVG. GitHub juga belum menemukan dampak negatif dari penggunaan SVG. Selain itu, penggembungan bundel-bundel CSS akan teratasi, karena dengan SVG, GitHub tidak melayani CSS font.

Untuk mempelajari penggunaan SVG, developer dapat mengunjungi halaman resmi GitHub.

[via GitHub]

, ,