Rellenos y trazos en SVG – conceptos básicos y código SVG

Tanto el relleno como el trazo son operaciones de pintura. Todos los elementos gráficos, como formas, trazados y texto, se representan mediante relleno. El relleno pinta el interior del objeto y el trazo pinta a lo largo de su contorno. El trazo SVG y el relleno SVG son algunas de las principales propiedades CSS que se pueden configurar para cualquier línea, texto y forma. En el archivo de texto SVG, se pueden especificar tanto en el atributo style como usando presentation attributes. Hay un atributo de presentación correspondiente para cada propiedad, que se describe en el capítulo Estilo de la especificación W3 SVG 2.0.

Propiedades de relleno SVG y trazo SVG

Colorizar o pintar significa la operación de agregar color, degradados o patrones a los gráficos usando fill y stroke. Un conjunto de atributos define sus propiedades: fill, fill-opacity, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit y stroke-opacity. Estos son algunos de los presentation attributes.

Las funciones de relleno SVG y trazo SVG se pueden configurar en el atributo style. La sintaxis para especificar propiedades es:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Pero las mismas propiedades de style se pueden dar en los atributos de presentación con la siguiente sintaxis:

stroke="green" stroke-width="2" fill="#ff0000"

Para especificar el color SVG, puede tomar nombres de colores, valores rgb, valores hexadecimales, etc. En los siguientes ejemplos se utilizarán diferentes formas de escribir características de rellenos y trazos.

Atributo de Fill

El atributo fill colorea el interior de un elemento gráfico. Cuando rellenas una forma o curva SVG, el fill también colorea los trazados abiertos como si el último punto estuviera conectado al primero, aunque el color del stroke en esa parte del trazado no aparecerá. Si no se especifica la propiedad del atributo fill, el valor predeterminado es negro.

Para que no haya relleno, debe especificar el valor del atributo fill="none" o fill="transparent".

El siguiente ejemplo ilustra las propiedades fill="none" presentes y faltantes ( 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>

Líneas SVG y Stroke Caps

Las propiedades de trazo más utilizadas son las siguientes: stroke, stroke-width, stroke-linecap y stroke-linejoin. Definen el color, el grosor, los tipos de finales de línea de un camino abierto y el tipo de unión de las dos líneas que se encuentran.

Para cualquier línea, es posible establecer la forma de sus extremos. Esto tiene sentido si la línea tiene la propiedad stroke-width. El siguiente ejemplo muestra cómo las propiedades stroke-width y stroke-linecap definen el ancho del trazo SVG y la forma de sus extremos ( 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, utilizamos un elemento <g> para establecer propiedades comunes en objetos, como stroke y stroke-width.

En el ejemplo anterior, las rutas SVG (líneas SVG) se muestran en naranja y los trazos SVG en gris.

El atributo CSS stroke-linecap define cómo se representan los extremos de una línea SVG y tiene tres valores posibles: butt, square y round.

Como resultado del uso butt, el límite del trazo se corta con una regla que es normal exactamente donde termina la línea. El valor square da como resultado un límite de trazo que parece un corte, pero se extiende ligeramente más allá de donde termina la línea. La distancia que recorre el trazo más allá del trazado es la mitad del valor de stroke-width. El valor round significa que la tapa del trazo tiene extremos redondos, cuyo radio depende del stroke-width.

Un ejemplo más ilustra una propiedad 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>

Tenga en cuenta que la línea naranja en el interior es el objeto (polilínea), alrededor está el trazo SVG.

El atributo stroke-linejoin puede tomar tres valores: miter, round y bevel. La miter extiende el trazo para crear una esquina cuadrada en el punto de unión de las líneas; round crea un trazo redondeado en el extremo de unión; bevel forma un nuevo ángulo para ayudar en la transición entre las dos líneas.

Puntos y rayas. Stroke-dasharray

Todas las propiedades de trazo SVG se pueden aplicar a cualquier tipo de línea, texto y contornos de elementos como un círculo, rectángulo, etc. La propiedad stroke-dasharray en CSS es para crear guiones en el trazo de formas SVG. El atributo stroke-dasharray convierte los trazados en guiones y hace que el trazo de una forma SVG se represente con líneas discontinuas. Los valores que toma el atributo stroke-dasharray son una matriz de comas o números separados por espacios en blanco. Estos valores definen la longitud de los guiones y espacios.

Aquí hay un ejemplo 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 SVG grises y naranjas, especificamos un número par de valores: cada una de las parejas de números significa áreas “llenas y no rellenas”. Los valores predeterminados están en píxeles.

Si se especifica un número impar de valores, la lista se repite para producir un número par de valores. Por ejemplo, 20 10 5 se convierte en 20 10 5 20 10 5, como para la línea de color oliva.

Además, puede especificar por separado la opacidad del relleno o trazo SVG controlado por los atributos fill-opacity y stroke-opacity.

Puedes experimentar con el atributo stroke-dasharray. Se pueden lograr cosas asombrosas con trazos SVG y formas SVG simples ( 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>

Aspose.SVG ofrece Aplicaciones web gratuitas SVG para convertir archivos SVG o de imágenes, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a base64 y vectorizar texto. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!