Ikon

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

Scalable Vector Graphics

Untuk gambar fotografi, ada banyak pilihan 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 sama-sama bagus 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, SVG tersebut responsif secara default.

PNG (dan JPG, WebP, serta AVIF) adalah gambar bitmap. Gambar bitmap menyimpan informasi sebagai piksel. Dalam SVG, informasi disimpan sebagai petunjuk gambar. Saat browser membaca file SVG, petunjuk akan dikonversi menjadi piksel. Yang terbaik, 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 berbeda, Anda dapat membuat satu SVG yang akan berfungsi di 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 petunjuk 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, berarti ada satu permintaan lebih sedikit yang perlu dilakukan browser. Tidak akan ada penantian untuk mendownload gambar karena gambar tiba bersama HTML …di dalam HTML. Selain itu, seperti yang akan segera Anda ketahui, menyematkan SVG seperti ini juga memberi Anda lebih banyak kontrol atas penataannya.

Ikon dan teks

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

Jika Anda memiliki tombol atau link dengan teks dan ikon di dalamnya, ikon tersebut bersifat presentasi. Teksnya yang penting. Saat menggunakan elemen img, atribut alt yang kosong menunjukkan bahwa gambar bersifat presentasi.

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

Karena CSS digunakan 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, tetapi jangan menganggap 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 label aksesibilitas di HTML.

Jika Anda menggunakan elemen img, ikon akan mendapatkan label aksesibilitas dari atribut alt.

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

Opsi lainnya adalah menempatkan nama yang dapat diakses pada link atau tombol itu sendiri dan menyatakan bahwa gambar bersifat presentasi. Gunakan atribut aria-label untuk memberikan label aksesibilitas.

<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 label aksesibilitas 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>

Memberi gaya pada ikon

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

Dalam contoh berikut, elemen rect di dalam SVG memiliki nilai fill blue agar sesuai 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 belakang 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 menandai 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. Selanjutnya, Anda akan mengetahui cara membuat aspek branding lainnya menjadi responsif melalui kekuatan tema.

Uji pemahaman Anda

Uji pengetahuan Anda tentang ikon