SVG este un format de imagine vectorial (bazat pe XML), deci se scalează la orice dimensiune fără să se estompeze. Îl poți include în două moduri principale, fiecare cu compromisuri.
SVG inline — marcaj direct în HTML
html
Avantaje: poți să-l stilizezi cu CSS (fill, stroke), să-i animezi părțile, să-i schimbi culoarea prin currentColor (moștenește culoarea textului), și să reacționezi la evenimente — deoarece este DOM real. Nicio cerere HTTP suplimentară.
Dezavantaje: umflă HTML-ul, nu este stocat în cache separat, pictogramele repetate duplică marcajul.
<img> — referențiat ca fișier<img src="logo.svg" alt="Company logo" width="120" />
Avantaje: stocat în cache de browser, ține HTML-ul curat, simplu. Dezavantaje: nu poți să-i stilizezi sau să-i programezi interiorul cu CSS/JS-ul tău — este o imagine opacă.
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 -->
Alegerea dintre SVG inline și <img> se rezumă la faptul dacă trebuie să stilizezi/animezi graficul (inline) sau doar să-l afișezi eficient (<img>).
Pictogramele care-și schimbă culoarea la hover sau tema merg inline (adesea ca componente); activele de marcă statice merg prin <img>.
Oricum, vectorii rămân ascuțiți la fiecare rezoluție — ideal pentru pictograme și logo-uri.