Inline SVG

Chapter Pengenalan SVG menempatkan kode SVG di file terpisah yang dimuat lewat img. Pilihan kedua menyusul: elemen svg dapat ditulis langsung di dalam dokumen HTML, tanpa file tambahan sama sekali. Pola ini disebut inline SVG; bentuk-bentuknya menjadi bagian dari DOM halaman, sama seperti elemen p atau span. Chapter ini membahas cara menulisnya, manfaat dan kontranya, aksesibilitasnya, serta ikon nyata yang di-style lewat class.

Elemen svg di Dalam Dokumen HTML #

Elemen svg beserta isinya boleh ditulis di mana saja di dalam body. Browser menguraikan markup tersebut menjadi simpel-simpel DOM (circle, path, text) yang bisa dipilih dengan selector dan diubah dengan JavaScript. Satu perbedaan mencolok dari file mandiri: atribut xmlns boleh ditinggalkan, karena MDN mencatat atribut tersebut hanya wajib pada elemen svg terluar dalam dokumen XML; di dalam HTML, svg memang bagian dari bahasa markup halaman.

<svg class="ikon" viewBox="0 0 24 24" width="18" height="18" role="img" aria-label="Alamat">
  <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7z" fill="currentColor"/>
</svg>

Mari kita perhatikan bagiannya:

1. viewBox="0 0 24 24": koordinat internal 24x24 unit, ukuran lazim untuk set ikon.
2. width dan height: ukuran tampil ikon 18x18 piksel; rasio keduanya sejajar dengan viewBox agar bentuk tidak terpenjaskan.
3. role="img" dengan aria-label: menyatakan keseluruhan svg sebagai satu gambar bernama “Alamat” bagi assistive technology.
4. fill="currentColor": warna bentuk mengikuti properti CSS color pada elemen tersebut, membuka pintu styling lewat class.

Manfaat dan Kontra Inline SVG #

Perbandingan dengan pola file terpisah memetakan keputusan desain kita:

Manfaat terbesarnya ada pada styling dan interaksi: satu class CSS dapat mengubah warna ikon, dan state seperti :hover bekerja tanpa JavaScript. Kontranya dua sisi: markup panjang ikut menumpuk dokumen HTML, dan ikon yang dipakai di sepuluh halaman tidak ter-cache sebagai file terpisah.

Memberi Nama bagi Inline SVG #

Inline SVG terekspos ke accessibility tree, sehingga pembaca layar menemukan simpel-simpel bentuknya. Tanpa nama, isi tampil sebagai kumpulan grafik tanpa makna. Praktik yang diandalkan: beri role="img" pada elemen svg lalu pasang satu nama lewat aria-label, atau rujuk elemen title dan desc di dalam SVG lewat aria-labelledby seperti pada chapter Penggunaan ARIA:

<svg viewBox="0 0 24 24" role="img" aria-labelledby="judul-ikon ket-ikon">
  <title id="judul-ikon">Ikon lokasi</title>
  <desc id="ket-ikon">Pin menandai alamat toko pada peta.</desc>
  <path d="..." fill="currentColor"/>
</svg>

title memberi nama singkat, sedangkan desc menampung penjelasan lebih panjang; keduanya dibaca sesuai urutan pada aria-labelledby. Untuk ikon dekoratif yang tidak membawa informasi, biarkan svg tanpa nama dan tutup aksesibilitasnya dengan aria-hidden="true".

Contoh Lengkap: Ikon dengan Styling Class #

File berikut merangkai pola di atas: dua ikon yang berbagi class .ikon, warna dari CSS, dan perubahan warna saat kursor menyentuh kartu:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Kontak Toko</title>
  <style>
    .ikon {
      color: #1a6b54;
      vertical-align: -3px;
    }
    .kartu:hover .ikon {
      color: #0f4c3a;
    }
  </style>
</head>
<body>
  <h1>Kartu Kontak Toko</h1>
  <p class="kartu">
    <svg class="ikon" viewBox="0 0 24 24" width="18" height="18" role="img" aria-label="Alamat">
      <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="currentColor"/>
    </svg>
    Jl. Melati No. 10, Bandung
  </p>
  <p class="kartu">
    <svg class="ikon" viewBox="0 0 24 24" width="18" height="18" role="img" aria-label="Jam buka">
      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M12 6v6l4 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
    Buka 08.00-16.00 WIB
  </p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Kartu Kontak Toko"
  - Baris ikon pin hijau diikuti "Jl. Melati No. 10, Bandung"
  - Baris ikon jam hijau diikuti "Buka 08.00-16.00 WIB"
  - Saat kursor menyentuh salah satu baris, ikon pada baris itu menjadi hijau lebih gelap

Mari kita bedah kuncinya:

1. Baris 7-15 (blok style): class .ikon menetapkan color hijau; karena bentuk memakai currentColor, warna mengalir dari CSS ke dalam ikon tanpa menyentuh markup.
2. Baris 12-14 (:hover): saat kursor berada di atas p.kartu, warna .ikon berganti gelap; perubahan ini mustahil dari CSS halaman bila ikon dimuat lewat img.
3. Baris 20-22 (svg pin): satu path membentuk pin; role="img" dan aria-label="Alamat" memberinya nama.
4. Baris 26-29 (svg jam): lingkaran sebagai papan jam dan dua path sebagai jarum; kedua bentuk memakai currentColor pada fill maupun stroke.
5. Baris 19 dan 25 (p class="kartu"): dua kartu berbagi class yang sama, sehingga satu aturan CSS melayani keduanya; inilah untung ikon yang hidup di dalam DOM.

Ikon di atas tampil tanpa satu permintaan gambar pun, tetapi markupnya ikut menumpuk dokumen. Untuk gambar yang dipakai lintas halaman atau berasal dari pihak ketiga, pola file terpisah kembali menjadi pilihan; chapter berikutnya membahasnya dari sisi caching dan keamanan.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen svg
• MDN Web Docs — ARIA: role img
• MDN Web Docs — Tutorial SVG

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Kontak Toko</title>
  <style>
    .ikon {
      color: #1a6b54;
      vertical-align: -3px;
    }
    .kartu:hover .ikon {
      color: #0f4c3a;
    }
  </style>
</head>
<body>
  <h1>Kartu Kontak Toko</h1>
  <p class="kartu">
    <svg class="ikon" viewBox="0 0 24 24" width="18" height="18" role="img" aria-label="Alamat">
      <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="currentColor"/>
    </svg>
    Jl. Melati No. 10, Bandung
  </p>
  <p class="kartu">
    <svg class="ikon" viewBox="0 0 24 24" width="18" height="18" role="img" aria-label="Jam buka">
      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
      <path d="M12 6v6l4 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
    Buka 08.00-16.00 WIB
  </p>
</body>
</html>