Pengenalan SVG

Pada section Images dan Media, kita menampilkan foto lewat elemen img dengan file JPG atau PNG: keduanya tersusun atas kisi piksel yang ukurannya tetap. Ketika gambar raster diperbesar, piksel ikut membesar dan tepi bentuk terlihat buram. Untuk logo, ikon, dan diagram, HTML menyediakan pilihan lain bernama SVG, format gambar yang menyimpan deskripsi bentuk alih-alih kisi piksel. Chapter ini membahas definisi SVG, keunggulannya, struktur dasar file-nya, dan menutup dengan logo pertama yang kita buat sebagai file .svg lalu tampilkan lewat img.

SVG, Format Gambar Berbasis XML #

SVG adalah singkatan dari Scalable Vector Graphics, format gambar yang ditulis sebagai dokumen XML. Sebuah file SVG tidak berisi piksel, melainkan teks markup yang mendeskripsikan bentuk, misalnya “ada lingkaran di titik tengah dengan jari-jari 48 berwarna hijau”. Browser membaca deskripsi tersebut lalu merender bentuknya pada ukuran berapa pun, sehingga gambar tetap tajam saat diperbesar. Kata vector merujuk pada pendekatan ini: gambar dinyatakan sebagai koordinat dan bentuk geometris, bukan kisi titik warna.

Perbedaannya dengan format raster mudah dipetakan:

Karena berbasis teks, SVG membawa keunggulan praktis:

• File dapat dibuka dan disunting di editor teks biasa;
• Ukuran file kecil untuk bentuk sederhana, sehingga hemat payload halaman;
• Bentuk di dalamnya dapat di-style dengan CSS dan dianimasikan;
• Teks di dalam SVG tetap terbaca mesin, berguna untuk aksesibilitas.

Struktur Dasar File SVG #

Sebagai latihan pertama, kita membuat logo lingkaran untuk warung Siti sebagai file .svg di folder chapter ini:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="Logo Warung Siti">
  <title>Logo Warung Siti</title>
  <circle cx="50" cy="50" r="48" fill="#1a6b54"/>
  <circle cx="50" cy="50" r="36" fill="none" stroke="#f3f4f6" stroke-width="3"/>
  <text x="50" y="63" text-anchor="middle" font-family="Arial, sans-serif" font-size="36" font-weight="bold" fill="#f3f4f6">S</text>
</svg>

Output yang Dihasilkan:

Logo berbentuk cakram hijau dengan ring terang dan
huruf "S" putih di tengah, berukuran 100x100 piksel.

Mari kita bedah perannya:

1. Baris 1 (elemen svg akar): container yang membuka dokumen SVG dan menetapkan area gambar; MDN mendeskripsikannya sebagai pembentuk sistem koordinat dan viewport baru.
2. Atribut xmlns: namespace XML yang wajib ada pada file SVG mandiri; MDN mencatat atribut ini hanya diperlukan pada elemen svg terluar, sedangkan SVG inline di dalam HTML dapat melewatkannya.
3. Atribut viewBox="0 0 100 100": sistem koordinat internal 100x100 unit; seluruh bentuk di dalamnya memakai koordinat pada sistem ini, terlepas dari ukuran tampil akhirnya.
4. Atribut width dan height: ukuran tampil gambar; keduanya berbeda peran dari viewBox yang mengatur koordinat internal.
5. Baris 1 (atribut role dan aria-label): memberi nama aksesibel bagi assistive technology.
6. Baris 2 (elemen title): judul dokumen SVG yang menjadi nama bawaan gambar.
7. Baris 3-4 (elemen circle): cakram hijau utama dan ring terang di atasnya; cx dan cy menetapkan pusat, r jari-jari, fill warna isi, dan stroke warna garis tepi.
8. Baris 5 (elemen text): huruf “S” di tengah; text-anchor="middle" membuat teks rata tengah terhadap koordinat x.

Menampilkan File SVG lewat img #

File SVG dipakai persis seperti file JPG: arahkan src elemen img ke file tersebut. Atribut alt tetap wajib berisi pengganti teks yang bermakna, dan pasangan width dengan height menahan ruang gambar. Contoh berikut menampilkan logo pada dua ukuran berbeda dari satu file yang sama:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Logo Warung Siti</title>
</head>
<body>
  <h1>Warung Siti</h1>
  <p>Soto ayam hangat setiap pagi di Jl. Melati No. 10.</p>
  <img src="logo-warung.svg" alt="Logo Warung Siti" width="96" height="96">
  <h2>Ukuran berbeda, satu file</h2>
  <p>File yang sama tetap tajam pada ukuran besar:</p>
  <img src="logo-warung.svg" alt="Logo Warung Siti pada ukuran besar" width="192" height="192">
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Warung Siti" dan satu paragraf alamat
  - Logo 96x96 di bawah paragraf
  - Logo yang sama pada ukuran 192x192, tetap tajam tanpa buram

Mari kita perhatikan baris-baris pentingnya:

1. Baris 9-10 (h1 dan p): konten teks halaman; informasi penting tetap berbentuk teks.
2. Baris 11 (img pertama): src menunjuk file SVG, alt memberi pengganti teks, dan width serta height menahan ruang 96x96.
3. Baris 14 (img kedua): file yang sama dimuat lagi pada ukuran 192x192; kualitas tetap sama karena gambar dirender ulang dari deskripsi vektor, bukan diperbesar dari piksel.
4. Tidak ada atribut khusus SVG: browser mengenali tipe image/svg+xml dari file, sehingga markup sama seperti saat memuat PNG.

File logo di atas tampil dari dokumen terpisah yang diminta browser sendiri. Cara kedua menempelkan kode SVG langsung ke dalam dokumen HTML; pola itu membawa manfaat dan risiko berbeda yang kita bahas di chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen svg
• MDN Web Docs — Tutorial SVG
• MDN Web Docs — Jenis file gambar

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Logo Warung Siti</title>
</head>
<body>
  <h1>Warung Siti</h1>
  <p>Soto ayam hangat setiap pagi di Jl. Melati No. 10.</p>
  <img src="logo-warung.svg" alt="Logo Warung Siti" width="96" height="96">
  <h2>Ukuran berbeda, satu file</h2>
  <p>File yang sama tetap tajam pada ukuran besar:</p>
  <img src="logo-warung.svg" alt="Logo Warung Siti pada ukuran besar" width="192" height="192">
</body>
</html>