Como insertar un SVG en HTML (4 formas)
Guia para web
Hay varias maneras de mostrar un SVG en una pagina. Cada una sirve para un caso distinto. Aqui las cuatro mas comunes.
1. SVG inline (dentro del HTML)
Pegas el codigo <svg>...</svg> directo en el HTML.
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#6c8cff"/></svg>
Ventaja: lo controlas con CSS y JS (cambiar colores, animar). Ideal para iconos y graficos interactivos.
2. Con la etiqueta img
<img src="icono.svg" alt="Icono" width="64">
Ventaja: simple, cacheable, reutilizable. Limite: no puedes estilar su interior con tu CSS.
3. Con object
<object data="grafico.svg" type="image/svg+xml"></object>
Ventaja: archivo externo que conserva interactividad/scripts propios. Menos usado hoy.
4. Como fondo en CSS
.caja { background-image: url("fondo.svg"); }
Ventaja: decorativo, patrones, iconos de fondo. Limite: no es contenido (peor para accesibilidad).
¿Cual elijo?
- Icono que cambia de color o se anima -> inline.
- Imagen simple reutilizable -> img.
- Decoracion / patron -> background CSS.
Consigue el codigo del SVG
En svgdesk, el panel de codigo te da el <svg> listo para pegar inline, o exporta el archivo para usarlo con img.