Cambiar el color del elemento SVG en HTML usando CSS

Naila Saad Siddiqui 20 junio 2023

CSS CSS Element

Introducción a SVG
Métodos de SVG

Cambiar el color del elemento SVG en HTML usando CSS

Esta guía trivial trata sobre el uso de SVG en documentos HTML y cómo podemos personalizarlo para cambiar su color usando las propiedades CSS. Para empezar, presentaremos brevemente SVG en HTML.

Introducción a SVG

Similar a XHTML, SVG es un lenguaje XML que se puede usar para crear gráficos vectoriales como el que se muestra a continuación. Se puede usar para crear una imagen dibujando todas las líneas y formas necesarias, editando imágenes rasterizadas preexistentes o haciendo ambas cosas a la vez.

La imagen y sus elementos se pueden alterar por completo mediante filtrado, composición u otras técnicas.

muestra de imagen SVG

Después de que varios formatos de la competencia se enviaran al W3C pero no se ratificaran por completo, se creó SVG en 1999. Todos los navegadores populares son compatibles con SVG.

La carga lenta de SVG es un inconveniente. SVG tiene ventajas, incluida la disponibilidad de una interfaz DOM y la ausencia de la necesidad de extensiones de terceros.

Ventajas de usar SVG

Se puede usar cualquier editor de texto para crear y editar imágenes SVG.
Las imágenes SVG se pueden codificar, comprimir, indexar y buscar.
Las imágenes en SVG se pueden escalar.
Cualquier resolución puede producir impresiones de alta calidad de imágenes SVG.
Las imágenes SVG se pueden acercar.
Mantienen toda su calidad si los gráficos SVG se acercan o alejan.
Los archivos SVG son XML puro y son un estándar abierto.

Métodos de SVG

SVG sirve como contenedor para contener diferentes gráficos. Por lo tanto, proporciona varios métodos o etiquetas para crear imágenes por sí mismo en un documento HTML. Este artículo discutirá algunos de los elementos y sus diferentes opciones disponibles.

Dibujar círculo usando SVG

Use la etiqueta <circle> para dibujar un círculo simple en SVG. Tiene diferentes atributos que se utilizan para establecer las propiedades del círculo.

Como nuestro primer ejemplo, comenzaremos dibujando un círculo usando SVG en HTML. El siguiente código HTML dibuja un círculo en SVG.

<!DOCTYPE html>
<html>
<body>

<h1>First SVG Demo</h1>

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="yellow" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

El código se representa de la siguiente manera.

El elemento <svg> introduce una imagen SVG.
Los atributos de ancho y alto del elemento <svg> especifican las dimensiones de la imagen SVG.
Se puede dibujar un círculo utilizando el elemento <círculo>.
Las coordenadas x e y del centro del círculo vienen especificadas por los atributos cx y cy.
El centro del círculo se establece en (0,0) si cx y cy no están configurados.
El atributo r especifica el radio del círculo.
La apariencia del contorno de una forma está controlada por sus atributos trazo y ancho del trazo. Hicimos que el contorno del círculo tuviera un “borde” rojo de 5 px.
El atributo relleno hace referencia al color interior del círculo.
Al final, al cerrar la etiqueta </svg> se cierra la imagen SVG.

Si el navegador no es compatible con SVG, se mostrará el mensaje “Lo sentimos, SVG no es compatible con su navegador”.

Dibuja un rectángulo usando SVG

El elemento <rect> en SVG se usa para dibujar una forma de rectángulo. Similar al elemento <circle>, tiene múltiples atributos que se pueden usar para establecer las propiedades del rectángulo.

El siguiente segmento de código dibuja un rectángulo usando SVG.

<!DOCTYPE html>
<html>
<body>

<h1>SVG Rectangle</h1>

<svg width="200" height="200">
   <rect width="200" height="100" style="fill:red;stroke-width:5;stroke:black" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

El ancho y alto del rectángulo están determinados por los atributos ancho y alto del elemento rect.
El atributo de estilo define las propiedades CSS del rectángulo.
La propiedad de relleno CSS determina el color de relleno del rectángulo.
La propiedad de ancho de trazo de CSS determina el ancho del borde del rectángulo.
La propiedad stroke de CSS especifica el color del borde del rectángulo.

SVG `<imagen>` Etiqueta

Las imágenes contenidas en documentos SVG están representadas por el elemento SVG <imagen>. Puede mostrar archivos SVG o archivos de imagen de trama.

JPEG, PNG y otros archivos SVG son los únicos formatos de imagen que el software SVG necesita admitir. El comportamiento de los GIF animados no está definido.

Los siguientes son ciertos atributos para la etiqueta <imagen> que deben establecerse.

x: Define la posición horizontal de la imagen desde el origen.
y: Define la posición vertical de la imagen desde el origen.
width: El tamaño con el que se renderiza la imagen. Este atributo es necesario, a diferencia de la etiqueta <img> en HTML.
altura: Altura renderizada de la imagen. Este atributo es necesario, a diferencia de la etiqueta <img> en HTML.
xlink y href: Define la URL del archivo de imagen.
preserveAspectRatio: Gestiona el escalado de la imagen.

El siguiente fragmento de código muestra un archivo SVG usando la etiqueta imagen en SVG.

<!DOCTYPE html>
<html>
<body>

<svg width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

Cambiar el color de la imagen SVG usando CSS

Si necesita cambiar el color de su imagen SVG, podemos usar la propiedad filter de CSS para aplicar diferentes filtros a una foto y cambiar su tono y colores. La propiedad CSS del filtro le da a un elemento efectos visuales como desenfoque o cambio de color.

Es una práctica común usar filtros para cambiar la forma en que se representan los bordes, los fondos y las imágenes.

Por ejemplo, si necesitamos cambiar el color de la imagen en el ejemplo anterior, entonces podemos usar la siguiente propiedad de filtro.

.filter-green{
        filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%);
    }

<!DOCTYPE html>
<html>
<body>

<svg class="filter-green" width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

Esto creará un efecto de superposición en la imagen y cambiará su color. En el código CSS anterior, hemos aplicado los siguientes filtros a la imagen.

invertir: Esto invierte el color de la imagen. Comenzando de 0% a 100%, donde 100% hará que la imagen se invierta por completo.
sepia: Esto agrega un efecto vintage a la imagen, eventualmente cambiando su color a un lado metálico.
saturar: Establece la intensidad del color en la imagen. Un valor más alto significa colores más intensos y nítidos de la imagen.
hue-rotate: Esto es para cambiar la rotación de tono de la imagen alrededor del círculo de color de la imagen.
brightness: Establece el brillo de la imagen. Un valor de 0 significa completamente oscuro y 100% indica el brillo original de la imagen. Un valor superior a 100 lo hará más brillante.
contraste: Establece el contraste de la imagen. Un valor de 0 significa totalmente oscuro, 100% indica el contraste original de la imagen y un valor superior a 100 la hará más contrastante.