Color de fondo SVG – cómo añadirlo o cambiarlo

Por qué definir un color de fondo en SVG

Scalable Vector Graphics (SVG) es un lenguaje basado en XML para crear gráficos vectoriales 2D y gráficos mixtos vector-raster. SVG es independiente de la resolución, fácil de editar e ideal para logotipos, iconos, gráficos sencillos y animaciones. Definir un color de fondo mejora la claridad visual, mantiene la coherencia del diseño sobre páginas con patrones y ayuda a la accesibilidad cuando los SVG aparecen sobre fondos web variables. Para más información sobre el estándar SVG, consulta la especificación W3C SVG.

Respuesta rápida: SVG no tiene una propiedad nativa background-color para el canvas de dibujo. La forma más fiable de añadir o cambiar un color de fondo SVG es colocar un <rect> como primer hijo de <svg>, definir width="100%" y height="100%", y aplicar el color requerido con fill.

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue" />
3  <circle cx="100" cy="100" r="70" fill="teal" />
4</svg>

Esta guía explica qué es un fondo SVG, por qué background-color puede ser engañoso en <svg> y cómo definir un fondo con un rectángulo, CSS en línea, CSS interno o JavaScript.

Qué es un fondo SVG

Un fondo SVG es una capa visual que aparece detrás de todos los demás elementos de una imagen SVG. A diferencia de los elementos HTML, el contenido SVG no tiene una capa de fondo propia, por lo que un enfoque común es añadir un rectángulo (<rect>) que cubra todo el canvas SVG. Ese <rect> actúa como fondo y normalmente se coloca como primer elemento hijo del SVG para que aparezca detrás de todos los demás elementos gráficos.

El elemento de fondo no tiene que ser un rectángulo; puede ser un círculo, polígono, path u otra forma adecuada para la ilustración. Para un fondo de canvas completo, sin embargo, un rectángulo es la opción más simple y predecible. Para crear un fondo de color, define el color fill de ese elemento. SVG admite dos mecanismos comunes:

Método	Descripción	Uso típico
`fill="..."`	Usa un atributo de presentación SVG	Preferido para rectángulos de fondo simples y legibles
`style="fill:..."`	Aplica `fill` mediante una declaración CSS en línea	Útil cuando el SVG ya almacena estilos visuales en atributos `style`

Si fill y style="fill:..." están definidos en el mismo elemento, la declaración style en línea normalmente gana en la cascada CSS. Para un fondo estático simple, prefiere el atributo fill, salvo que el SVG ya use estilos basados en CSS.

Cómo añadir color de fondo SVG

Añade un elemento <rect> como primer hijo dentro de <svg>.
Define width="100%" y height="100%", o ajusta el rectángulo a las dimensiones de viewBox.
Define el color de fondo con fill, por ejemplo fill="aliceblue" o fill="#f0f0f0".
Coloca todo el arte visible después del rectángulo de fondo para que se renderice encima.
Usa CSS en línea, una clase CSS interna o JavaScript solo cuando el fondo deba seguir un sistema de estilos existente o cambiar dinámicamente.

Cambiar el color de fondo SVG

A partir del concepto anterior, la forma más fiable de añadir un fondo SVG es insertar un <rect> que cubra todo el canvas.

Usar un elemento rectángulo como fondo SVG

Enfoque recomendado: Un <rect> como primer hijo es el patrón de marcado SVG más fiable porque el fondo se convierte en parte del dibujo.

Coloca el <rect> como primer hijo para que quede detrás de todos los demás gráficos. Para que el fondo cubra todo el canvas SVG, define width="100%" y height="100%". Para establecer el color de fondo, usa el atributo fill con el valor 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írculo SVG sobre un rectángulo de tamaño completo usado como color de fondo SVG fiable

Para ejemplos programáticos en C# que añaden, cambian o actualizan elementos de fondo en archivos SVG existentes, consulta Cambiar color de fondo SVG – ejemplos en C#.

Por qué background-color no funciona como fondo del contenido SVG

La especificación SVG no define background-color como una capa de pintura para el contenido SVG. Cuando usas la propiedad background-color en el atributo style de un elemento <svg>, no añade realmente una forma de fondo al marcado SVG. En su lugar, puede establecer el color de fondo del espacio que ocupa el SVG en un navegador. Esto puede dar la impresión de que el SVG tiene color de fondo, pero en realidad es el fondo del contenedor circundante, es decir, 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ás que el fondo real de la imagen SVG es el rectángulo que cubre todo el canvas SVG (200x200 px). También verás el efecto de aplicar style="background-color: lightsteelblue": el fondo del contenedor circundante se rellena con 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 anterior:

background-color en el elemento svg comparado con un fondo real creado con rectángulo

Como este efecto no es un fondo real del contenido SVG, puede comportarse de forma distinta en navegadores, renderizadores, exportaciones o contextos de incrustación. Lo que parece correcto en un navegador puede desaparecer o cambiar cuando el SVG se convierte, reutiliza o procesa con otra herramienta.

Recomendación: Para asegurar que tu SVG tenga un fondo consistente y fiable, usa un método compatible con navegadores y plataformas, como añadir un elemento <rect> dentro del SVG para actuar como fondo.

CSS en línea para color de fondo SVG

El CSS en línea consiste en insertar estilos CSS directamente en elementos SVG individuales mediante el atributo style. Este método permite aplicar estilos específicos a elementos concretos sin necesitar hojas de estilo externas o internas.

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 control preciso sobre elementos individuales y buena portabilidad. Sin embargo, si varios elementos comparten el mismo estilo, puede generar código repetitivo y dificultar el mantenimiento, especialmente en SVG grandes.

CSS interno para color de fondo SVG

Para establecer un color de fondo SVG con CSS interno, puedes usar la etiqueta <style> dentro del propio SVG. Esto permite crear reglas de estilo centralizadas que pueden aplicarse a varios elementos.

En este ejemplo, la etiqueta <style> define la clase CSS .background. Esta clase se aplica al elemento <rect> mediante el atributo class. La clase .background establece la propiedad fill en aliceblue, coloreando el <rect> y creando el 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 algo más complejo que el CSS en línea. Sin embargo, permite reutilizar estilos en varios elementos, reduce la redundancia y facilita actualizar los estilos en todos los elementos afectados.

JavaScript para fondos SVG dinámicos

JavaScript puede usarse dentro de SVG para manipular sus elementos, igual que en HTML, cuando el contexto de incrustación permite scripts. Es útil para gráficos interactivos, animaciones y cambios de fondo basados en estado, pero no debería usarse para el fondo estático de un icono o logotipo.

En el siguiente ejemplo, el SVG contiene un rectángulo <rect> que actúa como fondo y rellena todo el canvas SVG. Al hacer clic en el SVG, una función JavaScript alterna el color de fondo entre 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    document.getElementById("mySvg").addEventListener("click", function() {
10      var rect = document.querySelector("#mySvg rect");
11      rect.setAttribute("fill", rect.getAttribute("fill") === "aliceblue" ? "mistyrose" : "aliceblue");
12    });
13  </script>
14</svg>

Esta imagen SVG ilustra el fragmento anterior. Haz clic en el SVG para cambiar el color de fondo.

Nota: JavaScript debería usarse solo para fondos interactivos o basados en estado. Para archivos SVG estáticos, como iconos o logotipos, prefiere <rect> con fill para evitar complejidad innecesaria.

Errores comunes y soluciones

Problema	Causa	Solución
El fondo aparece transparente	No se añadió ningún `<rect>`	Inserta un `<rect>` que cubra el 100% de anchura y altura como primer hijo
`background-color` parece funcionar solo en un navegador	La propiedad se aplica al contenedor SVG exterior, no al canvas	Usa un fondo con `<rect>` para mayor consistencia entre navegadores
Los estilos en línea entran en conflicto con CSS externo	Hay definiciones duplicadas de `fill` en el mismo elemento	Consolida estilos con CSS interno o selectores de clase
JavaScript no cambia el color	Selector incorrecto, falta `id`, scripts desactivados o SVG incrustado en un contexto que no ejecuta scripts	Asegura que el rectángulo tenga un selector único (`#mySvg rect`) y usa JavaScript solo donde los scripts SVG estén permitidos
El SVG escala pero el fondo no llena el viewBox	El rectángulo usa dimensiones fijas en píxeles	Usa `width="100%" height="100%"` o iguala las dimensiones del `viewBox`

Recetas rápidas

Añadir un fondo sólido con <rect>

1<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="#f0f0f0"/>
3  <!-- your graphics -->
4</svg>

Cambiar el fondo cuando el usuario apunta al SVG

1<svg class="hover-bg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <style>
3    .hover-bg:hover rect { fill: #ffebcd; }
4  </style>
5  <rect width="100%" height="100%" fill="aliceblue"/>
6  <circle cx="100" cy="100" r="70" fill="teal"/>
7</svg>

Alternar el fondo con JavaScript

1<svg id="toggleSvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue"/>
3  <script>
4    document.getElementById('toggleSvg').addEventListener('click', function(){
5      const r = this.querySelector('rect');
6      r.setAttribute('fill', r.getAttribute('fill') === 'aliceblue' ? 'mistyrose' : 'aliceblue');
7    });
8  </script>
9</svg>

Reutilizar una clase de fondo con CSS interno

1<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
2  <style>.bg{fill:#e6e6fa;}</style>
3  <rect class="bg" width="100%" height="100%"/>
4  <!-- other elements -->
5</svg>

FAQ – Color de fondo SVG

¿Puede SVG tener una propiedad background-color?

No de la misma forma que un elemento HTML. background-color en <svg> puede colorear el área asignada por el navegador, pero no crea una capa de fondo dentro del dibujo SVG. Usa un <rect> como primer hijo con fill para un fondo SVG fiable.

¿Cómo hago transparente el fondo de un SVG?

No añadas un rectángulo de fondo, o elimina el elemento de fondo existente. El contenido SVG es transparente de forma predeterminada salvo que una forma, imagen o estilo rellene el canvas.

¿Por qué background-color funciona en el navegador pero no después de exportar?

El navegador puede pintar el espacio ocupado por el elemento <svg>, mientras que exportadores y renderizadores suelen basarse en el contenido SVG real. Un fondo con <rect> forma parte del marcado SVG y es más predecible durante la exportación.

¿Debo usar fill o style para un rectángulo de fondo SVG?

Usa fill para el fondo estático más simple. Usa style="fill:..." o una clase CSS cuando el SVG ya centralice estilos o necesite cambios según tema.

Recursos relacionados

Qué es un archivo SVG explica estructura SVG, marcado XML, escalabilidad y casos de uso comunes.
Color SVG cubre fill, stroke, opacidad, colores con nombre, HEX, RGB, HSL y comportamiento del color en formas, paths y texto.
Editar archivos SVG muestra cómo añadir nuevos elementos SVG y actualizar sus atributos en C#.
Cambiar color de fondo SVG ofrece ejemplos en C# para añadir o cambiar elementos de fondo SVG con Aspose.SVG for .NET.
Usa el Color Mixer gratuito en línea cuando necesites elegir o previsualizar un color de fondo antes de colocarlo en marcado SVG.

Color SVG Contenido SVG incrustado