Scalable Vector Graphics (SVG) es un formato para representar gráficos vectoriales, que resulta muy útil a la hora de desarrollar páginas web.
Sin embargo, a veces puede resultar un lío porque hay varias maneras de insertar SVG en HTML *(por supuesto, cada una con sus propias ventajas y desventajas):
Así que vamos a ver los métodos más comunes para insertar un SVG en en HTML, viendo las ventajas y desventajas de cada uno de los métodos.
| Método | Modificación con CSS | Reutilización | Uso en ::before/::after |
|---|---|---|---|
<img> | No | Sí | No |
background-image en CSS | No | Sí | Sí |
mask o clip-path en CSS | Sí (color de fondo) | Sí | Sí |
Inline SVG (<svg> en HTML) | Sí | No | No |
<symbol> y <use> | Sí | Sí | No |
<object> o <iframe> | Limitada | Sí | No |
En resumen
- Opciones simples: Métodos como
<img>obackground-image - Permitir modificación desde CSS: Podemos usar
mask(solo color) o<symbol>/<use>para control total - Para usar en before/after: Usar en CSS
background-imageomask - Para reutilizar: La opción de
<img>o<symbol>y<use>
Insertar SVG como imagen
Este es el método más sencillo para insertar un SVG en una página web, similar a cómo se insertan imágenes en formatos como JPG o PNG.
<img src="icono.svg" alt="Icono">- Simplicidad: Es una de las maneras más sencillas de insertar SVG en una página web
- Reutilización: Puedes usar el mismo archivo SVG en múltiples lugares sin tener que repetir el código
- Modificación de Estilo: No permite cambiar el color del SVG a través de CSS. El SVG se renderiza como una imagen
- Accesibilidad Limitada: No puedes manipular el contenido del SVG ni añadirle interactividad desde el HTML o CSS
Usar SVG como fondo
Este método es ideal para utilizar SVGs como fondo decorativo de elementos, aplicando el SVG como una imagen de fondo en CSS.
.icono {
width: 50px;
height: 50px;
background-image: url('icono.svg');
}- Estilo Sencillo: Adecuado para usar SVGs como decoraciones de fondo en elementos.
- Se puede usar en After y Before: Puedes usarlo con pseudo elementos After y Before.
- Modificación de Estilo: No puedes cambiar el color del SVG usando CSS, ya que el SVG se trata como una imagen de fondo
- Limitaciones de Interactividad: No puedes aplicar efectos o interactividad directamente sobre el SVG.
Insertar SVG directamente en el HTML
Otra opción es copiar el código del SVG directamente en el HTML.
<svg width="50" height="50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 Z" />
</svg>- Modificación de Colores: Permite el uso de propiedades CSS como
fill,stroke, ycurrentColorpara cambiar el color del SVG - Control Total: Puedes aplicar estilos CSS directamente al SVG o desde una hoja de estilos externa, y manipular su contenido con JavaScript
- Redundancia de Código: Si necesitas usar el mismo SVG en varios lugares, el código puede volverse repetitivo y voluminoso
Usar Symbol y Use
Una aproximación más moderna es definir un SVG una sola vez en el documento mediante symbol.
<svg style="display:none;">
<symbol id="icono" viewBox="0 0 100 100">
<path d="M10 10 H 90 V 90 H 10 Z" />
</symbol>
</svg>Posteriormente, podemos reutilizarlo en varios lugares con use
<svg width="50" height="50" fill="currentColor">
<use href="#icono"></use>
</svg>- Reutilización Eficiente: Permite definir un SVG una vez y reutilizarlo en múltiples lugares.
- Modificación de Estilo: Puedes cambiar el color con CSS y aplicar otros estilos.
- Complejidad: Necesita estar presente en el mismo documento HTML o ser referenciado correctamente desde archivos externos.
Usar Object
Este método inserta el SVG como un objeto o dentro de un marco embebido, lo que permite un mayor control a través de JavaScript.
<object data="icono.svg" type="image/svg+xml"></object>- Acceso al DOM del SVG: Permite manipular el SVG con JavaScript, lo que puede ser útil para interacciones avanzadas
- Modificación de Estilo: No es ideal para cambiar colores con CSS. El SVG se trata como un objeto separado
- Compatibilidad y Rendimiento: Puede haber problemas de rendimiento y compatibilidad en algunos navegadores
Uso de CSS mask
Si necesitas cambiar el color de un SVG cuando se usa como fondo, puedes usar máscaras (mask) o rutas de recorte (clip-path)
.icono {
width: 50px;
height: 50px;
background-color: red;
mask: url('icono.svg') no-repeat center;
}- Cambio de Color: Permite modificar el color del SVG mediante el color de fondo del elemento.
- Se puede usar en After y Before: Puedes usarlo con pseudo elementos After y Before.
- Flexibilidad Limitada: Menos flexible en cuanto a la personalización del SVG
- Problemas de compatibilidad. En navegadores más antiguos