SVG adalah format gambar vektor (berbasis XML), jadi ini diskalakan ke ukuran apa pun tanpa blur. Anda dapat menyertakannya dengan dua cara utama, masing-masing dengan trade-off.
Inline SVG — markup langsung di HTML
html
Keuntungan: Anda dapat menata gayanya dengan CSS (fill, stroke), menganimasikan bagian-bagiannya, mengubah warna melalui currentColor (mewarisi warna teks), dan merespons peristiwa — karena ini adalah DOM nyata. Tidak ada permintaan HTTP tambahan.
Kerugian: membengkak HTML, tidak di-cache secara terpisah, ikon berulang menduplikasi markup.
<img> — dirujuk sebagai file<img src="logo.svg" alt="Company logo" width="120" />
Keuntungan: di-cache oleh browser, menjaga HTML tetap bersih, sederhana. Kerugian: Anda tidak dapat menata gaya atau melakukan skrip internalnya dengan CSS/JS Anda — itu adalah gambar buram.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Memilih inline vs <img> SVG tergantung pada apakah Anda perlu menata gaya/menganimasikan grafik (inline) atau hanya menampilkannya secara efisien (<img>).
Ikon yang mengubah warna saat dihover atau tema masuk inline (sering kali sebagai komponen); aset merek statis menggunakan <img>.
Dengan cara apa pun, vektor tetap tajam pada setiap resolusi — ideal untuk ikon dan logo.