Cómo insertar una imagen SVG en HTML y CSS

En este artículo, vamos a ver cómo insertar una imagen SVG (Scalable Vector Graphics) en HTML y CSS, y cómo manipular sus estilos.

1. ¿Qué es una imagen SVG?

SVG es un formato de archivo basado en XML que describe gráficos vectoriales de forma bidimensional. A diferencia de las imágenes rasterizadas (como JPEG o PNG), los SVG son escalables, lo que significa que conservan la calidad y nitidez independientemente del tamaño al que se escalen.

Una imagen rasterizada es un tipo de imagen digital compuesta por una cuadrícula de píxeles dispuestos en filas y columnas. Cada píxel contiene información de color y brillo, lo que permite representar imágenes complejas con detalles y graduaciones de color precisos. Estas imágenes son adecuadas para fotografías y gráficos complejos, pero tienen una resolución fija y pueden perder calidad si se escalan demasiado. Los formatos comunes de imágenes rasterizadas son JPEG, PNG y GIF.

2. Diferencias entre los distintos tipos de imágenes y sus usos

Los formatos más utilizados para imágenes en la web son SVG, PNG, JPEG, GIF y WebP. Cada formato tiene sus propias ventajas y se usa en diferentes contextos según las necesidades del proyecto web. Veamos en detalle cada formato y cuándo es adecuado utilizarlos.

SVG (Scalable Vector Graphics):

• Características: Los SVG son gráficos vectoriales basados en XML. Son escalables, lo que significa que pueden ampliarse o reducirse sin perder calidad.
• Usos: Ideal para iconos, logotipos y gráficos que requieren escalabilidad.

PNG (Portable Network Graphics):

• Características: Los PNG son imágenes de mapa de bits sin pérdida de compresión, lo que significa que conservan la calidad original.
• Usos: Recomendado para imágenes con áreas transparentes o con detalles finos, como fotografías, ilustraciones, gráficos con degradados y gráficos con texto.

JPEG (Joint Photographic Experts Group):

• Características: Los archivos JPEG son imágenes de mapa de bits con compresión con pérdida, diseñados para reducir el tamaño del archivo mediante la eliminación de datos redundantes. Esto puede conducir a una ligera degradación de la calidad visual.
• Usos: El formato JPEG es ideal para fotografías y imágenes con gradientes de color, donde la pérdida de detalles finos es menos perceptible. Se recomienda especialmente para imágenes de alta resolución donde el tamaño del archivo es crítico para la velocidad de carga del sitio web. Sin embargo, debido a su compresión con pérdida, no es adecuado para imágenes con áreas transparentes o detalles muy finos que requieren una calidad sin pérdidas, como textos nítidos o gráficos con bordes definidos.

GIF (Graphics Interchange Format):

• Características: Los GIF son imágenes de mapa de bits que admiten animaciones simples y transparencia, pero tienen una paleta de colores limitada (256 colores).
• Usos: Útil para imágenes animadas simples, como banners, iconos animados y gráficos con movimientos repetitivos o de baja complejidad.

WebP:

• Características: WebP es un formato de imagen desarrollado por Google que ofrece una alta compresión con calidad visual similar a JPEG o PNG.
• Usos: Recomendado para mejorar el rendimiento del sitio web, ya que puede reducir significativamente el tamaño de las imágenes sin comprometer la calidad. Es ideal para fotografías y gráficos complejos.

3. Formas de insertar imágenes SVG con HTML y CSS

Existen varias formas de insertar imágenes SVG en un documento HTML. En esta sección vamos a explicar cada una de ellas usando el siguiente icono de Eniun (https://www.eniun.com/wp-content/uploads/ENIUN.svg).

3.1. Usando la etiqueta <img> para un SVG

Para agregar una imagen SVG a tu página utilizando la etiqueta <img>, simplemente especifica la ruta del archivo SVG en el atributo src y proporciona un texto alternativo en el atributo alt para accesibilidad. Ejemplo:

<img src="https://www.eniun.com/wp-content/uploads/eniun.svg" alt="Eniun">

Cuando se añade una imagen SVG mediante la etiqueta <img> sin especificar el tamaño, se utiliza el tamaño original del archivo SVG. Para cambiar este tamaño, es necesario especificar las dimensiones utilizando CSS o HTML. También es posible modificar las dimensiones originales del SVG directamente, esto lo veremos en secciones posteriores. Veamos algunos ejemplos de cómo cambiar el tamaño con CSS y HTML:

Ejemplo de cambio de tamaño de SVG con CSS:

Si queremos ajustar el tamaño de un SVG utilizando CSS, podemos hacerlo de la siguiente manera:

<!-- Imagen SVG sin especificar tamaño -->
<img class="svg-img" src="imagen.svg" alt="Imagen SVG">

img.svg-img {
   width: 200px; 
   height: auto; /* Mantener la proporción de aspecto */
}

Ejemplo de cambio de tamaño de SVG en HTML:

También puedes indicar el tamaño directamente en la etiqueta <img> utilizando los atributos width y height.

<img src="imagen.svg" alt="Imagen SVG" width="300" height="200">

3.2. Usando SVG en línea (inline)

Las imágenes SVG pueden escribirse directamente en el documento HTML mediante la etiqueta <svg> </svg>. Sigue estos pasos para incorporar un SVG inline en tu página:

1. Abre el archivo SVG en tu editor de código (como VS Code).
2. Copia todo el código SVG dentro de las etiquetas <svg> </svg>.
3. Pega el código SVG dentro del elemento <body> en tu documento HTML.

<body>
   <!-- Pega aquí el código SVG -->
   <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
   </svg>
</body>

Cuando utilizas SVG inline en el documento HTML, se reduce el tiempo de carga porque el SVG se sirve como parte del HTML principal, evitando una solicitud HTTP adicional. Sin embargo, el código HTML se hace más extenso y engorroso.

Esta técnica te permite realizar una mayor personalización en comparación con el uso de <img>

3.3. Usando la etiqueta <object> para un SVG

Otra forma de insertar imágenes SVG en un documento HTML es mediante la etiqueta <object>. Esta etiqueta te permite incrustar un archivo SVG como un objeto independiente en la página.

Puedes utilizar la etiqueta <object> para insertar un archivo SVG y definir el tamaño del objeto utilizando CSS o atributos HTML width y height.

<object type="image/svg+xml" data="imagen.svg" width="300" height="200">
   Tu navegador no soporta SVGs.
</object>

En este ejemplo:

• El atributo type="image/svg+xml" especifica el tipo de archivo como SVG.
• El atributo data="imagen.svg" indica la ruta del archivo SVG que se debe mostrar.
• Los atributos width="300" y height="200" definen las dimensiones del objeto SVG en la página.

La etiqueta <object> ofrece flexibilidad al incrustar SVGs, permitiendo un control preciso sobre el tamaño y la presentación del gráfico vectorial en tu página web.

3.4. Usando la etiqueta <iframe> con SVG

Otra técnica para insertar imágenes SVG en un documento HTML es mediante el uso de la etiqueta <iframe>. Sin embargo, es importante tener en cuenta ciertas consideraciones al utilizar <iframe> para mostrar SVGs.

Puedes utilizar la etiqueta <iframe> para incrustar un archivo SVG en tu página web:

<iframe src="imagen.svg" width="300" height="200" title="SVG"></iframe>

En este ejemplo:

• El atributo src="imagen.svg" especifica la URL del archivo SVG que se debe mostrar dentro del <iframe>.
• Los atributos width="300" y height="200" definen las dimensiones del <iframe> para mostrar el SVG.
• El atributo title="SVG" proporciona un título descriptivo para el <iframe>.

Consideraciones en el uso de <iframe> con SVG:

Aunque <iframe> puede ser una forma rápida de mostrar SVGs en tu página, existen algunas consideraciones importantes:

• Dificultades de mantenimiento: Los <iframe> pueden ser difíciles de mantener, especialmente cuando tienes múltiples elementos <iframe> en tu página.
• SEO (Optimización para Motores de Búsqueda): El uso excesivo de <iframe> puede afectar negativamente la optimización de tu sitio para motores de búsqueda.
• Escalabilidad de SVG: Las imágenes SVG añadidas mediante <iframe> no son escalables, lo que anula el propósito de utilizar gráficos vectoriales escalables.

3.5. Usando la propiedad background-image con SVG

Otra forma de incorporar imágenes SVG en un diseño web es utilizando la propiedad background-image en CSS. Esta técnica te permite aplicar un SVG como fondo de un elemento HTML, como un <div>.

Puedes utilizar background-image en tu hoja de estilos CSS para aplicar un SVG como fondo de un elemento HTML:

<div class="svg-background">
    <!-- Contenido dentro del div con imagen SVG de fondo -->
 </div>

.svg-background {
    width: 300px;
    height: 200px;
    background-image: url('imagen.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

En este ejemplo:

• La clase .svg-background se utiliza para aplicar estilos al <div> que contendrá la imagen SVG como fondo.
• La propiedad background-image especifica la URL del archivo SVG que se utilizará como fondo.
• background-size: cover; asegura que la imagen SVG se ajuste completamente al tamaño del <div>.
• background-repeat: no-repeat; evita que la imagen SVG se repita en el fondo del <div>.

Consideraciones al usar background-image con SVG:

Aunque background-image es una forma conveniente de aplicar SVGs como fondos en HTML, es importante tener en cuenta lo siguiente:

• No accesible: Las imágenes de fondo SVG no son accesibles a través del texto alternativo (alt) como las imágenes <img>.
• Escalabilidad: La escalabilidad del SVG puede verse limitada dependiendo del contenedor y las propiedades CSS aplicadas.

Ejemplo en CodePen

Veamos un ejemplo de cada una de las formas de inserción vistas anteriormente:

4. Cambiar las propiedades de un SVG con CSS

Los archivos SVG (Scalable Vector Graphics) pueden ser fácilmente manipulados y estilizados utilizando CSS. Esto te permite cambiar aspectos como color, tamaño, posición y animación de los elementos dentro del SVG.

La manipulación de las propiedades CSS de los SVG funciona bien con SVG simples, como círculos o formas básicas, pero puede encontrarse con dificultades al aplicarse a SVG más complejos debido a su estructura anidada y la presencia de múltiples elementos dentro del SVG. Por ejemplo, en SVGs complejos que contienen grupos <g>, rutas <path>, y otros elementos, la aplicación de estilos CSS puede no afectar al elemento deseado directamente debido a la jerarquía y la especificidad de los selectores.

4.1. Cambiar el color de una imagen SVG

Puedes cambiar el color de un SVG utilizando la propiedad fill en CSS. Esto es útil para personalizar los colores de partes específicas de un gráfico vectorial.

/* Cambiar el color de todos los elementos del SVG a rojo */
svg {
    fill: red;
}

/* Cambiar el color de un elemento específico por su clase */
.circulo {
    fill: blue;
}

4.2. Ajustar el tamaño de una imagen SVG

Puedes ajustar el tamaño de un SVG utilizando las propiedades width y height en CSS. Esto te permite controlar las dimensiones del SVG en relación con su contenedor.

/* Ajustar el tamaño del SVG a 200px de ancho */
svg {
    width: 200px;
    height: auto; /* Mantener la proporción de aspecto */
}

A continuación, se presenta un ejemplo en CodePen de cómo puedes manipular un SVG simple con CSS:

Además de cambiar el color y el tamaño, los SVG también permiten modificar otras propiedades visuales mediante CSS. Por ejemplo, puedes ajustar la opacidad de un SVG utilizando la propiedad opacity, pudes aplicar animaciones basadas en keyframes con animation, cambiar su posición o usar transiciones y transformaciones, filtros, entre otras cosas.

4.3. Cambiar la opacidad de una imagen SVG

Puedes cambiar la opacidad de un SVG utilizando la propiedad opacity en CSS. Esto permite hacer que el SVG sea más transparente o más opaco.

/* Hacer que el SVG sea semi-transparente */
svg {
    opacity: 0.5;
}

4.4. Cambiar la posición de una imagen SVG

Puedes cambiar la posición de un SVG utilizando las propiedades position, top, left, right y bottom en CSS. Esto te permite mover el SVG dentro de su contenedor.

/* Posicionar el SVG en el centro de su contenedor */
svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4.5. Animar una imagen SVG con CSS

Puedes animar los elementos dentro de un SVG utilizando las animaciones CSS. Esto permite crear efectos visuales dinámicos y atractivos.

/* Definir una animación para cambiar el color de un elemento */
@keyframes cambiarColor {
    0% { fill: red; }
    50% { fill: blue; }
    100% { fill: green; }
}

/* Aplicar la animación al elemento del SVG */
.circulo {
    animation: cambiarColor 2s infinite alternate;
}

Estos son solo algunos ejemplos de cómo puedes manipular y estilizar un SVG utilizando CSS. Experimenta con estas técnicas y descubre otras nuevas practicando con tus proyectos.