SVG é um formato de imagem vetorial (baseado em XML), portanto, dimensiona para qualquer tamanho sem ficar desfocado. Você pode incluí-lo de duas formas principais, cada uma com desvantagens.
SVG inline — marcação diretamente no HTML
html
Vantagens: você pode estilizá-lo com CSS (fill, stroke), animar suas partes, mudar a cor via currentColor (herda a cor do texto) e responder a eventos — porque é DOM real. Nenhuma solicitação HTTP extra.
Desvantagens: incha o HTML, não é armazenado em cache separadamente, ícones repetidos duplicam marcação.
<img> — referenciado como um arquivo<img src="logo.svg" alt="Company logo" width="120" />
Vantagens: armazenado em cache pelo navegador, mantém HTML limpo, simples. Desvantagens: você não pode estilizar ou manipular seu conteúdo interno com seu CSS/JS — é uma imagem opaca.
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 -->
Escolher entre SVG inline versus <img> depende de você precisar estilizar/animar o gráfico (inline) ou apenas exibi-lo com eficiência (<img>).
Ícones que mudam de cor ao passar o mouse ou ao mudar o tema vão inline (geralmente como componentes); ativos de marca estática vão via <img>.
De qualquer forma, vetores permanecem nítidos em todas as resoluções — ideais para ícones e logotipos.