SVG ialah format imej vektor (berasaskan XML), jadi ia berskala ke sebarang saiz tanpa menjadi kabur. Anda boleh memasukkannya dalam dua cara utama, masing-masing dengan pertukaran nilainya.
SVG sebaris — markup terus dalam HTML
html
SVG ialah format imej vektor (berasaskan XML), jadi ia berskala ke sebarang saiz tanpa menjadi kabur. Anda boleh memasukkannya dalam dua cara utama, masing-masing dengan pertukaran nilainya.
Kelebihan: anda boleh menggayakannya dengan CSS (fill, stroke), menganimasikan bahagiannya, menukar warna melalui currentColor (mewarisi warna teks), dan bertindak balas terhadap peristiwa — kerana ia ialah DOM sebenar. Tiada permintaan HTTP tambahan.
Kekurangan: membengkakkan HTML, tidak dicache secara berasingan, ikon berulang menduplikasi markup.
<img> — dirujuk sebagai fail<img src="logo.svg" alt="Company logo" width="120" />
Kelebihan: dicache oleh pelayar, mengekalkan HTML kemas, mudah. Kekurangan: anda tidak boleh menggayakan atau menskripkan bahagian dalamnya dengan CSS/JS anda — ia ialah imej legap.
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 SVG sebaris berbanding <img> bergantung pada sama ada anda perlu menggayakan/menganimasikan grafik tersebut (sebaris) atau hanya memaparkannya dengan cekap (<img>).
Ikon yang menukar warna apabila dihover atau bertukar tema diletakkan sebaris (selalunya sebagai komponen); aset jenama statik diletakkan melalui <img>.
Walau apa pun, vektor kekal tajam pada setiap resolusi — sesuai untuk ikon dan logo.