Dua pola pemakaian SVG telah kita bahas: file terpisah pada chapter Pengenalan SVG dan inline pada chapter sebelumnya. Untuk gambar yang dipakai di banyak halaman, pola file terpisah justru yang paling lazim, dan pemegang perannya adalah elemen img. Browser memperlakukan file SVG sebagai satu jenis gambar di samping JPG, PNG, dan WebP. Chapter ini membahas manfaat caching dan isolasi keamanan pola ini, keterbatasan styling-nya, serta varian picture untuk fallback.

SVG lewat img #

Menampilkan SVG lewat img tidak menuntut sintaks baru: src menunjuk file .svg, alt berisi pengganti teks, dan width serta height menahan ruang. MDN mencantumkan SVG sebagai salah satu jenis file gambar yang didukung browser, sehingga seluruh pengetahuan kita pada section Images dan Media tetap berlaku:

html 
<img src="grafik-penjualan.svg"
     alt="Diagram batang penjualan buku: Januari 60, Februari 90, Maret 45, April 80 eksemplar"
     width="240" height="150">

File grafik yang dirujuk di atas kita buat sebagai file bundle .svg berisi lima rect dan empat text; markup lengkapnya tampil pada contoh akhir chapter ini.

Manfaat File Terpisah: Caching dan Isolasi #

Menyimpan SVG sebagai file terpisah membawa dua keuntungan yang tidak dimiliki inline SVG:

  • Cache per file: browser menyimpan file SVG setelah unduhan pertama, lalu memakainya ulang di halaman lain tanpa mengunduh ulang; logo dan ikon lintas halaman paling diuntungkan.
  • Dokumen tetap ringkas: markup SVG yang panjang tidak menumpuk HTML, sehingga dokumen lebih mudah dibaca dan payload utamanya kecil.

Keuntungan ketiga bersifat keamanan. Standar WHATWG menetapkan bahwa user agent “must not run executable code embedded in the image resource”: script yang tertanam di dalam file SVG tidak dijalankan saat file dimuat lewat img. Elemen a, formulir, dan interaksi lain di dalam file juga tidak berfungsi, sedangkan animasi tetap dihormati sesuai ketentuan spesifikasi yang sama.

Batasan: CSS Halaman Tidak Menjangkau ke Dalam #

Harga dari isolasi itu adalah pemisahan penuh dari halaman. Selector CSS seperti .kartu svg circle tidak menemukan apa pun bila svg dimuat lewat img, karena isinya bukan bagian dari DOM halaman. Nilai currentColor pun kehilangan makna: warna bentuk tidak bisa mengikuti color teks halaman. Jika sebuah ikon perlu berganti warna saat state halaman berubah, pola inline SVG pada chapter sebelumnya adalah jawabannya; jika tidak, img cukup.

picture untuk Fallback #

Elemen picture yang kita kenal pada section Images dan Media bekerja dengan type="image/svg+xml": browser memilih sumber SVG bila mendukungnya, dan beralih ke img fallback bila tidak:

html 
<picture>
  <source type="image/svg+xml" srcset="grafik-penjualan.svg">
  <img src="grafik-penjualan.png"
       alt="Diagram batang penjualan buku" width="240" height="150">
</picture>

Pola ini menyisakan pekerjaan ganda bagi tim konten: fallback PNG tetap harus disiapkan bila target pengunjung mencakup lingkungan tanpa dukungan SVG, misalnya email klien lama. Untuk situs web biasa dengan browser modern, img biasa memakai file SVG tanpa perlu picture.

Satu celah lain untuk memakai SVG tanpa elemen img adalah properti CSS background-image: url('logo-warung.svg'), yang tepat untuk gambar dekoratif tanpa makna informasi sehingga tidak memerlukan alt.

Contoh Lengkap dalam Satu File #

File HTML berikut memuat grafik penjualan dua kali: sekali lewat img biasa, sekali lewat picture dengan fallback. File grafik-penjualan.svg berikut adalah resource bundle asli yang dirujuknya:

svg grafik-penjualan.svg 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 150" width="240" height="150" role="img" aria-label="Diagram batang penjualan buku Toko Budi, Januari hingga April">
  <title>Penjualan Buku Toko Budi</title>
  <rect x="10" y="10" width="220" height="120" fill="#f3f4f6"/>
  <rect x="30" y="70" width="36" height="60" fill="#1a6b54"/>
  <rect x="80" y="40" width="36" height="90" fill="#1a6b54"/>
  <rect x="130" y="85" width="36" height="45" fill="#1a6b54"/>
  <rect x="180" y="50" width="36" height="80" fill="#1a6b54"/>
  <text x="48" y="142" text-anchor="middle" font-size="11" fill="#6b7280">Jan</text>
  <text x="98" y="142" text-anchor="middle" font-size="11" fill="#6b7280">Feb</text>
  <text x="148" y="142" text-anchor="middle" font-size="11" fill="#6b7280">Mar</text>
  <text x="198" y="142" text-anchor="middle" font-size="11" fill="#6b7280">Apr</text>
</svg>
html contoh-svg-gambar.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Penjualan Buku</title>
</head>
<body>
  <h1>Laporan Penjualan Buku</h1>
  <p>Toko Budi mencatat penjualan empat bulan terakhir:</p>
  <img src="grafik-penjualan.svg" alt="Diagram batang penjualan buku: Januari 60, Februari 90, Maret 45, April 80 eksemplar" width="240" height="150">
  <h2>Versi dengan picture</h2>
  <picture>
    <source type="image/svg+xml" srcset="grafik-penjualan.svg">
    <img src="grafik-penjualan.png" alt="Diagram batang penjualan buku: Januari 60, Februari 90, Maret 45, April 80 eksemplar" width="240" height="150">
  </picture>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Laporan Penjualan Buku" dan satu paragraf pengantar
  - Diagram batang 240x150 dari file grafik-penjualan.svg
  - Diagram kedua di bawahnya, kali ini lewat picture dengan sumber SVG

Mari kita bedah baris-baris pentingnya:

  1. Baris 3-4 dan 6-10 pada file SVG (elemen rect): satu rect berfungsi sebagai latar terang, empat rect lain sebagai batang penjualan; tinggi setiap batang dibuat sebanding dengan angka penjualannya.
  2. Baris 11-14 pada file SVG (elemen text): empat label bulan; text-anchor="middle" menempatkan setiap label rata tengah terhadap batangnya.
  3. Baris 11 pada HTML (img pertama): satu file SVG dimuat persis seperti PNG, lengkap dengan alt yang merinci angka diagram sehingga informasinya tetap sampai tanpa gambar.
  4. Baris 13-16 (picture): source type="image/svg+xml" menjadi pilihan utama, dan img fallback di bawahnya berlaku bila lingkungan pengunjung tidak mendukung SVG.
  5. File fallback grafik-penjualan.png: nama file hipotetis yang perlu pembaca siapkan sendiri; validator tidak memeriksa keberadaan file gambar, sehingga contoh tetap valid.

Grafik di atas dirender dari deskripsi bentuk, tetapi sekali tampil, isinya beku: tidak ada interaksi, dan CSS halaman tidak bisa menyentuh batangnya. Chapter berikutnya memperkenalkan pendekatan yang berlawanan sepenuhnya: canvas, kanvas piksel kosong yang seluruh isinya digambar oleh JavaScript.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-svg-gambar.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Penjualan Buku</title>
</head>
<body>
  <h1>Laporan Penjualan Buku</h1>
  <p>Toko Budi mencatat penjualan empat bulan terakhir:</p>
  <img src="grafik-penjualan.svg" alt="Diagram batang penjualan buku: Januari 60, Februari 90, Maret 45, April 80 eksemplar" width="240" height="150">
  <h2>Versi dengan picture</h2>
  <picture>
    <source type="image/svg+xml" srcset="grafik-penjualan.svg">
    <img src="grafik-penjualan.png" alt="Diagram batang penjualan buku: Januari 60, Februari 90, Maret 45, April 80 eksemplar" width="240" height="150">
  </picture>
</body>
</html>