Picos de inglete en SVG: corrige esquinas sin recortarlas

Una punta semejante a una aguja en un contorno SVG suele proceder de una unión de inglete en una esquina aguda. Si no quieres la punta, reduce stroke-miterlimit o elige una unión biselada o redonda. Si la punta forma parte del diseño, pero su extremo desaparece, da al trazo pintado más espacio dentro del viewBox. Son reparaciones diferentes: una cambia la forma de la esquina; la otra cambia lo que puede mostrar el archivo.

Conserva una copia del SVG original mientras pruebas. Un logotipo con una punta afilada deliberada puede necesitar conservar su inglete, mientras que un pico indeseado en un contorno importado puede necesitar una unión más plana. Decide primero qué esquina debe conservarse.

Por qué una esquina estrecha crea un pico

Un trazado con trazo tiene ancho a ambos lados de su eje central. Con stroke-linejoin="miter", los bordes exteriores del trazo continúan hasta encontrarse. Cuanto más agudo sea el giro, más lejos puede quedar ese punto de encuentro. SVG utiliza miter como estilo inicial de unión y el valor inicial de stroke-miterlimit es 4, según la definición de pintura de SVG 2.

El límite es una proporción, no una distancia en píxeles o unidades SVG. Si la longitud del inglete dividida por stroke-width supera el límite, una unión miter corriente se convierte en un bisel. Un límite mayor permite una punta más larga; uno menor hace que más esquinas agudas se aplanen. La referencia del límite de inglete de MDN muestra la relación con el ángulo de la esquina y señala que una propiedad CSS puede sustituir el atributo de presentación SVG.

Un trazado, cuatro resultados visibles

Para esta prueba dibujamos un segmento abierto y angular de emblema con d="M130 520 L180 200 L230 520" y un trazo de 26 unidades. Los dos primeros paneles utilizan un límite de inglete de 10. El segundo aplica un límite visible ajustado en y=170, que corta la punta. El tercero utiliza un límite de 4, por lo que esta esquina se convierte en un bisel. El cuarto utiliza round. Es una ilustración controlada de ese trazado y renderizador, no una promesa de que todos los SVG importados tengan la misma forma de esquina.

El trazado central discontinuo rojo permanece igual en los cuatro paneles. Eso importa: cambiar la unión del trazo puede reparar un contorno pintado sin reconstruir el trazado vectorial subyacente.

¿Es un pico, un bisel o una punta recortada?

Una punta recortada puede parecer un bisel intencionado a primera vista. Amplía y comprueba si su extremo se alinea con el límite del archivo. El diagnóstico de trazos SVG que desaparecen explica otras causas de pintura y recorte; esta prueba aísla la esquina de inglete.

Corrige la esquina sin cambiar lo que no corresponde

1. Encuentra el trazado y su unión efectiva

Selecciona la esquina en un editor vectorial o inspecciona el texto SVG en busca de stroke, stroke-width, stroke-linejoin y stroke-miterlimit. Comprueba los grupos padre y las reglas CSS además de los atributos del propio trazado. Una propiedad stroke-miterlimit en línea o de una hoja de estilos puede tener prioridad sobre el mismo atributo de presentación del elemento, como documenta MDN.

Si el objeto seleccionado es un contorno con relleno en lugar de un trazo editable, deja de ajustar los valores de inglete. Debes cambiar el trazado de ese relleno o volver al original de trazo sin expandir. Si toda la importación tiene el tamaño incorrecto, realiza la prueba de importación SVG con tamaño conocido antes de compensar cambiando el ancho del trazo.

2. Cambia un ajuste de unión en un duplicado

Prueba primero un bisel cuando sea aceptable una esquina plana de aspecto mecánico. Prueba una unión redonda cuando el diseño permita un borde suavizado. Conserva el inglete cuando la punta precisa forme parte de la marca y elige un límite que preserve solo las puntas previstas. La referencia SVG de stroke-linejoin define cómo difieren las formas comunes de unión.

Aquí tienes una pequeña copia de prueba del trazado anterior:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Cambia stroke-miterlimit a 4 para ver la alternativa biselada en este ángulo concreto. Después recupera 10 y cambia stroke-linejoin a round o bevel. El valor de stroke-miterlimit no importa para esos dos últimos estilos de unión. No lo reduzcas en todo un logotipo solo porque una esquina se comporte mal; otras puntas pueden ser deliberadas.

3. Da suficiente lienzo a una punta deseada

Si el inglete es correcto, pero desaparece en el borde, amplía o reposiciona el viewBox alrededor del resultado pintado, no solo de las coordenadas del trazado. La definición del sistema de coordenadas de SVG 2 explica el rectángulo visible; el trazo puede extenderse más allá de las coordenadas de su eje central. Comprueba también las ventanas SVG anidadas y los trazados de recorte. Un recorte del padre puede seguir cortando la punta incluso después de ampliar el viewBox raíz.

No trates un lienzo mayor como remedio para una aguja accidental. Solo muestra más de esa aguja. A la inversa, cambiar la unión a bisel solo para encajar en una mesa de trabajo ajustada puede borrar una esquina diseñada. Compara el archivo entregado con la marca original al tamaño real de visualización o impresión. Si un proveedor mide el tamaño físico del SVG, conserva el ancho y alto previstos mientras cambias deliberadamente el mapeo del viewBox.

4. Vuelve a abrir el archivo entregado

Inspecciona el resultado en un navegador y en el editor o aplicación de producción de destino. Comprueba la punta al 100% y al tamaño final previsto. Si la entrega requiere contornos con relleno en lugar de trazos editables, conserva el original, convierte el trazo en contorno en una copia de entrega dentro de un editor e inspecciona el nuevo límite relleno. Convertir en contornos cambia la geometría; no es un ajuste reversible de inglete. Para revisar más ampliamente rellenos y contornos, consulta la guía de paint-order de SVG.

Cuando un logotipo rasterizado necesita primero un trazado nuevo

Los controles de inglete solo funcionan sobre un trazo vectorial editable. Si tu único logotipo conservado es PNG o JPG, el proceso de vectorización de logotipos de PerfectVector puede crear una alternativa SVG antes de editar sus esquinas. Compara la silueta recuperada, los pequeños huecos y la estructura de trazados con el original. Un calco puede representar una línea rasterizada gruesa como contorno con relleno, no como el eje central editable original, así que no esperes que stroke-miterlimit repare automáticamente ese resultado. Redibuja un punto geométrico crítico cuando deba coincidir exactamente con un original de marca.

Si existe el SVG original, repara ese archivo en lugar de vectorizar una captura de pantalla. La guía de vectorización de logotipos ayuda cuando realmente necesitas reconstruir un diseño desde píxeles; este artículo empieza después de disponer de un trazo editable adecuado.

Comprobación final de esquinas

1. Guarda el original vectorial intacto.
2. Confirma si la esquina es un trazo editable o un contorno con relleno.
3. Compara miter, bevel y round en el único trazado afectado.
4. Si conservas un inglete, prueba su límite y deja suficiente espacio visible para toda la punta pintada.
5. Vuelve a abrir el SVG en su destino real y compruébalo al tamaño final.

Preguntas frecuentes

¿Por qué mi SVG tiene picos en las esquinas agudas? Una unión de inglete prolonga los bordes exteriores del trazo hasta encontrarse. En un ángulo agudo, ese punto de encuentro puede quedar lejos del trazado central. Reduce el límite de inglete o utiliza bisel o unión redonda cuando la punta no sea intencionada.

¿Por qué reducir stroke-miterlimit aplana una esquina? Cuando la proporción entre longitud del inglete y ancho del trazo supera el límite, una unión de inglete corriente pasa a bisel. Los valores menores activan esa alternativa en más esquinas. Conserva un límite mayor si la punta aguda es intencionada y después comprueba sus límites.

¿Por qué mi punta SVG sigue cortada después de aumentar el límite de inglete? El límite mayor puede alargar la punta mientras el viewBox o un recorte siguen cortándola. Amplía la región visible alrededor del trazo pintado o reposiciona la marca y después vuelve a abrir el SVG entregado en el destino.

Fuentes

1. W3C — Pintura de SVG 2 — define las uniones de trazo, los valores iniciales y el comportamiento alternativo del inglete.
2. MDN — stroke-miterlimit — explica la proporción del límite y su relación con los ángulos agudos.
3. MDN — stroke-linejoin — define las formas comunes de esquina para trazados con trazo.
4. MDN — stroke-miterlimit de CSS — documenta la prioridad de la propiedad CSS sobre el atributo de presentación SVG.
5. W3C — Sistemas de coordenadas de SVG 2 — define la relación entre viewBox y ventana utilizada para comprobar el límite.

Si una marca que solo existe rasterizada necesita trazados utilizables antes de esta reparación, crea una alternativa SVG del logotipo, inspecciona su geometría y después ajusta o redibuja las esquinas importantes.