HTML Academy · Pelajaran

SVG Inline vs img dan object

Pilih metode penyematan SVG yang tepat untuk kebutuhan Anda.

SVG Inline vs img dan object adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Tiga Cara Menyematkan SVG

SVG (Grafik Vektor Terukur) dapat disematkan dengan tiga cara:

<img src="icon.svg"> — sederhana, tersimpan di cache, tanpa akses JS/CSS
<object data="chart.svg"> — interaksi sebaris, dokumen terpisah
SVG sebaris di dalam HTML — akses CSS/JS penuh, tanpa permintaan tambahan

SVG dengan img src

Metode paling sederhana: rujuk SVG sebagai gambar:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG background-image CSS

Gunakan SVG sebagai latar belakang CSS untuk ikon dekoratif:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

SVG dengan Elemen object

Sematkan SVG dengan <object> untuk SVG interaktif:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

SVG Sebaris

Sematkan SVG secara langsung di dalam HTML untuk mendapatkan kendali penuh:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Keunggulan SVG Sebaris

Mengapa menggunakan SVG sebaris:

Pemformatan CSS penuh: fill, stroke, transisi, animasi
Interaksi JavaScript: pilih elemen SVG, dengarkan peristiwa
currentColor: mewarisi warna dari CSS induk
Tanpa permintaan HTTP tambahan
Dapat menjadi bagian dari pohon aksesibilitas dengan atribut role dan title

Kekurangan SVG Sebaris

Kekurangan SVG sebaris:

Berkas HTML menjadi lebih besar
Tidak di-cache secara terpisah oleh peramban
Sulit menggunakan kembali SVG yang sama di beberapa halaman tanpa duplikasi
Pengulangan kode untuk ikon yang berulang

Elemen use untuk Sprite

Tentukan ikon SVG satu kali, lalu rujuk dengan <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

SVG yang Aksesibel

Jadikan SVG sebaris aksesibel:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

Trik currentColor

Gunakan currentColor untuk mewarisi warna teks dari CSS:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Pemeriksaan Singkat

Apa keunggulan utama SVG sebaris dibandingkan penggunaan SVG melalui img src?

Rekap: Penyematan SVG

Hal-hal penting dalam penyematan SVG:

<img src> — sederhana; tanpa akses CSS/JS; di-cache
Latar belakang CSS — hanya untuk dekorasi
<object data> — SVG interaktif; agak terisolasi
SVG sebaris — kendali CSS/JS penuh; tanpa permintaan tambahan
Sprite SVG dengan <symbol> + <use> — penggunaan kembali yang efisien

Pertanyaan yang Sering Diajukan

Apakah pelajaran “SVG Inline vs img dan object” gratis?

Ya — teks lengkap “SVG Inline vs img dan object” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “SVG Inline vs img dan object”?

Pilih metode penyematan SVG yang tepat untuk kebutuhan Anda. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “SVG Inline vs img dan object” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy