Color SVG – fill, stroke, opacidad y códigos de color

El color SVG controla cómo se pintan formas, paths, líneas y texto. Puedes definir colores con fill, stroke, atributos de opacidad, estilos CSS, nombres de color, HEX, RGB, HSL, gradientes y patrones. Este tutorial explica las reglas básicas del color SVG y muestra cómo se comportan los mismos valores de color en elementos SVG comunes.

Respuesta rápida: En SVG, usa fill para el interior de formas, paths y texto, stroke para contornos y líneas, y opacity, fill-opacity o stroke-opacity para transparencia. Los valores de color pueden ser nombres de color, HEX, RGB/RGBA, HSL/HSLA o referencias url(#id) a gradientes y patrones.

1<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#1f4f72" stroke-width="4" />

En este artículo aprenderás a: definir colores SVG con fill y stroke, elegir formatos de código de color, colorear formas, paths y texto, y evitar errores comunes de color en SVG.

Cómo funciona el color en SVG

En SVG, colorear un elemento se llama pintar. La pintura determina cómo se renderiza un elemento aplicando un relleno, un trazo o ambos. Estas propiedades controlan el interior y el contorno de formas, paths y texto.

SVG admite dos formas comunes de definir colores:

Atributos de presentación, como fill="red" o stroke="#00ff00", escritos directamente en el elemento.
El atributo style, por ejemplo style="fill:#ff0000; stroke:green; stroke-width:2", que sigue la sintaxis CSS estándar.

Ambos enfoques participan en la cascada CSS y en las reglas de herencia, pero no tienen la misma prioridad. Un atributo de presentación como fill="red" es fácil de leer y editar, mientras que una declaración style en línea normalmente sobrescribe la misma propiedad escrita como atributo de presentación. Para una guía más profunda de C# y estilos SVG, consulta SVG CSS vs Inline Styles vs Presentation Attributes.

Fill y stroke explicados

SVG usa dos propiedades principales para aplicar color:

Propiedad	Qué afecta	Comportamiento predeterminado
`fill`	Área interior de una forma o path cerrado	Predeterminado `black`
`stroke`	Contorno de una forma, línea o texto	No se renderiza de forma predeterminada

Una forma puede usar cualquiera de estas propiedades de forma independiente o combinar ambas. Por ejemplo, un círculo puede tener un relleno coloreado y un trazo visible, mientras que un elemento de línea (<line>) solo puede pintarse mediante stroke. Las formas cerradas como <circle>, <rect> y <polygon> admiten tanto fill como stroke.

Reglas de valores de color SVG

SVG aplica varias reglas importantes al interpretar valores de color:

Si no se especifica fill, la forma se rellena de negro de forma predeterminada.
Definir fill="none" o fill="transparent" hace que el interior sea completamente transparente.
Si se omite stroke, no se dibuja contorno, aunque se defina stroke-width.
Tanto fill como stroke aceptan varios formatos de color, incluidos nombres de color, HEX, RGB/RGBA y HSL/HSLA.
Fuentes de pintura más avanzadas, como gradientes y patrones, también pueden usarse como valores de fill o stroke. Los ejemplos siguientes incluyen un relleno con gradiente en texto, y los recursos relacionados enlazan al tutorial específico de gradientes.

Códigos de color SVG – HEX, RGB, HSL y nombres

Resumen rápido

HEX – formato compacto usado a menudo en gráficos SVG estáticos.
RGB/RGBA – útil para control programático de color y transparencia dinámica.
HSL/HSLA – más cómodo para tareas de diseño y variaciones sistemáticas de color.

Puedes expresar un color de varias formas. El mejor formato depende de si el color debe ser legible, compacto, fácil de generar en código o parcialmente transparente.

Formato de color	Mejor para	Ejemplo
Nombre de color	Ejemplos simples y prototipos legibles	`fill="green"`
HEX	Colores compactos y estables en iconos e ilustraciones	`fill="#00FF00"`
RGB	Valores programáticos desde canales rojo, verde y azul	`fill="rgb(0,255,0)"`
RGBA	Color más transparencia en un solo valor	`fill="rgba(0,255,0,0.6)"`
HSL	Ajustes de diseño por tono, saturación y luminosidad	`fill="hsl(120,100%,50%)"`
HSLA	Color HSL más transparencia	`fill="hsla(120,100%,50%,0.6)"`
`url(#id)`	Gradientes y patrones definidos en `<defs>`	`fill="url(#grad1)"`

Ejemplos de códigos de color SVG

Los ejemplos siguientes usan el mismo círculo para comparar solo la sintaxis del color. Cada línea define un fill verde y un stroke rojo en un formato distinto.

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />
2<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />
3<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />
4<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />
5<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />
6<circle cx="50" cy="50" r="40" fill="hsla(120,100%,50%,0.6)" stroke="hsla(0,100%,50%,0.8)" />

Consejo:

Cuando necesites transparencia, prefiere RGBA/HSLA o los atributos específicos fill-opacity y stroke-opacity.
Para una referencia práctica de colores con nombre, consulta el artículo HTML Color Names.

Cómo definir color SVG

Elige el elemento SVG de destino, como <circle>, <path>, <line>, <polygon> o <text>.
Usa fill para el color interior de formas cerradas, paths y texto.
Usa stroke y stroke-width para contornos y color de línea.
Elige un formato de color: nombre, HEX, RGB/RGBA, HSL/HSLA o url(#id) para gradientes y patrones.
Usa fill-opacity, stroke-opacity, RGBA o HSLA cuando se necesite transparencia.
Revisa los valores predeterminados: si falta fill, será negro; si falta stroke, no se dibuja contorno.

Convertidor de color SVG en línea

Usa el convertidor de color en línea cuando necesites un valor exacto antes de colocarlo en fill, stroke, style o una parada de gradiente SVG. Por ejemplo, puedes convertir un color de marca RGB a HEX para obtener marcado SVG compacto, o convertir HEX a HSL cuando quieras ajustar tono, saturación o luminosidad de forma más predecible. El convertidor no edita el archivo SVG directamente; copia el valor convertido en el atributo SVG o declaración CSS que necesites.

Colorear formas SVG

Color de círculo SVG

Un círculo es una de las formas SVG más simples y resulta ideal para demostrar color. Al cambiar fill y stroke, puedes controlar el color del interior del círculo, su contorno o ambos.

El ejemplo siguiente muestra varios círculos con distintas configuraciones de color, desde la versión estándar hasta combinaciones totalmente personalizadas de relleno y trazo.

1<svg height="200" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70"  cy="70" r="50" />
3  <circle cx="200" cy="70" r="50" fill="#79C99E" />
4  <circle cx="330" cy="70" r="50" fill="#79C99E" stroke="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

En este ejemplo:

El primer círculo usa valores predeterminados y aparece relleno de negro.
El segundo círculo aplica solo un color fill.
El tercero combina un fill personalizado con un stroke visible.
El cuarto define stroke-width, pero no un color de trazo, por lo que el contorno sigue invisible.
El último elimina el relleno por completo y dibuja solo el contorno.

Círculos SVG que demuestran combinaciones de fill y stroke

Color de líneas y polilíneas SVG

A diferencia de las formas cerradas, las líneas y polilíneas en SVG se definen principalmente por sus contornos. Por eso son especialmente útiles para demostrar cómo la propiedad stroke controla color, grosor y visibilidad.

El ejemplo siguiente compara elementos <line> simples con elementos <polyline> para mostrar cómo se comportan el color de trazo, el grosor del trazo y el relleno en distintos escenarios.

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" />
5    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
6    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
7    <polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" />
8</svg>

En este ejemplo:

Los tres elementos <line> usan distintos colores de trazo y dependen completamente de stroke para ser visibles, porque las líneas no tienen relleno.
La primera polilínea especifica fill="none", asegurando que solo se vea el contorno.
La segunda polilínea aplica relleno y trazo, lo cual es posible porque las polilíneas forman una figura conectada.
La última polilínea define solo un trazo, por lo que el relleno vuelve al valor predeterminado negro.

Tres líneas SVG y tres polilíneas con comportamiento mixto de stroke, fill y color

Color de polyline y polygon en SVG

A primera vista, polilíneas y polígonos pueden parecer similares, pero se comportan de forma distinta al colorearse. La diferencia clave es que una polilínea es una forma abierta, mientras que un polígono siempre está cerrado.

El ejemplo siguiente usa los mismos valores de fill y stroke para demostrar claramente cómo SVG maneja el color en formas abiertas y cerradas.

1<svg height="400" width="500" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
3    <polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
4</svg>

Ambas formas usan los mismos valores de relleno y trazo, lo que permite ver fácilmente la diferencia de comportamiento:

Polyline abierta y polygon cerrado con fill y stroke idénticos

Color de path SVG

Los paths son los elementos más flexibles de SVG y pueden describir formas abiertas o cerradas. Por eso su esquema de color depende de si el path forma un área cerrada o permanece abierto.

En el ejemplo siguiente, los mismos datos de path se usan dos veces para mostrar cómo afecta fill cuando se desactiva explícitamente y cuando se aplica.

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Unfilled path -->
 3  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 4           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
 5           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
 6        stroke="#a06e84" stroke-width="3" fill="none" />
 7  <!-- Filled path -->
 8  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 9           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
10           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
11        stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" />
12</svg>

La figura muestra cómo se visualizan los valores fill="none" y fill="#74aeaf":

Dos paths SVG comparando fill none y un path coloreado con relleno

Color de texto SVG

Como otras formas SVG, el texto puede tener tanto stroke como fill. En este ejemplo veremos cómo definir color de relleno y color de trazo del texto, y cómo usar un gradiente como relleno. Igual que en todas las formas SVG, si no se especifica fill, el texto se muestra en negro de forma predeterminada:

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:lightsalmon" />
 5			<stop offset="50%" style="stop-color:teal" />
 6			<stop offset="90%" style="stop-color:lightpink" />
 7		</linearGradient>
 8    </defs>
 9    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
10    <text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
11    <text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
12    <text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
13</svg>

La figura muestra los distintos casos de aplicar relleno y trazo para añadir color al texto:

Ejemplos de texto SVG con relleno predeterminado, fill y stroke, texto de contorno y relleno degradado

Puedes leer más sobre cómo estilizar texto en Rellenos y trazos en SVG y Gradientes SVG.

Opacidad SVG y colores transparentes

La opacidad determina qué tan transparente aparece un elemento SVG y cómo se mezcla visualmente con los elementos detrás. En SVG, la transparencia puede definirse directamente dentro del valor de color o mediante propiedades específicas de transparencia. El ejemplo siguiente compara tres enfoques comunes para aplicar transparencia y muestra cómo cada método afecta al resultado final.

 1<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
 2  <!-- RGBA opacity -->
 3  <rect x="310" y="30" width="100" height="100" fill="rgba(0,50,255,0.8)" />
 4  <rect x="250" y="50" width="110" height="100" fill="rgba(0,50,255,0.7)" />
 5  <rect x="170" y="90" width="110" height="100" fill="rgba(0,50,255,0.6)" />
 6  <rect x="100" y="50" width="110" height="100" fill="rgba(0,50,255,0.4)" />
 7  <rect x="50"  y="30" width="110" height="100" fill="rgba(0,50,255,0.2)" />
 8
 9  <!-- HSLA opacity -->
10  <rect x="710" y="30" width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
11  <rect x="650" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
12  <rect x="570" y="90" width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
13  <rect x="500" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
14  <rect x="450" y="30" width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
15
16  <!-- HEX + fill-opacity -->
17  <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
18  <rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
19  <rect x="970"  y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
20  <rect x="900"  y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
21  <rect x="850"  y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
22</svg>

En este ejemplo:

El primer grupo usa colores RGBA, donde el canal alfa controla la transparencia dentro del valor de color.
El segundo grupo usa HSLA, que separa tono y luminosidad de la opacidad, algo cómodo para ajustes de diseño.
El tercer grupo combina colores HEX con fill-opacity, manteniendo color y opacidad definidos de forma independiente.
Los tres enfoques producen resultados visualmente similares, pero difieren en flexibilidad y facilidad de modificar la opacidad después.

Tres conjuntos de rectángulos SVG que muestran RGBA, HSLA y HEX con fill-opacity

Errores comunes y soluciones

Estos son algunos de los problemas más habituales que causan comportamientos inesperados del color en SVG.

Problema	Causa	Solución
El trazo no se ve	`stroke-width` está definido, pero falta el color `stroke`	Añade un valor `stroke`, por ejemplo `stroke="#d80539" stroke-width="4"`
La forma aparece negra en lugar de transparente	Se omite `fill` y SVG usa el relleno negro predeterminado	Usa `fill="none"` cuando solo deba verse el contorno
El valor de color se ignora	La cadena de color está mal formada o no es compatible	Usa un nombre de color válido, HEX de 3 o 6 dígitos, RGB/RGBA o HSL/HSLA
La opacidad no tiene efecto	El color HEX no incluye transparencia	Usa RGBA, HSLA, `fill-opacity` o `stroke-opacity`
El color CSS no se aplica	Un `style` en línea o una regla CSS más específica lo sobrescribe	Inspecciona los estilos calculados y elimina o actualiza el `style`, `fill`, `stroke` o regla CSS que compite

Consejo: Si los colores no se renderizan como esperas, abre el SVG en las herramientas de desarrollador del navegador. Namespaces (xmlns) faltantes o pequeños errores de sintaxis suelen impedir que los colores se rendericen correctamente.

Recetas rápidas de color SVG

Objetivo	Fragmento de código
Colorear una forma	`<circle cx="50" cy="50" r="40" fill="#E74C3C" />`
Hacer una forma semitransparente	`<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />`
Combinar fill + stroke	`<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />`
Aplicar solo un trazo	`<line x1="0" y1="0" x2="100" y2="0" stroke="#ff6600" stroke-width="2" />`

FAQ – Color SVG

¿Qué formato de color SVG debería usar?

Usa HEX para arte estático compacto, RGB/RGBA cuando los valores vengan de código o necesiten transparencia alfa, y HSL/HSLA cuando quieras ajustar tono, saturación o luminosidad. Los nombres de color sirven para ejemplos simples, pero HEX o RGB suelen ser más claros en archivos SVG de producción.

¿Cómo hago transparente un color SVG?

Usa valores rgba() o hsla(), o mantén el color separado y añade fill-opacity o stroke-opacity. Usa opacity solo cuando todo el elemento deba volverse transparente.

¿Puedo usar CSS para estilizar colores SVG?

Sí. Puedes aplicar colores SVG con estilos en línea, bloques de estilo o CSS externo usando fill, stroke y propiedades relacionadas. El style en línea y los atributos de presentación pueden sobrescribir reglas CSS más generales.

¿Por qué mi forma SVG se vuelve negra?

Si fill no se especifica, SVG rellena las formas cerradas con negro de forma predeterminada. Añade fill="none" para una forma solo con contorno o define un color de relleno específico.

¿SVG puede usar valores HEX, RGB y HSL?

Sí. SVG acepta nombres de color, valores HEX, RGB/RGBA, HSL/HSLA y referencias de pintura como url(#gradient-id). Usa RGBA, HSLA o atributos de opacidad cuando el color deba ser transparente.

¿Por qué fill no cambia el color de mi línea SVG?

Un elemento <line> no tiene área interior, así que fill no lo hace visible. Usa stroke para líneas SVG, polilíneas, contornos y paths abiertos.

¿SVG puede usar gradientes como colores?

Sí. Usa fill="url(#gradient-id)" o stroke="url(#gradient-id)" para aplicar un gradiente definido en la sección <defs> del SVG.

¿Cómo cambio colores SVG mediante código?

Usa un flujo de trabajo con DOM SVG: carga el archivo, selecciona el elemento de destino, actualiza fill, stroke, style o valores de paradas de gradiente, y guarda el documento. Consulta Cómo cambiar color SVG para ejemplos centrados en color, o Modificar estilos SVG mediante programación en C# cuando el color esté controlado por estilos en línea, reglas CSS o normalización de estilos. Para Python via .NET, consulta Cambiar colores SVG en Python.

Especificación y recursos relacionados

La sección de la especificación SVG sobre pintura define pintura SVG, fill, stroke, opacidad, gradientes, patrones y servidores de pintura.
La lista de palabras clave de color de SVG 1.1 es útil para valores con nombre como red, green o DarkCyan.
Usa Rellenos y trazos en SVG para ancho de trazo, extremos, uniones, guiones y atributos de pintura.
Abre Gradientes SVG para aplicar gradientes lineales o radiales a rellenos y trazos.
Usa SVG Styling, Fonts, and Gradients in C# como hub para CSS, estilos en línea, fuentes, gradientes y flujos de estilo programáticos.
Consulta Paint Builder para ejemplos de API .NET que definen valores stroke y fill mediante código.
Consulta Cómo cambiar color SVG para ejemplos en C# que actualizan colores SVG en archivos.
Consulta Cambiar colores SVG en Python para ejemplos de Python via .NET que editan fill, stroke, estilos en línea y paradas de gradiente.

Usa el Color Mixer gratuito en línea cuando necesites mezclar dos colores y previsualizar el resultado visualmente.

Rellenos y trazos en SVG Color de fondo SVG