SVG is a vector image format (XML-based), so it scales to any size without blurring. You can include it two main ways, each with trade-offs.
Inline SVG — markup directly in the HTML
Pros: you can style it with CSS (fill, stroke), animate its parts, change color via currentColor (inherits text color), and respond to events — because it's real DOM. No extra HTTP request.
Cons: bloats the HTML, not cached separately, repeated icons duplicate markup.
<img> — referenced as a file<img src="logo.svg" alt="Company logo" width="120" />
Pros: cached by the browser, keeps HTML clean, simple. Cons: you cannot style or script its internals with your CSS/JS — it's an 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 -->
Choosing inline vs <img> SVG comes down to whether you need to style/animate the graphic (inline) or just display it efficiently (<img>).
Icons that change color on hover or theme go inline (often as components); static brand assets go via <img>.
Either way, vectors stay crisp at every resolution — ideal for icons and logos.