Los gráficos SVG son un formato de gráfico escalable y ligero que ofrecen diferentes posibilidades de personalización y animación. El día de hoy queremos enseñarte a insertar SVG en HTML por medio de los distintos métodos que existen de manera fácil.
¿Qué es un SVG?
SVG es la sigla de Scalable Vector Graphics y traduce “Gráficos vectoriales escalables”. Es un formato de imagen que se basa en vetores y utiliza código XML para describir formas, líneas, colores y otras cosas. Se diferencia de formatos como png y jpg porque son infinitamente escalables y no pierden calidad.
¿Aun no estás seguro de por qué y si deberías usar svg? Te damos algunas razones para que te animes:
- Escalabilidad sin pérdida de calidad: Perfecto para diseños responsivos.
- Tamaño reducido: El idóneo para mejorar la velocidad de carga de tu web.
- Accesibilidad y SEO: Los SVG son texto, por lo que los motores de búsqueda pueden indexarlos.
- Edición y animación: Se pueden modificar con CSS o JavaScript para agregar interactividad.
Métodos para insertar SVG en HTML
Algunas de las formas y métodos más comunes para insertar SVG en HTML son:
Usar la etiqueta <img>
La forma más sencilla y directa es usar la etiqueta <img> para añadir un archivo SVG como si fuera cualquier otra imagen.
//insertar SVG en HTML<img src="mi-imagen.svg" alt="Descripción del SVG">
¿Las ventajas?
- Fácil de implementar.
- Compatible con todos los navegadores modernos.
🔴 ¿Quieres Aprender a Programar con Python? 🔴
Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada
👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana¿Su único limitante?
- No puedes aplicar estilos ni animaciones directamente.
Insertar SVG como fondo en CSS
Otra opción es usar el SVG como fondo con la propiedad background-image en CSS.
//insertar SVG en HTMLdiv {
background-image: url('mi-imagen.svg');
width: 200px;
height: 200px;
}
Entre sus ventajas tenemos que:
- Es ideal para imágenes decorativas.
- Permite reutilizar un mismo archivo en diferentes elementos.
Al igual que el método anterior, tiene un gran limitante:
- No puedes interactuar con el contenido del SVG.
Insertar SVG inline
Este método consiste en copiar el contenido del archivo SVG directamente dentro de tu archivo HTML.
//insertar SVG en HTML<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
Algunas de sus ventajas son:
- Permite aplicar estilos con CSS.
- Posibilidad de animar elementos con JavaScript.
Entre sus limitantes encontramos que:
- Puede aumentar el tamaño del archivo HTML si el SVG es muy complejo.
Usar la etiqueta <object>
La etiqueta <object> permite insertar un SVG como un objeto independiente.
//insertar SVG en HTML<object data="mi-imagen.svg" type="image/svg+xml" width="200" height="200"></object>
Sus ventajas:
- Soporta contenido alternativo si el SVG no se carga.
- Compatible con enlaces y animaciones dentro del SVG.
Sus limitaciones:
- Menor soporte en gestores de contenido como WordPress.
Usar un <iframe>
Con este método, el SVG se carga dentro de un iframe.
//insertar SVG en HTML<iframe src="mi-imagen.svg" width="200" height="200"></iframe>
- Una de sus ventajas es que aísla el contenido del SVG del resto de la página.
- Su desventaja es que es más difícil de mantener y menos eficiente para SEO.
Usar <embed>
El método <embed> es similar a <object>, pero con una sintaxis más simple.
<embed src="mi-imagen.svg" width="200" height="200">- Entre sus ventajas encontramos que es fácil de implementar.
- En el otro lado del espectro, entre sus desventajas es que tiene soporte limitado en algunos navegadores modernos.
¿Cuál es el mejor método?
La elección del método dependerá de lo que necesites y quieras conseguir, por eso:
- Para mostrar imágenes simples: Usa <img>.
- Para personalización y animaciones: Usa SVG inline.
- Para contenido externo reutilizable: Usa <object> o <embed>.
¿Por qué usar SVG en tus proyectos?
Usar SVG tiene múltiples beneficios que lo convierten en una excelente opción para desarrolladores web. Entre estas ventajas encontramos:
- Mejora la velocidad de carga: Su tamaño reducido impacta positivamente en el rendimiento.
- Optimización para buscadores: Los SVG son compatibles con SEO.
- Interactividad y animación: Los gráficos SVG pueden reaccionar a eventos como clics y movimientos del ratón.
- Flexibilidad: Puedes modificarlos directamente con CSS o JavaScript.
Si te imaginas creando páginas web geniales que impacten a un público, te invitamos a unirte a nuestro bootcamp en programación desde cero, en donde aprenderás todos los fundamentos de la programación básica que te guiarán para ir incursionando en un mundo laboral lleno de oportunidades. ¡No dudes más, el sector IT te está esperando!
Aprende también sobre:
