¿Por qué usar gráficos SVG en la web?

Los SVGs son gráficos vectoriales ligeros, escalables y perfectos para la web. Pueden insertarse de varias formas, permitiendo animaciones y estilización. Aprende más sobre SVGs en este enlace.

Listado de formas para insertar un SVG en la web

1. Como imagen
2. Código pegado
3. Como recurso externo con fallback
4. Como recurso externo simple
5. Como fondo con CSS
6. En un marco independiente
7. Como data URI

Insertar SVG como una imagen

Este método utiliza la etiqueta img para insertar un SVG como si fuera una imagen externa. Es simple y ampliamente compatible, pero no permite estilizar ni animar el SVG directamente.

Personalmente, no suelo utilizar este método, aunque es válido en muchos casos si el SVG no es muy complejo.

Código

<img src="https://creadorlogos.com/images/engranaje-color.svg" alt="Gráfico SVG" width="200" height="200">
                

Ejemplo

¿Cómo insertar un SVG como imagen usando img?

Una de las formas más comunes de mostrar un archivo SVG en HTML es usando la etiqueta img, como si se tratara de un PNG o JPG. Es un método rápido, simple y compatible con todos los navegadores modernos.

✅ Ventajas:

• Muy fácil de implementar.
• Compatible con la mayoría de navegadores.
• Ideal para iconos, logotipos simples o elementos decorativos.

❌ Desventajas:

• No puedes aplicar estilos CSS internos al SVG (ni animaciones).
• No se puede interactuar con el contenido SVG desde el DOM.
• No sirve para SVGs complejos con scripts, animaciones o videos embebidos.

Insertar SVG con código pegado

Con este método, el código SVG se incluye directamente en el HTML usando la etiqueta svg. Esto permite estilizar y animar el SVG con CSS o JavaScript, aunque puede aumentar el tamaño del documento HTML.

Código

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="100" fill="green"></rect>
</svg>
                

Ejemplo

¿Qué es la etiqueta svg inline y por qué es tan útil?

Cuando usas la etiqueta svg inline (es decir, escribiendo directamente el código SVG dentro del HTML), puedes controlar completamente su estilo, comportamiento y animaciones con CSS o JavaScript.

✅ Ventajas:

• Permite aplicar estilos CSS directamente (colores, transformaciones, transiciones...).
• Puedes animar elementos SVG con CSS o JS sin restricciones.
• Accesible desde el DOM para manipulación dinámica.
• No requiere solicitudes externas (mejor rendimiento en algunos casos).

❌ Desventajas:

• Aumenta el peso del archivo HTML si el SVG es muy grande o complejo.
• Menos reutilizable: si usas el mismo SVG en varias páginas, tienes que repetir el código.

Insertar SVG como recurso externo con fallback

La etiqueta object permite insertar un SVG como recurso externo y soporta contenido de respaldo (fallback) en caso de que el navegador no pueda mostrar el SVG.

Este es el método que más utilizo, ya que no me da problemas con videos y animaciones anidados dentro del SVG. Con otros tipos de métodos, sí he tenido problemas.

¿Qué es la etiqueta object y por qué es ideal para insertar SVG animados?

La etiqueta HTML object permite insertar un archivo SVG externo dentro de una página web. A diferencia de embed, object admite contenido de respaldo (fallback), lo que mejora la compatibilidad y la accesibilidad.

✅ Ventajas:

• Soporta fallback (contenido alternativo si el navegador no puede mostrar SVG).
• Permite que el SVG mantenga su interactividad y animaciones internas (como videos, scripts o CSS embebidos).
• Es más compatible con SVGs complejos y animaciones internas que otros métodos como img o embed.

❌ Desventajas:

• El contenido SVG se carga como un documento separado (no se puede manipular desde el DOM principal).
• Puede requerir más atención al estilo y tamaño.

Código

<object type="image/svg+xml" data="https://creadorlogos.com/animaciones/slaider/peceraslaider.svg" width="400" height="200">
    <img src="https://creadorlogos.com/images/grafico-fallback.png" alt="Fallback Gráfico SVG">
</object>
                

Ejemplo

Insertar SVG como recurso externo simple

La etiqueta embed inserta un SVG como recurso externo. Es menos común y no ofrece opciones de fallback, pero es simple para algunos casos.

¿Qué es la etiqueta embed y cómo usarla para SVGs?

La etiqueta HTML embed permite incrustar un archivo SVG externo directamente en una página web. Es una forma rápida y sencilla de mostrar gráficos vectoriales, aunque no es la más flexible.

✅ Ventajas:

• Muy simple de usar.
• Ideal para cargar un SVG como si fuera un archivo independiente (como un PDF o video).

❌ Desventajas:

• No permite fallback en navegadores que no soporten SVG.
• No puedes interactuar directamente con el contenido SVG desde el DOM (por ejemplo, con JavaScript o CSS internos).

Código

<embed type="image/svg+xml" src="https://creadorlogos.com/animaciones/slaider/cerdo.svg" width="200" height="200">
                

Ejemplo

(Mi primera animación realizada en SVG hace años)

Insertar SVG como fondo con CSS

Este método usa un SVG como fondo de un elemento HTML mediante la propiedad CSS background-image. Es ideal para decoraciones, pero no permite interactividad ni animaciones.

¿Cómo usar un SVG como fondo con background-image en CSS?

El método background-image permite utilizar un archivo SVG como fondo decorativo de cualquier elemento HTML. Es muy útil para diseños visuales, especialmente en interfaces modernas y adaptables.

✅ Ventajas:

• Ideal para decoraciones visuales en botones, secciones o tarjetas.
• Permite repetición, posicionamiento y escalado con otras propiedades CSS (background-repeat, background-size, etc.).
• Reduce el HTML manteniendo el SVG fuera del DOM.

❌ Desventajas:

• No permite animar ni interactuar con el SVG.
• No accesible para lectores de pantalla (no se puede usar alt).
• No se puede modificar su contenido con JavaScript o CSS internos.

Código

<div style="background-image: url('https://creadorlogos.com/animaciones/slaider/engranaje-fondo-svg.svg'); width: 400px; height: 200px;"></div>
                

Ejemplo en el fondo de esta página

El SVG engranje-fondo-svg.svg se ha utilizado como fondo de esta página. Puedes verlo en el fondo del body.

Insertar SVG en un marco independiente

La etiqueta iframe inserta un SVG en un marco independiente, aislando su DOM. Es útil para contenido separado, pero menos eficiente.

¿Qué es la etiqueta iframe y cómo usarla para SVGs?

La etiqueta HTML iframe permite cargar un archivo SVG dentro de un marco independiente, como si fuera una mini página dentro de otra. El SVG queda aislado del DOM principal, lo que puede ser útil en ciertos casos específicos.

✅ Ventajas:

• Aisla el contenido SVG del resto de la página (evita conflictos de estilos o scripts).
• Puede mostrar SVGs complejos con scripts o animaciones sin interferencias externas.
• Útil cuando se necesita separación total entre el SVG y el HTML principal.

❌ Desventajas:

• Menor eficiencia en rendimiento, ya que carga un documento aparte.
• No puedes estilizar ni acceder al SVG desde el documento principal.
• Puede dar problemas de accesibilidad y SEO.

Código

<iframe src="https://creadorlogos.com/animaciones/slaider/logo-escala2.svg" width="400" height="200" frameborder="0"></iframe>
                

Ejemplo

Insertar SVG como Data URI

Este método codifica el SVG en base64 y lo inserta directamente en el HTML o CSS. Reduce solicitudes HTTP, pero puede hacer el código menos legible.

Código

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iNjAiIGN5PSI2MCIgcj0iNTAiIGZpbGw9ImJsdWUiLz48L3N2Zz4=" alt="Círculo azul SVG">
    

Ejemplo

Mejora tu web con gráficos SVG y creadorlogos.com

Como has visto, te he presentado múltiples posibilidades para insertar un SVG dentro de una página web. Personalmente, suelo usar el método object porque me permite incluir animaciones sin problemas, pero con background-image también consigo efectos espectaculares en la web. Si el código es simple, como en el caso de iconos, se puede pegar directamente en el HTML de la página.

¿Dónde más puedes usar SVGs?

Además de en páginas web, los SVGs son increíblemente versátiles y se pueden usar en otros contextos. Algunos ejemplos incluyen:

• Firma de correo electrónico: Añade un logo o diseño vectorial en tu firma de email para un toque profesional.
• Documentos PDF: Inserta SVGs en PDFs para gráficos nítidos y escalables, como diagramas o ilustraciones.
• Aplicaciones móviles: Usa SVGs para iconos o ilustraciones en apps, ya que son ligeros y escalables.
• Presentaciones: Incluye SVGs en diapositivas de PowerPoint o Google Slides para gráficos de alta calidad.
• Material impreso: Exporta SVGs a formatos vectoriales para impresiones de alta calidad, como carteles o folletos.

Si quieres aprender más sobre gráficos SVG o deseas crear los tuyos, sigue los tutoriales en creadorlogos.com. Regístrate en creadorlogos.com/crear-logos.php y empieza a diseñar hoy.