Ikon

Sebagian besar gambar adalah bagian dari konten Anda, tetapi ikon adalah bagian dari antarmuka pengguna Anda. Aplikasi harus diskalakan dan beradaptasi dengan cara yang sama seperti teks UI Anda yang diskalakan dan diadaptasi.

Grafik Vektor yang Skalabel

Ketika memilih gambar fotografi, ada banyak pilihan untuk format gambar: JPG, WebP, dan AVIF. Untuk citra non-fotografi, Anda dapat memilih antara format Portable Network Graphics (PNG) dan format Scalable Vector Graphics (SVG).

PNG dan SVG pandai menangani area warna datar, dan keduanya memungkinkan gambar Anda memiliki latar belakang transparan. Jika menggunakan PNG, Anda mungkin perlu membuat beberapa versi gambar dalam ukuran yang berbeda dan menggunakan atribut srcset pada elemen img untuk membuat gambar menjadi responsif. Jika Anda menggunakan SVG, tindakan ini akan responsif secara default.

PNG (dan JPG, WebP, dan AVIF) adalah gambar bitmap. Gambar bitmap menyimpan informasi sebagai piksel. Dalam SVG, informasi disimpan sebagai instruksi menggambar. Saat browser membaca file SVG, instruksi akan dikonversi menjadi piksel. Yang paling penting, petunjuk ini bersifat relatif. Terlepas dari dimensi yang Anda gunakan untuk menggambarkan garis dan bentuk, semuanya dirender dengan akurasi yang tepat. Alih-alih membuat beberapa SVG dengan ukuran berbeda, Anda dapat membuat satu SVG yang akan berfungsi pada semua ukuran. Anda tidak perlu menggunakan atribut srcset.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML digunakan untuk menulis instruksi dalam file SVG. Ini adalah bahasa markup, seperti HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

Anda bahkan dapat menempatkan SVG di dalam HTML.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

Jika Anda menyematkan SVG seperti itu, itu mengurangi satu permintaan yang perlu dibuat oleh browser. Tidak perlu menunggu gambar didownload karena gambar tersebut dilengkapi dengan HTML ...dalam HTML! Selain itu, seperti yang akan segera Anda ketahui, menyematkan SVG seperti ini juga memberi Anda lebih banyak kontrol untuk menata gayanya.

Ikon dan teks

Gambar ikon sering kali menampilkan bentuk sederhana pada latar belakang transparan. SVG ideal untuk ikon.

Jika Anda memiliki tombol atau tautan dengan teks dan ikon di dalamnya, maka ikon itu adalah ikon presentasi. Ini adalah teks yang penting. Saat menggunakan elemen img, atribut alt kosong menunjukkan bahwa gambar presentasi.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

Karena CSS ditujukan untuk presentasi, Anda dapat menempatkan ikon di CSS sebagai gambar latar.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

Jika Anda menempatkan SVG di dalam HTML, gunakan atribut aria-hidden untuk menyembunyikannya dari teknologi pendukung.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

Ikon mandiri

Gunakan teks di dalam tombol dan link jika Anda ingin tujuannya jelas. Anda dapat menggunakan ikon tanpa teks apa pun, tetapi jangan berasumsi bahwa semua orang memahami arti ikon tertentu. Jika ragu, lakukan pengujian dengan pengguna sungguhan.

Jika Anda memutuskan untuk menggunakan ikon tanpa teks pendamping, ikon tersebut tidak lagi bersifat presentasi. Gambar latar di CSS bukan cara yang tepat untuk menampilkan ikon. Ikon harus diberi nama yang dapat diakses dalam HTML.

Jika Anda menggunakan elemen img, ikon akan mendapatkan nama yang dapat diakses dari atribut alt.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

Opsi lain adalah mencantumkan nama yang dapat diakses pada link atau tombol itu sendiri dan mendeklarasikan bahwa gambar tersebut bersifat presentasi. Gunakan atribut aria-label untuk memberikan nama yang dapat diakses.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

Jika Anda menempatkan SVG di dalam HTML, gunakan atribut aria-label pada link atau tombol untuk memberinya nama yang dapat diakses dan gunakan atribut aria-hidden pada ikon.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

Ikon gaya visual

Jika Anda menyematkan ikon SVG langsung di HTML, Anda dapat menata gaya bagian-bagiannya seperti elemen lainnya di laman Anda. Anda tidak dapat melakukannya jika menggunakan elemen img untuk menampilkan ikon.

Pada contoh berikut, elemen rect di dalam SVG memiliki nilai fill sebesar blue agar cocok dengan gaya teks tombol.

button {
 color: blue;
}
button rect {
  fill: blue;
}

Anda juga dapat menerapkan gaya hover dan focus.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

Referensi

• Jika Anda perlu menata gaya SVG yang merupakan gambar latar di CSS, baca artikel Una tentang mewarnai latar belakang SVG.
• Sarah Soueidan telah menulis tentang tombol ikon yang dapat diakses.
• Scott O'Hara telah menulis tentang me-markup gambar dan SVG yang dapat diakses secara kontekstual.
• Jika Anda menggunakan alat desain grafis untuk mengekspor SVG, gunakan SVGOMG untuk mengoptimalkan output.

Ikon adalah bagian penting dari branding situs Anda. Berikutnya, Anda akan mencari tahu cara membuat aspek lain dari branding Anda menjadi responsif melalui kekuatan tema.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ikon