Alineación del trazo SVG: coloca los bordes dentro o fuera

Un trazo SVG se centra en su trazado. Para que un borde de 12 unidades quede completamente dentro de una figura cerrada, dibuja un trazo de 24 unidades y recórtalo con esa figura. Para colocar el mismo ancho visible fuera, dibuja el trazo de 24 unidades con una máscara que oculte el interior de la figura. Conserva una copia del trazado original: el recorte y la máscara cambian lo visible, no la geometría subyacente.

La propiedad propuesta stroke-alignment aparece en un borrador de trabajo de SVG Strokes, pero ese borrador indica que la definición de trazos de SVG 2 sigue siendo normativa. Si un archivo debe funcionar en distintos navegadores y editores, construye y prueba el resultado visible en lugar de depender de la propiedad propuesta.

Observa dónde queda el borde pintado

Esta insignia cerrada original usa un mismo trazado en los tres paneles. Su relleno verde azulado, el ancho visible nominal de 12 unidades y el espacio circundante del documento se mantienen iguales. La línea discontinua coral es el trazado central. En el panel del medio coincide con el borde exterior de la banda azul; en el de la derecha, con el borde interior.

El panel central mantiene el límite exterior pintado de la insignia sobre su trazado original. El panel exterior amplía la superficie pintada 12 unidades alrededor del trazado. Si la insignia casi toca el borde del viewBox, esa pintura adicional puede quedar cortada. La guía de rellenos y trazos de MDN describe los trazos normales como centrados en el trazado; la comparación anterior renderiza las tres construcciones al mismo tamaño.

Crea un borde interior con un recorte

Coloca el trazado cerrado en <defs>. Reutilízalo una vez como relleno y otra como recorte. Pinta una segunda copia con el doble del ancho de trazo deseado y después limita ese trazo al interior del trazado. Un recorte vuelve invisible todo lo que queda fuera de su figura; no elimina la mitad oculta del trazo. Consulta la referencia de clipPath de MDN y nuestra guía de coordenadas de clipPath si un recorte importado se desplaza respecto al dibujo.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Aquí el trazo de 24 unidades normalmente alcanza 12 unidades a cada lado del trazado. El recorte elimina su mitad exterior y deja una banda visible de 12 unidades dentro. Coloca el relleno debajo del trazo recortado, como en el ejemplo, si quieres que toda la banda interior permanezca visible. En trazados compuestos con huecos, inspecciona las reglas de relleno y recorte antes de asumir qué lado es el interior.

Crea un borde exterior con una máscara

Una banda exterior necesita la región de visibilidad inversa. La máscara siguiente es blanca en el área del documento y negra dentro de la insignia. Se aplica solo a la copia con trazo, mientras una copia sin máscara proporciona el relleno. La región explícita de la máscara deja espacio para el trazo más allá de la figura original.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

De nuevo, solo queda la mitad del trazo centrado de 24 unidades, así que la banda exterior visible tiene 12 unidades de ancho. Define deliberadamente la región de la máscara: MDN documenta cómo afectan a una máscara maskUnits, maskContentUnits y las dimensiones de la región. El rectángulo blanco debe cubrir todo el trazo exterior. Una máscara demasiado pequeña puede recortar precisamente el borde que pretendías conservar.

Existe un truco visual más breve para un relleno opaco: pinta un trazo de doble ancho y después pinta el relleno encima con paint-order="stroke fill". Esto oculta la mitad interior bajo el relleno, pero el trazo sigue existiendo allí y puede reaparecer si el relleno se vuelve translúcido o se elimina. MDN explica el orden de pintado. Usa la máscara explícita cuando la banda exterior deba seguir siendo una construcción visible independiente. Para un borde derivado de toda una silueta alfa multicolor, consulta los bordes SVG con morfología; ese filtro cambia la apariencia conservando los trazados fuente.

Comprueba el SVG después de importarlo

Los recortes y las máscaras afectan al renderizado, mientras que una aplicación posterior puede requerir contornos rellenos. Conserva un maestro editable y prueba una copia de entrega en el destino real:

1. Abre el SVG por sí solo y después colócalo en el editor o la aplicación de producción previstos. Compara los bordes interior y exterior con el mismo zoom.
2. Revisa el viewBox o la mesa de trabajo alrededor de la versión exterior. Deja espacio para su banda de 12 unidades hacia fuera y las uniones en esquinas agudas.
3. Inspecciona la lista de objetos. Los ejemplos contienen trazados reutilizables, un recorte o una máscara y un trazo editable. No crean un único contorno sólido de borde.
4. Si el destinatario necesita geometría rellena, convierte el trazo seleccionado en una copia de entrega e inspecciona las figuras resultantes. Conserva la fuente con trazo editable para cambiar el ancho después.

Si la línea desaparece al exportar, usa la lista de comprobaciones de visibilidad de trazos para distinguir entre pintura ausente, recorte y compatibilidad de importación. Si un trazo cubre un relleno inesperadamente, nuestra explicación de paint-order en SVG muestra qué capa se dibuja al final.

Dónde encaja PerfectVector

Estos pasos parten de un trazado SVG editable. Si el logotipo solo existe como PNG o JPG, el flujo de vectorización de logotipos de PerfectVector puede crear un SVG candidato antes de añadir el recorte o la máscara. Compara su silueta, esquinas y aberturas con el original al tamaño de entrega previsto. La vectorización recupera una geometría candidata; no asigna por ti la alineación interior o exterior del trazo.

Si tienes el trazado SVG original, edítalo directamente. Trazar su captura de pantalla añadiría una reconstrucción innecesaria y podría cambiar el límite que intentas alinear. Nuestra guía de vectorización de logotipos ayuda a elegir entre vectorizar, redibujar y conservar un maestro vectorial existente.

Preguntas frecuentes

¿SVG admite la alineación del trazo hacia dentro o hacia fuera? Un borrador de trabajo de SVG Strokes describe esos valores, pero indica que SVG 2 sigue siendo la definición normativa de trazos. Para una entrega portable, usa un recorte o una máscara probados en lugar de depender de la propiedad del borrador.

¿Por qué duplico el ancho del trazo? Un trazo normal reparte su ancho por igual a cada lado del trazado. Un recorte o una máscara descarta una mitad. Por tanto, un trazo de 24 unidades deja una banda interior o exterior visible de 12 unidades en estos ejemplos.

¿Un recorte interior o una máscara exterior crea bordes listos para cortar? No. Cambian la apariencia renderizada, mientras el trazado y el trazo subyacentes permanecen. Si una máquina de corte o un proveedor necesita contornos rellenos, crea una copia de entrega aparte, convierte el trazo en trazados con un editor adecuado e inspecciona la geometría después de importarla.

Fuentes

1. MDN — Rellenos y trazos — Define el renderizado del trazo centrado y el comportamiento de paint-order explicado aquí.
2. W3C SVG Working Group — Borrador de trabajo de SVG Strokes — Establece los valores de alineación propuestos y el estado del borrador respecto a SVG 2.
3. MDN — Elemento clipPath — Define cómo la construcción interior restringe la visibilidad.
4. MDN — Elemento mask — Define la región de la máscara y los atributos de coordenadas utilizados en la construcción exterior.
5. Alex Chan — Dibujar trazos interiores y exteriores en SVG — Demuestra el método de recorte y máscara con doble ancho usado como punto de partida para nuestra insignia original de prueba.

Si tu logotipo sigue siendo una imagen rasterizada, crea un SVG candidato con PerfectVector, inspecciona el límite de su trazado, prueba la construcción interior o exterior en tu editor y verifica el archivo entregado en su destino.