Contornos de puntos SVG: controla el espaciado y los remates redondos

Para un contorno SVG de puntos, da un trazo a la forma, establece stroke-linecap="round" y usa un segmento discontinuo de longitud cero seguido de un espacio positivo, como stroke-dasharray="0 20". La anchura del trazo controla el diámetro del punto. El segundo número de la lista controla la distancia a lo largo del trazado entre centros de puntos; no es el espacio vacío entre sus bordes visibles.

Esta distinción importa cuando un borde parece demasiado apretado después de redondear sus remates. Una insignia cerrada añade otro problema: la repetición puede volver al inicio con un intervalo sobrante más corto. Los ejemplos siguientes separan forma del remate, espaciado visible y unión de cierre para que ajustes el valor correcto.

Son ajustes decorativos del trazo. No crean un nuevo contorno desplazado ni convierten cada punto pintado en una trayectoria de corte independiente.

Compara remates rectos, redondos y puntos

stroke-dasharray alterna longitudes de segmentos pintados y espacios sin pintar. Una lista de dos números facilita inspeccionar esa repetición. La referencia de dash-array de MDN también explica cómo una lista de longitud impar se repite para formar una secuencia de longitud par.

Copia este SVG independiente a un archivo y ábrelo en un navegador. Cada trazado original mide 240 unidades y tiene un trazo de anchura 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

La primera fila usa 12 20 con remates rectos. Sus segmentos completos ocupan 12 unidades y dejan 20 de espacio visible. La segunda usa los mismos números con remates redondos. Cada remate llega 4 unidades más allá del extremo subyacente del segmento, así que uno completo ocupa 20 unidades y el espacio visible se reduce a 12.

La tercera fila cambia la longitud del segmento a cero. Los remates redondos crean puntos de diámetro 8 con centros separados 20 unidades en este trazado recto. El espacio visible entre bordes es de 12 unidades. Las reglas de pintura SVG del W3C definen los remates de los extremos discontinuos, incluido el tratamiento de segmentos de longitud cero; la referencia de remates de MDN explica su geometría.

Para segmentos completos y separados sobre una sección recta sin calibración de distancia ni transformación, los cálculos útiles son:

• Remate recto: longitud visible del segmento = dash; espacio visible = gap.
• Remate redondo: longitud visible del segmento = dash + stroke-width; espacio visible = gap - stroke-width.
• Punto redondo: diámetro = stroke-width; distancia entre centros = gap; espacio visible = gap - stroke-width.

Si el último cálculo da cero o un valor negativo, los puntos se tocan o superponen. En las curvas, la distancia a lo largo del trazado difiere de la distancia directa entre puntos. Inspecciona esquinas y curvas en lugar de aplicar el cálculo del espacio en línea recta a todo el contorno.

Ajusta la repetición alrededor de una insignia cerrada

Los siguientes trazados de insignia rectangular miden cada uno 180 por 120 unidades. Su perímetro es 2 × (180 + 120) = 600. El trazado empieza en la esquina superior izquierda y avanza en sentido horario.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

A la izquierda, 0 32 coloca los centros de puntos en distancias de trazado 0, 32, 64 y así hasta 576. Solo quedan 24 unidades antes de volver al inicio. El intervalo de cierre es más corto que los demás de 32 unidades, por lo que la unión es irregular. Aumentar el tamaño mostrado del SVG amplifica esa diferencia sin resolverla.

A la derecha, 0 30 divide el perímetro en 20 intervalos iguales. En este rectángulo concreto, ambos lados también son divisibles por 30, así que las esquinas coinciden con puntos. En cada lado recto, los puntos de 8 unidades dejan 22 unidades de espacio visible. Esto corrige la repetición de la insignia elegida; no promete un espaciado visual idéntico en todos los contornos curvos.

Para tu propio contorno, elige el número deseado de puntos y divide el perímetro por ese número para obtener una distancia inicial de repetición. Comprueba después el resultado renderizado real, especialmente curvas, detalles pequeños y punto de cierre. Una forma con varios subtrazados desconectados necesita atención separada porque el patrón discontinuo vuelve a empezar en cada subtrazado, como describe la especificación de pintura SVG.

stroke-dashoffset desplaza la posición inicial del patrón a lo largo del trazado. Puede colocar una unión llamativa en un lugar menos visible, pero no hace que una repetición de 32 unidades divida 600. Usa una repetición ajustada cuando quieras un cierre uniforme. La referencia de dash-offset de MDN documenta ese ajuste de fase.

Abrimos ambos archivos SVG independientes por separado y comprobamos su renderizado en navegador frente a esta comparación. Los ejemplos usan valores sin unidades, sin calibración pathLength, transformaciones ni CSS externo. Demuestran estos trazados creados manualmente, no una conversión de PerfectVector ni una prueba de compatibilidad entre aplicaciones.

Mantén coherentes los ajustes de tamaño y pintura

Empieza con valores numéricos en las propias coordenadas del SVG, como arriba. No los sustituyas por porcentajes suponiendo que representan la misma fracción del perímetro. La referencia de dash-array describe la resolución de porcentajes respecto al área visible y no a la longitud del trazado.

Si usas pathLength para normalizar distancias, calcula el patrón discontinuo en ese sistema calibrado de distancia. Evita mezclar el perímetro sin calibrar de este ejemplo con valores normalizados de otro fragmento. La guía de animación de trazos SVG muestra otro uso de la calibración nativa de longitud para revelar un dibujo.

Establece fill="none" cuando quieras solo el borde. Un relleno puede seguir visible aunque parte del trazo sea discontinuo. Si desaparecen los puntos esperados, confirma que el elemento tenga un trazo visible y que ninguna regla CSS haya sobrescrito sus atributos de presentación. La lista de comprobación de trazos ausentes cubre estas comprobaciones antes de cambiar el espaciado.

Deja suficiente espacio alrededor de la geometría para el trazo. Uno de 8 unidades sobresale del trazado y los remates redondos sobresalen de los extremos abiertos. El ejemplo incluye márgenes para que sus puntos no queden recortados por el área visible. Prueba el SVG entregado al tamaño real; unos puntos diminutos que se distinguen ampliados pueden ser difíciles de ver en un icono.

Separa la preparación de la ilustración del diseño del borde

Si el motivo dentro de una insignia solo existe como PNG o JPG, el flujo de imagen a vector de PerfectVector puede preparar ilustración SVG editable para ese motivo. Compara la silueta, las pequeñas aberturas y las regiones independientes con el original antes de colocarlo dentro del borde. Mantén el contorno decorativo como forma separada para cambiar independientemente su grosor de trazo y espaciado de puntos.

Conserva un archivo maestro vectorial existente cuando esté disponible. Un rectángulo u otro borde sencillo suele ser fácil de dibujar directamente en un editor. La vectorización no diseña automáticamente un borde desplazado, no recupera una única línea central ni elige el espaciado discontinuo. Si una marca gruesa vectorizada tiene dos límites, la guía de SVG de una sola línea explica por qué difiere de una trayectoria de dibujo.

Para un flujo de corte, no supongas que la máquina interpretará la pintura decorativa del trazo como cortes individuales en forma de punto. Prepara la geometría prevista en un editor e inspecciona la vista previa de la aplicación de destino. Este artículo prueba pintura de navegador, no comportamiento de cortadoras. Las guías de edición del blog cubren decisiones relacionadas de preparación de archivos.

Comprueba el contorno final

Antes de aceptar el archivo, inspecciona por separado el trazado abierto corto y el borde cerrado. Confirma el estilo de remate, la anchura del trazo y los números de repetición; inspecciona después la primera y última marca del trazado abierto y la unión del cerrado. Comprueba curvas estrechas al tamaño de uso.

Vuelve a abrir el SVG guardado en el destino previsto. Si necesitas pintura decorativa editable, conserva las propiedades del trazo. Si el destino necesita contornos permanentes, realiza y verifica esa conversión como un paso de edición independiente. Conserva una copia editable para revisar el espaciado más adelante.

Preguntas frecuentes

¿Por qué mis segmentos parecen más juntos al elegir remates redondos? Los remates redondos sobresalen de ambos extremos. En una sección recta, el espacio visible entre segmentos completos es el espacio especificado menos la anchura del trazo, siempre que las marcas sigan separadas.

¿Cómo creo puntos redondos en lugar de pequeñas cápsulas? Usa un segmento de longitud cero, un espacio positivo y remates redondos. Por ejemplo, una anchura de trazo de 8 con stroke-dasharray="0 20" produce puntos de 8 unidades con centros separados 20 unidades en un trazado recto.

¿Por qué un espacio es diferente en un contorno cerrado? La repetición puede no dividir uniformemente el perímetro. Ajústala a la longitud del trazado e inspecciona el cierre y las esquinas. Mover el desplazamiento cambia la fase del patrón, pero no corrige la diferencia aritmética.

Fuentes

1. MDN — stroke-dasharray — Define la lista alterna de segmentos y espacios y el tratamiento de sus valores.
2. MDN — stroke-linecap — Explica la geometría de remates rectos y redondos y el comportamiento de longitud cero.
3. W3C — pintura SVG — Especifica la pintura discontinua, los remates y el tratamiento del patrón en subtrazados.
4. MDN — stroke-dashoffset — Define el desplazamiento usado para mover un patrón discontinuo.

Si el motivo de tu insignia empieza como imagen rasterizada, prepara una primera versión SVG con PerfectVector, inspecciona sus contornos y aberturas y añade el borde de puntos como forma editable independiente.