SVG minangka format gambar vektor (berbasis XML), mula skalabel menyang ukuran apa wae tanpa burem. Sampeyan bisa nglibatake kanthi rong cara utama, saben-saben kanthi trade-off.
Inline SVG — markup langsung ing HTML
html
Keuntungan: sampeyan bisa ngestili kanthi CSS (fill, stroke), nganimate bagian-bagiane, ngubah warna liwat currentColor (nyerap warna teks), lan nggatekake acara — amarga iku DOM nyata. Ora ana HTTP request tambahan.
Kerugian: nggadhang HTML, ora dicache kapisah-pisah, ikon sing diulang nggadhang markup.
<img> — direferensi minangka berkas<img src="logo.svg" alt="Company logo" width="120" />
Keuntungan: dicache dening browser, njaga HTML resik, sederhana. Kerugian: sampeyan ora bisa ngestili utawa scripting internale kanthi CSS/JS sampeyan — iku gambar opak.
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 -->
Ngusap inline versus <img> SVG minangka babagan apa sampeyan kudu ngestili/nganimate grafis (inline) utawa mung nampilake kanthi efisien (<img>).
Ikon sing nggawe owah warna ing hover utawa tema tindak inline (asring minangka komponen); aset brand statis tindak liwat <img>.
Saben carane, vektor tetep tajam ing saben resolusi — ideal kanggo ikon lan logo.