SVG to wektorowy format obrazu (oparty na XML), więc skaluje się do dowolnego rozmiaru bez rozmazania. Możesz go dołączyć na dwa główne sposoby, każdy z kompromisami.
Inline SVG — znaczniki bezpośrednio w HTML
html
Zalety: możesz go stylizować za pomocą CSS (fill, stroke), animować jego części, zmieniać kolor za pomocą currentColor (dziedziczy kolor tekstu) i reagować na zdarzenia — ponieważ jest to rzeczywisty DOM. Brak dodatkowych żądań HTTP.
Wady: powiększa HTML, nie jest buforowany osobno, powtarzane ikony powielają znaczniki.
<img> — odwołanie do pliku<img src="logo.svg" alt="Company logo" width="120" />
Zalety: buforowane przez przeglądarkę, utrzymuje HTML czysty, proste. Wady: nie możesz stylizować ani skryptować jego wnętrza za pomocą CSS/JS — jest to nieprzezroczysty obraz.
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 -->
Wybór między inline i <img> SVG sprowadza się do tego, czy musisz stylizować/animować grafikę (inline) czy po prostu ją wyświetlać wydajnie (<img>).
Ikony, które zmieniają kolor przy najechaniu lub zmienia się temat, idą do inline (często jako komponenty); statyczne zasoby marki idą przez <img>.
W każdym razie wektory pozostają ostre w każdej rozdzielczości — idealne dla ikon i logo.