Color de fondo SVG – ¿Cómo cambiar el color de fondo?
¿Por qué establecer un color de fondo para SVG?
Scalable Vector Graphics (SVG) es un lenguaje basado en XML para crear gráficos vectoriales 2D y gráficos vectoriales/rasterizados mixtos. Cada documento SVG se basa en los principales elementos estructurales de XML: una estructura en forma de árbol, etiquetas, elementos y atributos. SVG se ha convertido en una opción popular en el diseño web en los últimos años, ya que permite a los desarrolladores y diseñadores crear imágenes utilizando puntos, líneas, trazados y formas. Ideales para logotipos, íconos, gráficos simples y animaciones, las imágenes SVG son independientes de la resolución y se pueden crear y editar fácilmente en cualquier editor de texto. Para obtener más información sobre el estándar SVG, consulte la página W3C.
Una tarea común cuando se trabaja con SVG es establecer un color de fondo. El color de fondo en un SVG es importante porque mejora la claridad visual, garantiza la coherencia del diseño y mejora la accesibilidad, especialmente cuando se muestran iconos, logotipos u otros elementos gráficos sobre varios fondos de páginas web (con patrones o texturas). También desempeña un papel crucial a la hora de definir límites en composiciones en capas, mantener la apariencia deseada durante la exportación o impresión y permitir efectos dinámicos en gráficos interactivos.
En este artículo, discutiremos qué fondo hay en SVG. También encontrará ejemplos de códigos SVG y una guía completa sobre cómo configurar o cambiar un color de fondo.
SVG se puede diseñar como HTML. Sin embargo, SVG no tiene una propiedad nativa de “color de fondo” como los elementos HTML. Para simular un color de fondo, puede utilizar un elemento que cubra todo el lienzo y aplicar un color de fondo mediante CSS o JavaScript, normalmente apuntando al atributo style o fill del elemento SVG.
¿Qué es el fondo SVG?
Un fondo SVG es una capa visual que aparece detrás de todos los demás elementos en una imagen SVG. A diferencia de otros elementos HTML, los SVG no tienen su propiedad nativa “fondo”, por lo que un enfoque común para crear un fondo es agregar un elemento rectangular (<rect>) que abarque todo el lienzo SVG. Este <rect> actúa como fondo, cubre toda el área SVG y normalmente se coloca como el primer elemento secundario en el SVG para garantizar que aparezca detrás de todos los demás elementos gráficos.
Es posible que el elemento SVG de fondo no sea necesariamente un rectángulo; puede ser un círculo, un polígono, etc., a tu criterio. Elegir un rectángulo como fondo es el caso más común y conveniente. Entonces, crear un fondo de color implica establecer el color del fondo (elemento gráfico SVG). Esto se puede hacer de dos maneras: usando los atributos de cualquier elemento gráfico: style (con la propiedad fill) o fill.
Propiedad de Fill del atributo de Style
La función de relleno SVG se puede configurar en el atributo style. La sintaxis para especificar esta propiedad es la siguiente: style="fill:#ff0000". Esto no es más que un SVG en línea, ya que aplica directamente estilos CSS a un elemento específico dentro del código SVG.
Atributo de Fill
El relleno SVG se puede proporcionar en el atributo fill con la sintaxis: fill="#ff0000". Según el estándar SVG, el atributo fill es un
atributo de presentación que se puede aplicar a todos los elementos gráficos SVG, como formas, trazados y texto.
Cambiar color de fondo SVG
Si bien los SVG no tienen un fondo inherente (ya que son transparentes de forma predeterminada), puedes configurar uno de varias maneras:
- Modificando SVG directamente. Puede configurar el color de fondo del SVG agregando un elemento
<rect>como el primer elemento secundario del SVG para cubrir todo el lienzo y especificar el atributo style o fill para este rectángulo. - Configuración del color de fondo SVG usando CSS. Puede aplicar un color de fondo SVG utilizando CSS interno y en línea a un elemento SVG que sirve como fondo.
- Configuración del color de fondo SVG usando JavaScript. Si desea cambiar el color de fondo dinámicamente, puede usar JavaScript para manipular el atributo style o fill del SVG.
Modificar el archivo SVG directamente
En el siguiente ejemplo de código SVG, utilizamos el método <rect> para agregar un fondo a una imagen SVG. Para que el fondo cubra todo el lienzo SVG, especificamos el width="100%" height="100%" del rectángulo. Para establecer el color de fondo, usamos el atributo fill y establecemos el valor del color en “aliceblue”:
1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2 <!-- Background rectangle -->
3 <rect width="100%" height="100%" fill="aliceblue" />
4 <!-- Other SVG content -->
5 <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>La figura ilustra el fragmento de código anterior:
Cómo trabajar con color SVG usando la biblioteca Aspose.SVG for .NET y cómo cambiar el color de fondo en archivos SVG, lo cubrimos en detalle con ejemplos de C# en el artículo Cambiar color de fondo de SVG – Ejemplos de C#.
Usando la propiedad background-color
La
especificación SVG no admite “background-color” como propiedad válida para el elemento <svg> en sí. Cuando usa la propiedad background-color en el atributo style de un elemento <svg>, en realidad no establece un fondo del contenido SVG. En cambio, puede establecer el color de fondo del espacio que ocupa el SVG en un navegador. Esto puede dar la impresión de que el propio SVG tiene un color de fondo, pero en realidad es el fondo del contenedor circundante: el área alrededor o detrás del contenido SVG.
En el siguiente código SVG, mostramos cómo “funciona” esta propiedad. En la figura que ilustra el código, verá que el fondo real de la imagen SVG es el rectángulo que cubre todo el lienzo SVG (200x200 px). Además, verás el efecto de la propiedad style="background-color: lightsteelblue": el fondo del contenedor circundante se rellena con el color lightsteelblue.
1<svg width="200" height="200" style="background-color: lightsteelblue" xmlns="http://www.w3.org/2000/svg">
2 <!-- Background rectangle -->
3 <rect width="100%" height="100%" fill="aliceblue" />
4 <!-- Other SVG content -->
5 <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>La figura ilustra el fragmento de código anterior:
Dado que este comportamiento no es estándar, es posible que no funcione de manera consistente en diferentes navegadores o plataformas. Lo que funciona en un navegador puede no funcionar en otro, lo que genera posibles problemas con la coherencia del diseño y la representación.
Recomendación: Para garantizar que su SVG tenga un fondo consistente y confiable, debe usar un método que sea compatible con todos los navegadores y plataformas, como agregar un elemento <rect> dentro del SVG para que sirva como fondo.
Configuración del color de fondo SVG usando CSS
CSS en línea para SVG
CSS en línea implica incrustar directamente estilos CSS en elementos SVG individuales utilizando el atributo style. Este método le permite aplicar estilos específicos a elementos caso por caso sin la necesidad de hojas de estilo externas o internas.
En el siguiente código SVG utilizamos CSS en línea para establecer estilos para el fondo SVG: elemento <rect>. El atributo style se utiliza para aplicar CSS en línea directamente en el elemento <rect>, estableciendo sus propiedades width, height y fill.
1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2 <!-- Background rectangle -->
3 <rect style="width: 100%; height: 100%; fill: aliceblue;" />
4 <!-- Other SVG content -->
5 <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>Las ventajas del CSS en línea en SVG incluyen un control preciso sobre elementos individuales y una fácil portabilidad. Sin embargo, si varios elementos comparten el mismo estilo, puede generar código repetitivo, lo que dificulta el mantenimiento, especialmente en SVG grandes.
CSS interno para SVG
Para establecer un color de fondo para un SVG usando CSS interno, puede usar la etiqueta <style> dentro del propio SVG, lo que le permite crear reglas de estilo centralizadas que se pueden aplicar a múltiples elementos. Este método proporciona una forma más limpia y manejable de aplicar estilos consistentes en un SVG.
Dado que el elemento <svg> no admite una propiedad background-color de forma nativa, es común usar un elemento adicional como <rect> para simular un fondo. En este ejemplo, la etiqueta <style> se usa para definir una clase CSS .background. Luego, esta clase se aplica al elemento <rect> mediante el atributo class. La clase .background establece la propiedad fill en aliceblue, coloreando <rect> y creando el color de fondo.
1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2 <style>
3 .background {
4 fill: aliceblue;
5 }
6 </style>
7 <!-- Background rectangle -->
8 <rect width="100%" height="100%" class="background" />
9 <!-- Other SVG content -->
10 <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
11</svg>El CSS interno es un poco más complejo que el CSS en línea. Sin embargo, le permite reutilizar estilos en múltiples elementos, lo que reduce la redundancia de código y facilita la actualización de estilos en los elementos a los que se aplican.
Cambiar el color de fondo usando JavaScript
JavaScript se puede utilizar dentro de SVG para manipular sus elementos, al igual que en HTML. JavaScript en SVG es particularmente útil para crear gráficos interactivos, animaciones y cambios dinámicos en contenido SVG.
En este ejemplo, el SVG contiene un rectángulo <rect> que actúa como fondo y llena todo el lienzo del SVG. Cuando se hace clic en el SVG, una función de JavaScript alterna el color de fondo entre dos colores “aliceblue” y “mistyrose”.
1<svg id="mySvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2 <!-- Background rectangle -->
3 <rect width="100%" height="100%" fill="aliceblue" />
4
5 <!-- Some content in the SVG -->
6 <circle cx="100" cy="100" r="50" fill="#f3622a" />
7
8 <script type="text/javascript">
9 // JavaScript to change the background color on click
10 document.getElementById("mySvg").addEventListener("click", function() {
11 var rect = document.querySelector("#mySvg rect");
12 rect.setAttribute("fill", rect.getAttribute("fill") === "aliceblue" ? "mistyrose" : "aliceblue");
13 });
14 </script>
15</svg>Esta imagen SVG ilustra el fragmento de código anterior. ¡Haga clic en SVG y cambie el color de fondo!
Conclusión
Si bien SVG carece de una propiedad nativa de “background-color” como los elementos HTML, existen varias formas efectivas de configurar el fondo en SVG. Puede agregar un elemento <rect>, aplicar CSS interno o en línea, o usar JavaScript para cambiar el fondo dinámicamente. Cada método tiene sus propias ventajas, desde control preciso y portabilidad hasta facilidad de mantenimiento e interactividad. Su elección entre ellos dependerá de la complejidad de su SVG y de cómo planea mantenerlo o reutilizarlo.
- Para obtener más información sobre los archivos SVG, su estructura, los pros y los contras de este formato y el historial de SVG, visite el artículo de documentación ¿Qué es un archivo SVG?
- Cómo agregar nuevos elementos SVG y establecer sus propiedades de color, cubrimos en detalle ejemplos de C# en el artículo Editar archivos SVG.
- Cómo trabajar con color SVG usando la biblioteca Aspose.SVG for .NET y cómo cambiar el color de los elementos SVG o el color de fondo en archivos SVG, lo cubrimos en detalle con ejemplos de C# en el artículo Cómo cambiar SVG color.
- Si desea encontrar el color requerido, puede mezclar dos colores usando un Color Mixer gratuito en línea. La aplicación permite mezclar dos colores en diferentes cantidades y ver el resultado después de mezclar. ¡Consulta nuestro Mezclador de colores para divertirte e investigar la naturaleza del color!
