SVG (Scalable Vector Graphics) este standardul web pentru grafica vectorială bazată pe XML. Prin includerea tagului <svg> direct în codul HTML (Inline SVG), elementele grafice (linii, cercuri, curbe complexe definite prin <path>) devin noduri reale în arborele DOM, putând fi manipulate, animate și stilizate nativ prin CSS și JavaScript.
Exemplu: Iconiță vectorială de validare (Checkmark) cu atribute de accesibilitate
<!-- SVG Inline accesibil cu role="img" și titlu semantic -->
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="titlu-succes">
<title id="titlu-succes">Operațiune finalizată cu succes</title>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<!-- SVG decorativ: când este însoțit de text vizibil, ascundem SVG-ul de screen readers -->
<button type="button">
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor" aria-hidden="true">
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
</svg>
Adaugă în coș
</button>De ce este SVG Inline superior imaginilor raster (PNG / WebP)
- Scalabilitate infinită: Rămâne perfect clar la orice nivel de zoom pe ecrane Retina și 4K, fără a crește dimensiunea fișierului.
- Control prin CSS: Poți schimba culoarea de umplere folosind valoarea specială
fill: currentColor(moștenește automat culoarea textului din buton sau link). - Zero cereri HTTP suplimentare: Fiind inclus direct în HTML, elimină latența unei descărcări separate de rețea.