> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Redondea esquinas SVG cambiando la forma rellena
> Redondea una esquina SVG rellena con un arco tangente, verifica si el radio cabe en sus lados y descubre por qué una unión de trazo redonda no cambia el relleno.
Source: https://perfectvector.com/es/blog/round-svg-path-corners
Language: es
Author: Irene Kim
Published: 2026-10-12T08:00:00+09:00
Para redondear una esquina rellena de un trazado SVG, cambia la geometría del trazado. Termina cada segmento recto adyacente antes del vértice y conecta esos nuevos extremos con una curva. `stroke-linejoin="round"` cambia el trazo pintado en una unión; deja intacto el contorno relleno original.
Este tutorial redondea una esquina en ángulo recto de un emblema relleno original. Necesitas un editor de texto y un navegador. Al terminar tendrás un SVG completo con un redondeo circular de 20 unidades, una comprobación de que el radio elegido cabe y el archivo angular original para comparar o restaurar.
Un redondeo es una curva que reemplaza una esquina aguda y se une de forma tangente a los lados adyacentes. El ejemplo usa un cuarto de arco circular entre lados rectos, horizontal y vertical. No redondea automáticamente trazados Bézier arbitrarios obtenidos por vectorización.
## Elige el cambio que necesita tu diseño
La [referencia de stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) define cómo se dibuja un trazo en las esquinas de un trazado. Usa una unión redonda cuando ese borde pintado sea lo que quieres cambiar. Para modificar una silueta rellena, edita su trazado real.
| Objeto o requisito | Punto de partida adecuado | Qué cambia |
| --------------------------------------- | -------------------------------------------- | ------------------------------------------ |
| Rectángulo SVG simple | Establecer `rx` o `ry` en el rectángulo | La geometría de sus esquinas |
| Trazado angular con trazo | Configurar una unión de trazo redonda | La pintura alrededor del trazado existente |
| Polígono o emblema relleno | Reemplazar una esquina elegida con una curva | La silueta rellena |
| Trazado complejo vectorizado con curvas | Inspeccionar y editar la unión seleccionada | Depende de sus segmentos reales |
Para un rectángulo simple, la [referencia de rect SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) documenta `rx` y `ry`. Nuestro emblema también tiene un lado diagonal, por lo que convertirlo en un rectángulo redondeado cambiaría más que la esquina elegida.
Si el problema es solo una punta larga en un trazo, empieza con el [diagnóstico de picos de inglete](https://perfectvector.com/es/blog/svg-miter-spikes). Este artículo cambia la geometría rellena.
## Guarda el original angular
Copia este archivo completo en `emblem-original.svg` y ábrelo en un navegador. El vértice superior derecho está en (170, 30). Su lado entrante es horizontal; el saliente baja hasta (170, 100).
```xml
```
Conserva este archivo como original de comparación. Agregar `stroke="#df9d34"`, `stroke-width="8"` y `stroke-linejoin="round"` a este trazado le da un borde pintado redondeado, mientras que el relleno oscuro sigue llegando a la esquina aguda original.
## Reemplaza esa esquina con un arco de 20 unidades
Mueve el extremo de la línea entrante 20 unidades a la izquierda del vértice, hasta (150, 30). Mueve el inicio de la línea saliente 20 unidades hacia abajo, hasta (170, 50). Un círculo centrado en (150, 50), con radio 20, une esos puntos como un cuarto de arco.
Guarda este segundo archivo completo como `emblem-rounded.svg`:
```xml
```
`A20 20 0 0 1 170 50` indica un arco circular con radios horizontal y vertical de 20, rotación cero, el arco pequeño y el indicador de barrido 1, que termina en (170, 50). La [especificación de trazados SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) define esos parámetros. Para esta esquina en sentido horario, seleccionan el cuarto de círculo deseado. La [guía de indicadores de arco](https://perfectvector.com/es/blog/svg-arc-flags) ayuda a diagnosticar un arco que se curva por el lado equivocado.
El radio del círculo es vertical en el primer extremo y horizontal en el segundo. Por lo tanto, su tangente sigue la línea horizontal entrante y la vertical saliente. Una curva puede parecer redondeada y aun formar un quiebre en una unión; esta construcción da direcciones tangentes coincidentes a esos lados concretos.
*El primer ejemplo cambia la pintura del trazo. El segundo modifica el contorno del relleno oscuro. El tercero muestra el resultado inválido de ignorar el lado adyacente más corto; la comprobación del radio rechaza ese caso.*
## Verifica que el radio quepa en los lados disponibles
En esta esquina de 90 grados, un redondeo circular consume en cada lado adyacente una distancia igual a su radio. El tramo entrante mide 140 unidades, pero el saliente solo 70. Para esta construcción de una sola esquina, el radio debe ser positivo y no superar 70; elige uno menor si quieres conservar una parte recta de ese lado saliente.
La función siguiente está limitada deliberadamente a este emblema y esta esquina exactos. Ejecútala en una consola JavaScript o en Node.js para generar el valor `d` de reemplazo.
```javascript
function roundEmblemCorner(radius) {
const incomingLength = 170 - 30;
const outgoingLength = 100 - 30;
if (!Number.isFinite(radius) || radius <= 0 ||
radius > Math.min(incomingLength, outgoingLength)) {
throw new Error('Radius must be positive and fit both adjacent edges.');
}
return `M30 30H${170 - radius}` +
`A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
'V100L110 160H30Z';
}
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z
```
Con radio 80, una construcción ingenua terminaría el arco en (170, 110), más allá del siguiente vértice (170, 100). El `V100` posterior invertiría la dirección. Rechaza ese radio en vez de aceptar lo que el navegador dibuje.
Para otros ángulos entre lados rectos, la distancia tangente depende del ángulo. En una esquina convexa común con ángulo interior θ, la distancia es `r / tan(θ / 2)`. Si redondeas ambos extremos de un lado compartido, la suma de las dos distancias consumidas debe caber en ese lado. Las esquinas cóncavas, las curvas existentes y las formas compuestas necesitan decisiones geométricas adicionales; esta función no las maneja.
## Verifica la silueta cambiada y conserva la fuente
1. Abre ambos SVG completos al mismo tamaño y con el mismo fondo.
2. Quita temporalmente el trazo de la versión con unión pintada. Su relleno debe coincidir con el original angular.
3. Compara el contorno superior derecho de la versión redondeada. Los demás lados, el borde diagonal y la posición general deben coincidir con el original.
4. Ejecuta la comprobación del radio con 20 y luego con 80. El primero produce el trazado mostrado; el segundo genera el error de radio.
5. Inspecciona el SVG guardado en el destino donde se usará. Restaura el original si el redondeo elimina una característica deliberada o el destino cambia su apariencia.
Nota del método: renderizamos en Chromium los trazados original, con trazo redondo y con redondeo. Una prueba de relleno en (169, 31) quedó dentro de las dos primeras formas y fuera de la redondeada. La función exacta de arriba aceptó 20 y rechazó 80. También contrastamos ambos extremos del arco con el radio y las direcciones tangentes adyacentes. Esto verifica el ejemplo proporcionado de lados rectos, no un algoritmo general de redondeo ni el resultado de una cortadora.
Si la curva sobresale hacia afuera, inspecciona el extremo del arco y el indicador de barrido. Si queda un quiebre, comprueba que la tangente de la curva coincida con el segmento vecino; la [guía de uniones Bézier suaves](https://perfectvector.com/es/blog/svg-bezier-smooth-joins) explica esa reparación aparte. La [guía de edición de SVG](https://perfectvector.com/es/blog/how-to-edit-an-svg) trata cómo abrir, inspeccionar y conservar un original utilizable.
## Dónde encaja PerfectVector antes de editar esquinas
PerfectVector puede recuperar trazados vectoriales cuando la imagen solo existe en formato rasterizado. Inspecciona primero el contorno recuperado y decide después qué esquinas cambiar en una copia. El [flujo de imagen a vector](https://perfectvector.com/es/image-to-vector) aporta la recuperación; no aplica automáticamente esta construcción de redondeo.
Usa el archivo vectorial original si está disponible. Un contorno vectorizado puede contener segmentos Bézier y pequeñas irregularidades que no coinciden con este ejemplo de lados rectos. Volver a dibujar un emblema sencillo puede ser más fácil que redondear cada unión trazada. Conserva la forma aprobada antes de cualquier rediseño intencional y usa las [guías de flujos del blog](https://perfectvector.com/es/blog) para la siguiente revisión de entrega.
## Preguntas frecuentes
### ¿Por qué una unión de trazo redonda deja aguda la esquina del relleno?
La unión controla el trazo pintado alrededor del trazado. El relleno sigue la geometría existente, así que conserva la esquina original hasta que la reemplaces con una curva.
### ¿Puedo usar la función en cualquier trazado SVG?
No. Maneja una sola esquina especificada en ángulo recto del emblema de lados rectos mostrado. Otros ángulos, esquinas cóncavas, curvas existentes y restricciones de lados compartidos necesitan su propia construcción.
### ¿Esto deja el archivo listo para cortar?
Cambia un solo contorno relleno del ejemplo. Inspecciona la geometría guardada y realiza las comprobaciones exigidas por tu cortadora o proceso real; esta prueba de navegador no demuestra un resultado físico de corte.
## Fuentes
1. [MDN — SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) — Define el ajuste de pintura del trazo que se distingue de la geometría del relleno en la comparación.
2. [MDN — SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) — Documenta los controles de radio más simples disponibles para rectángulos.
3. [W3C — Comandos de arco elíptico SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — Define los radios, indicadores y extremo del arco usados en el trazado redondeado completo.
***
Si faltan los trazados originales, [recupera tu diseño con PerfectVector](https://perfectvector.com/es/image-to-vector). Compara su contorno con la referencia, guarda el original recuperado y prueba cualquier cambio intencional de esquina en una copia separada al tamaño previsto.
## Explore
- [Read the HTML article](https://perfectvector.com/es/blog/round-svg-path-corners)
- [Comandos relativos de trazado SVG: sigue el punto actual](https://perfectvector.com/es/blog/svg-relative-path-commands.md)
- [El SVG se importa con el tamaño incorrecto: diagnostícalo y corrígelo](https://perfectvector.com/es/blog/svg-imports-wrong-size.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)