Ikon

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

Grafik Vektor yang Skalabel

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

PNG dan SVG baik dalam menangani area warna datar, dan keduanya memungkinkan gambar Anda memiliki latar belakang transparan. Jika menggunakan PNG, Anda mungkin perlu membuat beberapa versi gambar dalam berbagai ukuran dan menggunakan atribut srcset pada elemen img untuk membuat gambar responsif. Jika Anda menggunakan SVG, gambar tersebut 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. Bagian terbaiknya, petunjuk ini bersifat relatif. Terlepas dari dimensi yang Anda gunakan untuk menggambarkan garis dan bentuk, semuanya dirender dengan kejelasan yang tepat. Daripada membuat beberapa SVG dengan ukuran yang berbeda, Anda dapat membuat satu SVG yang dapat berfungsi di semua ukuran. 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, mengurangi satu permintaan yang perlu dibuat browser. Tidak perlu menunggu gambar untuk didownload karena gambar tersebut sudah tersedia dengan HTML ...di HTML! Selain itu, seperti yang akan Anda ketahui, menyematkan SVG seperti ini juga memberi Anda lebih banyak kontrol terhadap penataan gaya.

Ikon dan teks

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

Jika Anda memiliki tombol atau tautan dengan teks dan ikon di dalamnya, ikon tersebut bersifat presentasional. Teks itulah yang penting. Saat menggunakan elemen img, atribut alt kosong menunjukkan bahwa gambar bersifat presentasional.

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

Karena CSS adalah untuk presentasi, Anda dapat menempatkan ikon tersebut 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 menjelaskan tujuannya. 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 yang menyertainya, ikon tersebut tidak lagi bersifat presentasional. Gambar latar dalam 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>

Pilihan lainnya adalah menempatkan nama yang dapat diakses pada link atau tombol itu sendiri dan menyatakan bahwa gambar tersebut presentasional. 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 mudah 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 menyematkan ikon SVG langsung di HTML, Anda dapat menata gaya bagian-bagiannya seperti elemen lainnya di halaman. Anda tidak dapat melakukannya jika menggunakan elemen img untuk menampilkan ikon.

Pada contoh berikut, elemen rect di dalam SVG memiliki nilai fill blue agar cocok dengan gaya untuk 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;
}

Resource

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

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

Menguji pemahaman Anda

Menguji pengetahuan Anda tentang ikon