¿Cómo se puede insertar SVG en un documento HTML?

Existen varias formas de insertar SVG en HTML:

• SVG en línea: Inserción del código SVG directamente en HTML usando la etiqueta <svg>.
• Etiqueta <img>: Uso de la etiqueta <img> con el atributo src que apunta al archivo SVG.
• Etiqueta <object>: Inserción de SVG mediante la etiqueta <object>.
• Etiqueta <embed>: Inserción de SVG mediante la etiqueta <embed>.
• CSS: Uso de SVG como imagen de fondo a través de CSS.
• <iframe>: Inserción de una página HTML con SVG usando <iframe>.

Cada método tiene sus características y ventajas:

Método	Ventajas	Desventajas	Uso
SVG en línea	Control total, interactividad JS/CSS	Aumenta el tamaño del HTML, complejidad en caché	SVG pequeños y que cambian frecuentemente, íconos
<img>	Facilidad, caché	Control limitado, sin interactividad JS	Imágenes estáticas
<object>	Semántica (objeto externo), interactividad JS	Un poco más complejo que <img>, soporte en navegadores	SVG complejos, contenido alternativo
<embed>	Más simple que <object>, soporte en plugins antiguos	No recomendado en HTML5	Compatibilidad con código antiguo
CSS Background	Posicionamiento flexible, sin etiquetas adicionales en HTML	Sin interactividad JS, control limitado	Elementos decorativos, patrones
<iframe>	Aislamiento completo, carga de página independiente	Sobrecarga, dificultades en interacción	Inserción de elementos complejos e independientes

Ejemplo de SVG en línea:

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

Ejemplo de uso de <img>:

<img src="image.svg" alt="Descripción SVG">

Ejemplo de uso de <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Contenido alternativo -->
  <img src="image.png" alt="Imagen alternativa">
</object>

Ejemplo de CSS:

.element {
  background-image: url('image.svg'); /* Uso de SVG como fondo */
  background-size: cover; /* Ejemplo de estilizado */
}