Como inserir SVG num documento HTML?

Existem várias formas de inserir SVG no HTML:

• SVG em linha: Inserção do código SVG diretamente no HTML usando a tag <svg>.
• Tag <img>: Uso da tag <img> com o atributo src apontando para o arquivo SVG.
• Tag <object>: Inserção de SVG usando a tag <object>.
• Tag <embed>: Inserção de SVG usando a tag <embed>.
• CSS: Uso do SVG como imagem de fundo através do CSS.
• <iframe>: Inserção de uma página HTML com SVG usando <iframe>.

Cada método tem suas características e vantagens:

Método	Vantagens	Desvantagens	Uso
SVG em linha	Controle total, interatividade JS/CSS	Aumento do tamanho do HTML, complexidade de cache	SVG pequenos e que mudam frequentemente, ícones
<img>	Facilidade, cache	Controle limitado, sem interatividade JS	Imagens estáticas
<object>	Semântica (objeto externo), interatividade JS	Um pouco mais complexo que <img>, suporte em navegadores	SVG complexos, conteúdo alternativo
<embed>	Mais simples que <object>, suporte em plugins antigos	Não recomendado em HTML5	Compatibilidade com código antigo
CSS Background	Posicionamento flexível, sem tags adicionais no HTML	Sem interatividade JS, controle limitado	Elementos decorativos, padrões
<iframe>	Isolamento completo, carregamento de página separado	Sobrecarga, dificuldades na interação	Inserção de elementos complexos e independentes

Exemplo de SVG em linha:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Exemplo de uso da tag <img>:

<img src="image.svg" alt="Descrição SVG">

Exemplo de uso da tag <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Conteúdo alternativo -->
  <img src="image.png" alt="Imagem alternativa">
</object>

Exemplo de uso de CSS:

.element {
  background-image: url('image.svg'); // Uso do SVG como fundo
  background-size: cover; // Estilização de exemplo
}