En este capítulo, vamos a aprender cómo aplicar estilos a los elementos SVG utilizando CSS. El uso de CSS en SVG permite un mayor control sobre la apariencia visual de los gráficos y permite hacer que el diseño sea más dinámico y fácil de mantener. Exploraremos cómo cambiar colores, aplicar opacidades, agregar bordes, y cómo trabajar con gradientes.

Introducción a CSS en SVG

Al igual que en HTML, los elementos SVG pueden ser estilizados usando CSS. Podemos aplicar estilos directamente en el archivo SVG con estilos en línea o definir estilos externos en hojas de estilo CSS. Usar CSS para estilizar SVG hace que el diseño sea más flexible y consistente, especialmente si tenemos múltiples gráficos que comparten estilos similares.

Ejemplo Básico de Estilos en Línea

html

En este caso, los estilos fill, stroke, y stroke-width se aplican directamente al elemento <rect>. Aunque esta es una forma efectiva de estilizar SVG, puede volverse complicada cuando trabajamos con gráficos más complejos.

Aplicando Estilos con Hojas de Estilo CSS Externas

Usar una hoja de estilos CSS externa para SVG permite definir estilos en un solo lugar y aplicarlos a múltiples elementos SVG. A continuación, un ejemplo de cómo se aplicaría un estilo CSS a un archivo SVG:

html

css

En este ejemplo, se agregan clases CSS a los elementos SVG, y los estilos se aplican desde una hoja de estilos externa, lo que permite mantener el código más organizado.

Controlando Colores con fill y stroke

En SVG, los colores se aplican principalmente a través de dos propiedades: fill y stroke.

• fill: Define el color de relleno de una forma.
• stroke: Define el color del borde de una forma.

Ejemplo de fill y stroke

html

Este ejemplo muestra cómo los atributos fill y stroke permiten personalizar tanto el color de relleno como el borde de una forma SVG.

Gradientes en SVG

Los gradientes permiten transiciones suaves entre colores y pueden agregar profundidad visual a los gráficos SVG. Existen dos tipos principales de gradientes en SVG: lineales y radiales.

Gradiente Lineal

html

Gradiente Radial

html

Los gradientes se definen en el elemento <defs> y se aplican usando fill="url(#id_del_gradiente)".

Opacidad y Transparencia

La opacidad en SVG se puede controlar a nivel de forma o a nivel de trazo y relleno. La propiedad opacity afecta la opacidad total del elemento, mientras que fill-opacity y stroke-opacity controlan la transparencia de solo el relleno o el borde.

html

Conclusión

Aplicar estilos en SVG usando CSS abre un mundo de posibilidades para mejorar la apariencia visual de los gráficos. Con propiedades como fill, stroke, opacity, y el uso de gradientes, podemos hacer que los gráficos SVG sean más atractivos y personalizados. En el próximo capítulo, aprenderemos sobre las transformaciones en SVG, una herramienta clave para manipular y posicionar elementos con precisión.

¡Nos vemos en el próximo capítulo!