Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

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.

Catatan: Atribut alt kosong tidak sama dengan atribut alt yang tidak ada. Selalu berikan atribut alt meskipun gambar bersifat presentasi dan atribut alt tidak memiliki konten.

<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.

Catatan: Biasanya atribut alt menjelaskan konten gambar (“Tiga garis horizontal.”) tetapi dengan ikon mandiri, atribut alt menjelaskan arti gambar (“Menu”).

<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

SVG dapat menangani kepadatan piksel apa pun dengan satu file tunggal atau blok kode <svg>.

Benar

SVG mencakup cara menggambar bentuk dan garis, pada segala kepadatan piksel atau skala atau zoom.

Salah

Tidak seperti .png atau .jpg, SVG tidak memerlukan elemen srcset atau <picture>.

Apa kelebihan kode SVG yang langsung ada di HTML?

Dapat ditata dari CSS

Cocokkan bentuk ikon SVG dengan tombol dan warna merek.

Tidak perlu download.

Semua petunjuknya ada di sana.

Lambat dimuat secara default.

Tidak ada download untuk malas.

Lebih sedikit penggunaan CPU.

Saya mengarangnya.

Bertema terang atau gelap tanpa aset baru.

Kueri media dapat mengubah gaya SVG inline.