Kapan kudu nggunakake inline SVG versus img?

Question

IT Interview Practice · Accepted Answer

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. ## SVG liwat `` — direferensi minangka berkas ```html

``` **Keuntungan:** dicache dening browser, njaga HTML resik, sederhana. **Kerugian:** sampeyan **ora bisa** ngestili utawa scripting internale kanthi CSS/JS sampeyan — iku gambar opak. ## Panduan keputusan ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Aksesibilitas ```html ``` ## Apa alasane penting Ngusap inline versus `` SVG minangka babagan apa sampeyan kudu **ngestili/nganimate** grafis (inline) utawa mung **nampilake** kanthi efisien (``). Ikon sing nggawe owah warna ing hover utawa tema tindak inline (asring minangka komponen); aset brand statis tindak liwat ``. Saben carane, vektor tetep tajam ing saben resolusi — ideal kanggo ikon lan logo.

Kapan kudu nggunakake inline SVG versus img?

Inline SVG — markup langsung ing HTML

SVG liwat `<img>` — direferensi minangka berkas

Panduan keputusan

Aksesibilitas

Apa alasane penting

Pitakon sing gegandhengan

Inline SVG — markup langsung ing HTML

SVG liwat <img> — direferensi minangka berkas

Panduan keputusan

Aksesibilitas

Apa alasane penting

Pitakon sing gegandhengan

SVG liwat `<img>` — direferensi minangka berkas