SVG huwa format ta' immaġni vettorjali (ibbażat fuq XML), għalhekk jiskala għal kull daqs mingħajr blurring. Tista' tinkludi dan b'żewġ modi ewlenin, kull wieħed bil-kompromessi tiegħu.
Inline SVG — markup direttament fil-HTML
html
Prox: tista' tistilujaħ b'CSS (fill, stroke), tanimah l-partijiet tiegħu, ibdel il-kulur via currentColor (jieħu l-kulur tat-test), u tirrispondi għall-avvenimenti — minħabba li huwa DOM reali. Ebda talba HTTP żejda.
Kontra: tḍaqqal l-HTML, mhux cached separatament, ikoniet ripetuti jiddupplikaw il-markup.
<img> — mirreferen bħala file<img src="logo.svg" alt="Company logo" width="120" />
Prox: cached mill-browser, żomm il-HTML nadif, sempliċi. Kontra: ma tistax tistilujaħ jew tiscritti l-internals tiegħu b'CSS/JS tiegħek — huwa immaġni opaka.
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 -->
Il-għażla bejn inline versus <img> SVG tinqasam fuq jekk għandek bżonn tistilujaħ/tanimah il-grafika (inline) jew sempliċement tispjega din b'mod effiċjenti (<img>).
Ikoniet li jibdlu l-kulur fuq hover jew theme imorru inline (ħafna drabi bħala komponenti); assets statici ta' brand imorru via <img>.
B'kull mod, il-vettori jibqgħu ċari f'kull risoluzzjoni — ideali għal ikoniet u logos.