Rellenos y trazos en SVG – atributos y ejemplos

El relleno y el trazo son las dos operaciones de pintura básicas en SVG. Las formas, paths y textos pueden usar fill para la pintura interior y stroke para el contorno. Ambos pueden aplicarse como atributos de presentación, por ejemplo fill="red", o dentro del atributo CSS style.

Este artículo explica cómo funcionan fill y stroke en SVG, aclara la diferencia entre propiedades y atributos, y muestra formas prácticas de controlar color, opacidad, ancho de línea, extremos, uniones y patrones de guiones.

En este artículo aprenderás a:

• Usar fill para pintar el interior de formas, paths y texto SVG.
• Usar stroke y stroke-width para dibujar contornos.
• Controlar extremos de trazo, uniones, patrones de guiones y opacidad.
• Elegir entre atributos de presentación y estilos CSS en línea.
• Evitar errores comunes de fill y stroke, como el relleno negro predeterminado o trazos invisibles.

Modelo de pintura SVG – fill y stroke

Cuando se renderiza una forma SVG, la pintura ocurre en dos pasos:

1. Primero se aplica el fill, que pinta el interior de la forma.
2. Después se aplica el stroke, que pinta el contorno centrado sobre el path de la forma.

Tanto el relleno como el trazo son opcionales:

• Si no se especifica fill, la forma se rellena de negro de forma predeterminada.
• Si no se especifica stroke, no se dibuja ningún contorno.

Para especificar colores SVG, puedes usar nombres de color, valores HEX, valores RGB, currentColor, gradientes o patrones. Los ejemplos siguientes muestran varias formas de escribir valores de fill y stroke en marcado SVG.

Propiedades y atributos en SVG

En SVG, fill y stroke se definen como propiedades CSS, pero pueden aplicarse de distintas formas.

• Una propiedad se refiere al concepto de estilo en sí, por ejemplo fill o stroke-width.
• Un atributo se refiere a cómo esa propiedad se aplica en el marcado SVG.

Concepto	Ejemplo
Propiedad CSS	fill, stroke, stroke-width
Atributo de presentación	fill="red" stroke="#00ff00" stroke-width="2"
CSS en línea	style="fill:red; stroke:#00ff00; stroke-width:2"

En este artículo:

• Propiedad se refiere a la característica conceptual de estilo.
• Atributo se refiere a su uso dentro del marcado SVG.

Usa atributos de presentación para marcado SVG simple y CSS en línea cuando varias propiedades de estilo deban permanecer juntas en el mismo elemento. Ambas formas son habituales en archivos SVG.

Cómo usar fill y stroke en SVG

1. Elige el elemento SVG que debe pintarse, como <path>, <rect>, <circle>, <polyline> o <text>.
2. Define fill para pintar el interior, o usa fill="none" cuando solo deba verse el contorno.
3. Define stroke para establecer el color del contorno.
4. Define stroke-width para hacer visible el contorno y controlar su grosor.
5. Añade stroke-linecap, stroke-linejoin o stroke-dasharray cuando el contorno necesite una forma o patrón específico.
6. Usa fill-opacity y stroke-opacity cuando el relleno y el trazo necesiten valores de transparencia separados.

SVG Fill

La propiedad fill define cómo se pinta el interior de una forma o texto. Se aplica a formas SVG como <rect>, <circle>, <path> y elementos de texto. Si fill no se especifica, el valor predeterminado es black.

Valor	Descripción	Ejemplo
valor de color	Rellena la forma con un color sólido	fill="red"
none	Desactiva el relleno	fill="none"
url(#id)	Usa un servidor de pintura (gradiente o patrón)	fill="url(#gradient1)"
currentColor	Usa el color de texto actual	fill="currentColor"

El ejemplo siguiente compara un path con fill="none" y el mismo path sin un relleno explícito ( two-paths.svg):

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" transform="translate(0 125)" />
</svg>

SVG Stroke

La propiedad stroke define la pintura usada para el contorno de una forma. A diferencia de fill, stroke está desactivado de forma predeterminada. El trazo se centra sobre el path de la forma y se extiende por igual hacia dentro y hacia fuera.

Color y ancho del trazo

Propiedad	Descripción	Ejemplo
stroke	Define el color del trazo	stroke="red"
stroke-width	Controla el grosor del trazo	stroke-width="5"

Valores de stroke-linecap

En cualquier línea se puede definir la forma de sus extremos. La propiedad stroke-linecap define cómo se renderizan los extremos de una línea SVG y tiene tres valores posibles:

Valor	Aspecto
butt	Borde plano que termina exactamente en el punto final del path.
square	Borde plano que se extiende medio stroke-width más allá del punto final.
round	Extremo semicircular cuyo radio equivale a la mitad del stroke-width.

El efecto se aprecia cuando la línea tiene un stroke-width visible. El ejemplo siguiente muestra cómo stroke-width y stroke-linecap definen el grosor del trazo y la forma del extremo ( lines.svg).

<svg height="200" width="800" xmlns="http://www.w3.org/2000/svg">
  <g stroke="grey">
    <path stroke-width="3" d="M 5 20 l 215 0" />
    <path stroke-width="15" d="M 5 60 l 215 0" />
    <path stroke-width="30" d="M 5 100 l 215 0" />
  </g>
 <g stroke="grey" stroke-width="30">
    <path stroke-linecap="butt" d="M 300 20 l 215 0" />
    <path stroke-linecap="round" d="M 300 60 l 215 0" />
    <path stroke-linecap="square" d="M 300 100 l 215 0" />
  </g>
  <g stroke="orange" stroke-width="2">
    <line x1="300" y1="20" x2="515" y2="20" />
    <path d="M 300 60 l 215 0" />
    <path d="M 300 100 l 215 0" />
  </g>
</svg>

En el ejemplo, el elemento <g> define propiedades compartidas, como stroke y stroke-width, para varios paths hijos.

En el ejemplo anterior, las líneas guía naranjas muestran los paths originales, y los trazos grises muestran cómo el ancho del trazo y los extremos cambian el resultado renderizado.

Valores de stroke-linejoin

La propiedad stroke-linejoin controla la forma de las esquinas donde se unen dos segmentos de trazo. Puede usar tres valores comunes:

Valor	Descripción
miter	Extiende los bordes exteriores hasta formar una esquina (predeterminado).
round	Redondea la esquina con un radio de la mitad del ancho del trazo.
bevel	Corta la esquina y crea un borde plano.

El siguiente ejemplo ilustra los valores de stroke-linejoin ( linejoin.svg):

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <g stroke-width="20" fill="none">
        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" stroke="grey" stroke-linecap="butt"  stroke-linejoin="miter" />
        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" stroke="#CD5C5C" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" stroke="black"  stroke-linecap="square" stroke-linejoin="bevel" />
    </g>
    <g fill="none" stroke="orange" stroke-width="2">
        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" />
        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" />
        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" />
    </g>
</svg>

La línea naranja muestra la polilínea original, mientras que el contorno coloreado más ancho muestra el trazo renderizado alrededor de ella.

Puntos y guiones – stroke-dasharray

Todas las propiedades de trazo SVG pueden aplicarse a cualquier tipo de línea, texto y contornos de elementos como círculos o rectángulos. La propiedad stroke-dasharray convierte un trazo sólido en una secuencia de guion y espacio. El atributo acepta una lista de números que definen longitudes alternas de guiones y espacios en unidades de usuario, normalmente píxeles.

stroke-dasharray="10 5"   /* guion 10, espacio 5 */
stroke-dasharray="20 10 5"/* guion 20, espacio 10, guion 5, luego se repite */

Propiedad	Descripción
stroke-dasharray	Define el patrón de guiones y espacios
stroke-dashoffset	Desplaza el patrón de guiones

Ejemplo de uso de stroke-dasharray ( dasharray.svg):

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="30" x2="400" y2="30" style="stroke:rgb(112, 128, 144); fill:none; stroke-width:10; stroke-dasharray:10 5;" />
    <line x1="20" y1="80" x2="400" y2="80" style="stroke:olive; fill:none; stroke-width: 20; stroke-dasharray: 20 10 5;" />
    <path d="M 10 200 Q 50 100 150 200 T 230 200 T 300 200 T 390 200" stroke="#FF8C00" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="15 10 2 8" />
</svg>

Para las líneas gris y naranja, el patrón de guiones usa un número par de valores: cada par representa longitud del guion y longitud del espacio. Si la lista tiene un número impar de valores, SVG repite la lista para formar un patrón par. Por ejemplo, 20 10 5 se convierte en 20 10 5 20 10 5, como muestra la línea oliva.

Puedes experimentar con el atributo stroke-dasharray. Con trazos SVG y formas simples se pueden lograr efectos llamativos ( dasharray-example.svg):

<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg">
    <g fill="none">
        <circle cx="100" cy="100" r="40" stroke="red" stroke-width="55" stroke-dasharray="4,2" />
        <circle cx="100" cy="100" r="30" stroke="grey" stroke-width="45" stroke-dasharray="5,2" transform="translate(120,40)" />
        <circle cx="100" cy="100" r="35" stroke="orange" stroke-width="45" stroke-dasharray="9,3" transform="translate(30,130)" />
		<circle cx="100" cy="100" r="20" stroke="pink" stroke-linecap="round" stroke-width="20" stroke-dasharray="10,15" transform="translate(380,120)" />
        <rect x="320" y="100" width="100" height="100" stroke="DarkCyan" stroke-width="55" stroke-dasharray="7 7 3 2" />
        <text x="200" y="300" font-family="arial" font-size="60" stroke="#000080" stroke-width="3" stroke-dasharray="2 1">I love SVG!</text>
    </g>
</svg>

Atributos adicionales de pintura SVG

Atributo	Propósito	Ejemplo
fill-opacity	Valor de 0 transparente a 1 opaco	fill-opacity="0.6"
fill-rule	Determina cómo se rellenan formas complejas. Opciones: nonzero predeterminado o evenodd.	fill-rule="evenodd"
stroke-opacity	Valor de 0 transparente a 1 opaco	stroke-opacity="0.6"
stroke-miterlimit	Controla la longitud máxima de una unión miter. Valores mayores que 1.	stroke-miterlimit="4"
stroke-dashoffset	Desplaza el inicio de un patrón de guiones a lo largo del path.	stroke-dashoffset="5"

Estos atributos pueden combinarse con los anteriores para lograr un control visual preciso.

FAQ – Fill y stroke en SVG

¿Cómo hago que un path aparezca solo como contorno, sin relleno?

Define fill="none". Esto elimina la pintura interior y mantiene visible el trazo. Usa stroke y stroke-width para controlar el contorno.

¿Cuál es la diferencia entre fill y stroke en SVG?

fill pinta el interior de una forma, path o texto. stroke pinta el contorno a lo largo del borde del elemento o path. Una forma puede usar ambos al mismo tiempo.

¿Por qué stroke-dasharray se ve irregular en paths curvos?

Las longitudes de los guiones se miden a lo largo de la longitud del path. Las curvas pueden hacer que los segmentos parezcan visualmente irregulares. Ajusta los valores de guion y espacio o usa stroke-dashoffset para afinar el patrón.

¿Cuándo debo usar stroke-linecap="round" y cuándo stroke-linejoin="round"?

stroke-linecap afecta los extremos de subpaths abiertos, mientras que stroke-linejoin afecta las esquinas donde se unen dos segmentos. Usa round en ambos cuando los extremos y las esquinas deban verse suavizados.

¿Se pueden usar gradientes para fill y stroke?

Sí. Los gradientes y patrones se aplican con fill="url(#id)" o stroke="url(#id)", donde id apunta a una definición de gradiente o patrón.

Errores comunes y soluciones

Problema	Causa	Solución
La forma aparece negra aunque esperabas otro resultado	Se omitió fill o quedó con su valor predeterminado	Añade fill="none" o un color válido, por ejemplo fill="#00ff00".
Faltan guiones en una línea curva	Los valores de stroke-dasharray son demasiado pequeños para la longitud de la curva	Aumenta las longitudes de guion y espacio o usa stroke-dashoffset para reposicionar.
Los extremos del trazo parecen recortados	No se definió stroke-linecap al usar trazos gruesos	Usa stroke-linecap="square" o round para un renderizado correcto de los extremos.
Las uniones miter crean picos demasiado largos	Ángulos agudos usan stroke-linejoin="miter" con un límite alto	Reduce stroke-miterlimit o usa stroke-linejoin="round" o bevel.
La opacidad afecta a fill y stroke sin querer	Se usa opacity en lugar de fill-opacity / stroke-opacity	Sustituye opacity por fill-opacity y/o stroke-opacity.

Recetas rápidas

Hoja rápida de fill y stroke

Objetivo	Código SVG
Desactivar relleno	fill="none"
Color de relleno sólido	fill="orange"
Relleno semitransparente	fill-opacity="0.5"
Activar trazo	stroke="black"
Contorno más grueso	stroke-width="4"
Trazo discontinuo	stroke-dasharray="10 5"
Extremos redondeados	stroke-linecap="round"

Ejemplos prácticos

1. Relleno sólido y trazo simple

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50" fill="#4CAF50" stroke="#026802" stroke-width="4"/>
</svg>

2. Línea discontinua con desplazamiento

<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="20" x2="190" y2="20" stroke="#ff6600" stroke-width="8" stroke-dasharray="15 5" stroke-dashoffset="7"/>
</svg>

Trazo discontinuo con extremos redondeados

<line x1="10" y1="40" x2="140" y2="40"
      stroke="black"
      stroke-width="4"
      stroke-dasharray="10 6"
      stroke-linecap="round" />

Especificación y recursos relacionados

• La sección de la especificación SVG sobre pintura define fill, stroke, servidores de pintura, opacidad, extremos, uniones y propiedades de guiones.
• La definición de SVG 2 de atributos de presentación explica cómo propiedades de estilo como fill y stroke pueden escribirse directamente como atributos SVG.
• La lista de palabras clave de color de SVG 1.1 es útil cuando necesitas valores de color con nombre como red, orange o DarkCyan en ejemplos SVG.
• Usa Color SVG para formatos de color, opacidad y transparencia en SVG.
• Abre Gradientes SVG para aplicar gradientes lineales o radiales a rellenos y trazos.
• Usa Formas SVG para ver cómo fill, stroke y stroke-width se aplican a formas SVG básicas.
• Consulta Editar archivo SVG para ejemplos de API .NET que crean elementos SVG y definen propiedades de color mediante código.
• Consulta Cómo cambiar el color SVG para ejemplos .NET centrados en actualizar colores de elementos SVG y color de fondo.
• Consulta Cambiar colores SVG en Python para ejemplos de Python via .NET que editan fill, stroke, estilos en línea y paradas de gradiente.