Orden de pintado SVG: mantén los contornos gruesos detrás de las letras

Establece paint-order="stroke fill" en un elemento SVG de texto o de forma para dibujar su contorno antes que su relleno. Con un relleno opaco, el relleno cubre la parte del trazo orientada hacia dentro, de modo que un contorno grueso no invade la superficie coloreada de las letras. También puedes escribir paint-order: stroke fill; en CSS.

El trazado, el tamaño de la fuente y el ancho del trazo siguen siendo los mismos. Es un ajuste de apariencia útil cuando un logotipo tipográfico con contorno se vuelve demasiado pesado o difícil de leer al aumentar el ancho del trazo. No crea un trazo alineado hacia fuera ni un contorno de corte nuevo.

Por qué el contorno predeterminado invade las letras

SVG normalmente pinta el relleno de un elemento, después su trazo y finalmente sus marcadores. Un trazo centrado se extiende a ambos lados del límite de la forma rellena. Pintarlo al final cubre parte del relleno. En los segmentos estrechos de las letras, un trazo grande puede ocultar la mayor parte del color de la superficie.

Invertir las dos primeras operaciones permite que el relleno cubra ese solapamiento. La especificación de pintado de SVG define el orden, y la referencia de atributos SVG de MDN documenta tanto el atributo como su equivalente CSS. El valor abreviado stroke tiene el mismo orden que stroke fill markers: las operaciones omitidas se ejecutan después, en su orden relativo normal.

El efecto necesita un relleno visible. Un trazado con fill="none" no tiene nada con lo que cubrir la parte interior del trazo. Un relleno parcialmente transparente puede dejar ver ese trazo, así que usa un relleno opaco para obtener el resultado mostrado aquí.

Compara el mismo diseño en dos tamaños

Creamos un logotipo tipográfico corto, BOLD, con texto editable y un pequeño emblema triangular formado por un trazado. La comparación en el navegador que aparece a continuación cambia únicamente el orden de pintado dentro de cada pareja. Usa anchos de trazo de 4 y 8 unidades de usuario SVG y después muestra el mismo viewBox de 400 × 110 con anchos de 400 y 200 píxeles CSS.

Con el ajuste de 8 unidades, el logotipo tipográfico en orden normal pierde gran parte de su superficie amarilla. Pintar el relleno al final mantiene visibles los segmentos amarillos. El efecto sigue apreciándose en la versión de 200 píxeles, pero las aberturas pequeñas continúan siendo estrechas. La pequeña abertura interior del emblema también resulta difícil de distinguir con el trazo más grueso.

Ese último detalle importa: el orden de pintado puede conservar la superficie de una letra sin hacer legibles todos los huecos o separaciones. Los trazos siguen extendiéndose hacia los espacios sin relleno. Si una abertura se cierra al tamaño de visualización previsto, reduce el trazo o simplifica el diseño. Ampliar la vista previa del navegador no sustituye a comprobar el tamaño que realmente verá el lector.

Estos son ejemplos de dibujo originales, no resultados de conversión de PerfectVector. El logotipo tipográfico usa la fuente Arial instalada, con una alternativa sans-serif; otra fuente cambia las formas de las letras y el espaciado.

Prueba un SVG completo

Guarda lo siguiente como wordmark.svg y ábrelo directamente en un navegador. El ejemplo deja suficiente espacio alrededor de las formas para el trazo visible. Cambia paint-order a normal para comparar y después prueba stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

El grupo transmite sus propiedades de pintado al trazado y al texto. Cada elemento hijo usa el orden solicitado para su propia representación. fill-rule="evenodd" da al emblema su abertura interior; es independiente del orden de pintado.

Para reproducir los ejemplos pequeños, cambia width y height a 200 y 55, sin modificar el viewBox. Como este archivo no tiene un trazo que conserve su ancho al escalar, el diseño y el trazo se escalan juntos. Un trazo de 8 unidades pasa a tener 4 píxeles CSS de ancho al representarse a la mitad del tamaño, antes de descontar la parte oculta por el relleno.

Para una versión basada en una hoja de estilos, asigna una clase al elemento de destino y establece:

.outlined-wordmark {
  paint-order: stroke fill;
}

Cuando un atributo de presentación y una declaración CSS especifican la propiedad, CSS tiene prioridad. Si cambiar el atributo parece no tener efecto, inspecciona las reglas aplicadas. La referencia CSS de MDN también explica la herencia y las combinaciones de palabras clave permitidas.

Qué no cambia este ajuste

Alineación del trazo. El trazo sigue el mismo trazado central. Pintar el relleno sobre parte de él crea un borde que parece exterior alrededor de las regiones rellenas, pero no desplaza hacia fuera la geometría del trazo. En el borde de un hueco, la parte visible restante del trazo puede invadirlo.

Apilamiento de objetos separados. Establecer el orden de pintado de un elemento no lo coloca detrás de una forma vecina. Un objeto posterior que se solape con él puede seguir cubriéndolo. Reordena los objetos cuando ese sea el problema. Puedes ver un ejemplo en por qué z-index en SVG no reordena los trazados de un logotipo.

Trazados de corte o desplazamientos. Una cortadora o herramienta de geometría necesita los contornos adecuados. No puedes dar por hecho que interprete un contorno atractivo en el navegador como un único borde unido. Crea e inspecciona por separado la geometría necesaria si el trabajo de entrega lo requiere.

Portabilidad de fuentes. La muestra contiene texto editable. Cambiar su orden de pintado no incorpora la fuente ni fija las formas de los glifos. Usa las comprobaciones de cambios de fuente en SVG si un logotipo tipográfico cambia al abrirlo en otro lugar.

Mantén claras esas distinciones al editar. Un cambio de paint-order es fácil de revertir; expandir trazos o convertir texto en trazados cambia la estructura editable del documento.

Comprueba la copia de entrega en su destino

Empieza con el resultado del navegador y después abre el archivo guardado en la aplicación o el renderizador que lo utilizará. Una vista previa del navegador por sí sola no demuestra que un editor, un conversor PDF o un proceso de producción conserve el aspecto.

1. Compara el color de la superficie y el borde exterior al tamaño final. Mira dentro de B, O y cualquier abertura estrecha del emblema.
2. Confirma que se haya cargado la fuente prevista. Comprueba el espaciado además de las formas de las letras.
3. Comprueba los bordes de la página. Un trazo más ancho puede necesitar más espacio en el área de visualización o de recorte.
4. Vuelve a abrir el archivo de entrega exportado. Una exportación puede cambiar los estilos o la construcción de los objetos aunque el documento de trabajo se viera bien.

Si el destino cambia el contorno, reduce el archivo a una sola forma con relleno y trazo y compárala con el navegador. Sigue el diagnóstico de trazos SVG que desaparecen cuando el problema sea el recorte, la escala o la ausencia de pintura. Para un conflicto entre reglas de color, la guía para cambiar colores SVG explica dónde pueden definirse los rellenos y los trazos.

Si la apariencia editable no puede conservarse al entregar el archivo, guarda el original editable y prepara una copia de entrega independiente con la apariencia necesaria representada mediante formas. Verifica visual y geométricamente esa copia; expandir un trazo centrado no reproduce por sí solo todos los solapamientos deseados ni crea un único contorno exterior.

Cuando el origen es un logotipo ráster

Usa el emblema vectorial original y el texto editable cuando dispongas de ellos. No aporta ninguna ventaja capturar una pantalla de texto que funciona y trazarla solo para añadir un contorno.

Si un PNG o JPG es el único emblema que se conserva, el flujo de vectorización de logotipos de PerfectVector puede ayudarte a preparar antes un SVG candidato. Inspecciona la silueta convertida y las aberturas pequeñas antes de aplicar este estilo. La conversión no establece el orden de pintado, no identifica la fuente original ni decide qué formas deben compartir un contorno.

Cuando las letras puedan recrearse con la fuente correcta, mantenlas como un objeto de texto independiente durante el diseño. La guía general de vectorización de logotipos explica cómo elegir entre recuperar un diseño ráster y usar un original vectorial existente.

Preguntas frecuentes

¿Cuál es el orden de pintado predeterminado de SVG? El orden predeterminado es relleno, después trazo y finalmente marcadores. El valor normal solicita ese orden.

¿Es diferente paint-order="stroke" de "stroke fill"? Aquí producen el mismo orden: trazo, relleno y después marcadores. Las operaciones no indicadas siguen a las indicadas en su orden relativo normal.

¿Crea paint-order un trazo exterior? No mueve ni desplaza el trazo. Un relleno opaco oculta la parte orientada hacia dentro de un trazo centrado. El trazo restante puede seguir invadiendo huecos y separaciones.

¿Por qué el contorno de mi SVG sigue pareciendo demasiado grueso? El trazo puede ser demasiado ancho para el tamaño de visualización, el relleno puede ser transparente u otra regla CSS puede anular el orden de pintado. Comprueba esas condiciones e inspecciona las aberturas pequeñas al tamaño final.

Fuentes

1. W3C — Pintado en SVG 2 — Define el orden de pintado y la relación entre rellenos y trazos.
2. MDN — Atributo SVG paint-order — Documenta el orden de las palabras clave, los tipos de elementos compatibles y la prioridad de CSS sobre el atributo de presentación.
3. MDN — Propiedad CSS paint-order — Explica la herencia y las secuencias abreviadas de palabras clave.

¿Solo tienes un emblema ráster? Prepara un logotipo SVG editable, inspecciona sus aberturas y prueba el contorno al tamaño previsto antes de crear la copia de entrega.