Is formáid íomhá veicteora (bunaithe ar XML) a bhíonn i SVG, mar sin déanann sé scálú go dtí aon mhéid gan doilíonn a dhéanamh. Is féidir leat a áireamh ar dhá phríomhbhealach, agus baint ag gach ceann acu.
Inline SVG — marcáil go díreach san HTML
Is formáid íomhá veicteora (bunaithe ar XML) a bhíonn i SVG, mar sin déanann sé scálú go dtí aon mhéid gan doilíonn a dhéanamh. Is féidir leat a áireamh ar dhá phríomhbhealach, agus baint ag gach ceann acu.
Buntáistí: is féidir leat a stíleáil le CSS (fill, stroke), codanna a bhogadh, dath a athrú trí currentColor (oidhreacht dath an téacs), agus freagairt ar thimpeallachtaí — toisc gur fíor-DOM a bhí ann. Gan iarratas HTTP breise.
Míbhuntáistí: soladh an HTML, nach bhfuil i dtaisce ar leith, déanann dúblacht arna agus marcáil dhúblach.
<img> — tagartha mar chomhad<img src="logo.svg" alt="Company logo" width="120" />
Buntáistí: i dtaisce ag an brabhsálaí, HTML geal a choinneáil, simplí. Míbhuntáistí: ní féidir leat a ghutháin inmheánacha a stíleáil nó a script le do CSS/JS — is íomhá dhorcha a bhí ann.
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 -->
Baineann an rogha idir SVG i líne agus <img> leis an gceist: ar gá duit an ghrafaic a stíleáil/bhogadh (i líne) nó go simplí a thaispeáint go héifeachtach (<img>).
Iconanna a bhíonn ag athrú datha ar foluain nó de réir an téama ag dul i líne (go minic mar bhunanna); soláistí branda statach ag dul trí <img>.
I gcomh-aon bhealach, fanann veicteoirí geal ag gach taifeach — oiriúnach do dheilbhíní agus logónna.