SVG ఒక vector image format (XML-based), కాబట్టి ఇది ఏ పరిమాణానికైనా blurring లేకుండా స్కేల్ చేస్తుంది. మీరు దీన్ని రెండు ప్రధాన మార్గాల్లో చేర్చవచ్చు, ప్రతిదానికి trade-offs ఉన్నాయి.
Inline SVG — markup నేరుగా HTML లో
html
ప్రయోజనాలు: మీరు దీన్ని CSS (fill, stroke) ఉపయోగించి స్టైల్ చేయవచ్చు, దాని భాగాలను animate చేయవచ్చు, currentColor ద్వారా రంగును మార్చవచ్చు (text color ని inherit చేస్తుంది), మరియు events కు respond చేయవచ్చు — ఎందుకంటే ఇది real DOM. అదనపు HTTP request లేదు.
నష్టాలు: HTML ని bloat చేస్తుంది, separately cached చేయబడదు, repeated icons markup ను duplicate చేస్తుంది.
<img> — file గా referenced<img src="logo.svg" alt="Company logo" width="120" />
ప్రయోజనాలు: browser ద్వారా cached చేయబడుతుంది, HTML ను clean ఉంచుతుంది, simple. నష్టాలు: మీరు cannot దాని internals ను మీ CSS/JS ఉపయోగించి style లేదా script చేయవచ్చు — ఇది ఒక opaque image.
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 -->
Inline vs <img> SVG ఎంచుకోవడం అనేది మీరు graphic ను style/animate చేయవలసి ఉందా (inline) లేదా దీన్ని display చేయవలసి ఉందా (<img>) అనేదానిపై ఆధారపడి ఉంటుంది.
Hover లేదా theme లో color ను మార్చే icons inline కు చేరుతాయి (తరచుగా components గా); static brand assets <img> ద్వారా చేరుతాయి.
రెండు విధాలలోనూ, vectors ప్రతి resolution వద్ద crisp ఉంటాయి — icons మరియు logos కు ideal.