> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Mide la longitud de trazados SVG sin confundir la escala
> Mide trazados SVG en unidades de usuario, considera transformaciones y tamaño nominal y distingue contornos, calibración pathLength y recorrido de máquina.
Source: https://perfectvector.com/es/blog/measure-svg-path-length
Language: es
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00
Para medir un trazado SVG, llama a `getTotalLength()` sobre el elemento geométrico e identifica el sistema de coordenadas detrás del número. El navegador devuelve una longitud en unidades de usuario. Ese número no es automáticamente la longitud mostrada, una medida en milímetros ni la distancia recorrida por una máquina.
Por ejemplo, nuestra diagonal original mide 50 unidades de usuario. Una escala uniforme duplica su longitud en el espacio raíz hasta 100, mientras que escalar solo la dirección horizontal la lleva a unas 72.111. El resultado local de la API sigue siendo 50 en ambos casos. Esas cifras responden a preguntas de medición distintas.
## Mide un segmento conocido antes de medir la ilustración
Necesitas un SVG con geometría accesible y un navegador que ejecute SVG en línea y JavaScript. Trabaja sobre una copia. Decide si necesitas geometría local, transformada o una longitud a un tamaño físico especificado antes de registrar un resultado.
Un trazado guarda una ruta mediante comandos de movimiento, línea, curva y cierre. Una unidad de usuario pertenece a ese sistema de coordenadas SVG; no la llames píxel ni milímetro sin revisar la correspondencia. La [referencia de `getTotalLength()` de MDN](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) define el resultado como la longitud del trazado calculada por el navegador en unidades de usuario.
Este ejemplo HTML completo mide un segmento recto. Guárdalo como archivo HTML y ábrelo en un navegador:
```html
SVG length control
```
El cambio horizontal es 30 y el vertical 40, así que la longitud esperada es `sqrt(30² + 40²) = 50`. El resultado mostrado aporta un control conocido antes de confiar en una curva compleja o un emblema importado. El área de visualización de 240 píxeles no convierte ese resultado local en 100 unidades de usuario.
En nuestro ejemplo de navegador declaramos una tolerancia de 0.01 unidades de usuario. Un control de cuarto de círculo con radio 10 tiene una longitud analítica de `5π`, aproximadamente 15.708. El navegador de prueba informó Chrome 155 y devolvió unas 15.7102, dentro de esa tolerancia. Un navegador calcula numéricamente la longitud de curvas, así que conserva una precisión útil y compara con una tolerancia adecuada en lugar de exigir los mismos decimales finales a todas las implementaciones.
## Separa longitudes locales y transformadas
Los dos ejemplos siguientes conservan el mismo `d="M10 10 L40 50"` y añaden transformaciones:
| Segmento original | Longitud local de API | Longitud tras la transformación indicada, en unidades de usuario del SVG raíz |
| ------------------ | --------------------- | ----------------------------------------------------------------------------- |
| Sin transformación | 50 | 50 |
| `scale(2)` | 50 | 100 |
| `scale(2 1)` | 50 | Unas 72.111 |
El escalado uniforme multiplica todas las direcciones por la misma magnitud, por lo que multiplicar la longitud local por 2 funciona en la segunda fila. El escalado no uniforme trata las direcciones de forma distinta. En la tercera fila, el segmento transformado avanza 60 unidades horizontalmente y 40 hacia abajo: `sqrt(60² + 40²)`, no `50 × 2`.
La [especificación de sistemas de coordenadas SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) explica cómo las transformaciones y la correspondencia de `viewBox` establecen sistemas de coordenadas. Nombra tu espacio de destino. Una longitud en unidades de usuario del SVG raíz todavía difiere de los píxeles CSS del área de visualización.
Para este segmento recto conocido, llevamos sus extremos al espacio de usuario del SVG raíz:
```js
const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);
```
La matriz raíz inversa elimina la correspondencia del área de visualización raíz; la matriz relativa conserva la transformación del trazado al espacio de usuario raíz. Este fragmento supone un SVG conectado al documento, matrices invertibles y el segmento recto concreto anterior. Sus extremos se conocen por el código original del trazado.
Para una curva, la distancia entre extremos es solo una cuerda. Para medir una curva con una transformación general, transforma su geometría al sistema de destino y mídela allí, o usa una aproximación numérica controlada que conserve los contornos separados. No apliques esta fórmula de extremos a una ruta curva ni multipliques una forma transformada de modo no uniforme por un único factor de escala supuesto.
*Geometría original creada directamente con resultados en vivo del navegador. Se etiquetan por separado longitudes locales, transformadas en el espacio raíz y milímetros nominales calculados. No se muestra una aplicación de destino ni una prueba de producción física.*
## Convierte a milímetros solo después de fijar la correspondencia
Nuestro documento original del emblema declara `width="50mm"`, `height="50mm"` y `viewBox="0 0 100 100"`. Con la correspondencia uniforme prevista, eso son 0.5 mm por unidad de usuario. El ancho exterior del emblema abarca 80 unidades, así que su ancho nominal es de 40 mm.
Sus dos contornos suman 380 unidades de usuario. A esa escala declarada:
```text
50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours
```
Es un cálculo a partir de las dimensiones creadas. No medimos un objeto impreso, no verificamos un monitor con una regla ni probamos el tamaño de importación de un editor. CSS puede sobrescribir el área de visualización del SVG y un destino puede redimensionarlo. Confirma las dimensiones entregadas en ese destino antes de usar un cálculo nominal como medida de producción.
El ancho del documento completo también difiere del ancho de la ilustración que contiene. Si en cambio fijas solo el ancho exterior del emblema en 50 mm, sus 80 unidades dan otro factor: `50 / 80 = 0.625 mm per unit`. Las mismas 380 unidades representarían 237.5 mm de contornos. Registra qué ancho fijaste; usa la [guía de caja delimitadora SVG](https://perfectvector.com/es/blog/svg-bounding-box) si necesitas revisar primero sus límites.
## `pathLength` calibra distancias sin redimensionar la geometría
También hicimos una copia del segmento original de 50 unidades con `pathLength="1"`. Su resultado de `getTotalLength()` siguió siendo 50. El atributo no cambió los extremos ni hizo que su longitud geométrica fuera de una unidad.
La [especificación de la API geométrica SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) excluye explícitamente `pathLength` del resultado calculado. La [referencia de `pathLength` de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) describe cómo calibra el comportamiento de distancia a lo largo del trazado, incluidos los guiones de trazo. Es útil para crear efectos con distancias normalizadas; no sustituye medir la ruta subyacente.
Para una animación que revele un dibujo, sigue la [guía de animación de trazos SVG](https://perfectvector.com/es/blog/svg-stroke-animation). Mantén sus valores calibrados de guiones separados de la longitud geométrica registrada al inspeccionar la ilustración.
## Suma contornos sin confundir el total con recorrido de máquina
Nuestro emblema tiene un límite exterior y un hueco romboidal. El trazado compuesto original guarda ambos contornos cerrados:
```xml
```
El contorno exterior mide 280 unidades y el interior 100. El trazado compuesto devolvió 380; medirlos como elementos independientes y sumarlos también dio 380. La [especificación de trazados SVG](https://www.w3.org/TR/SVG2/paths.html) distingue los subtrazados nuevos de los segmentos de línea y cierre. Moverse al hueco no añade un segmento dibujado de conexión entre contornos.
Esa suma describe la geometría guardada seleccionada. Una línea gruesa trazada puede tener dos rutas de borde; un trazado duplicado puede añadir otra vez la geometría; un emblema puede contener contornos interiores pequeños que no querías procesar. Mide los objetos y contornos que realmente te interesan e inspecciónalos antes de interpretar el total.
El recorrido de máquina es otro resultado. Un trabajo puede incluir movimientos entre contornos, decisiones de orden, pasadas repetidas o cambios de trazado específicos del destino. Nuestro total de navegador no establece nada de eso. Tampoco da tiempo de corte, consumo de material ni un resultado de máquina exitoso. Si necesitas una sola ruta central de un dibujo escaneado, la [guía de SVG de una sola línea](https://perfectvector.com/es/blog/drawing-to-single-line-svg) aborda esa otra reconstrucción.
## Registra la medida y sus supuestos
1. Identifica la geometría seleccionada y revisa si contiene múltiples contornos o duplicados.
2. Mide un control conocido y los trazados seleccionados en unidades de usuario locales.
3. Registra las transformaciones y el espacio de coordenadas necesario para tu resultado.
4. Establece las dimensiones previstas del documento o ilustración antes de convertir unidades.
5. Etiqueta por separado valores de calibración, totales de contornos y medidas del destino.
Si el control recto conocido no devuelve 50 dentro de tu tolerancia declarada, revisa qué elemento seleccionaste y si cambiaron sus datos originales. Si los resultados locales coinciden pero difiere el tamaño nominal, revisa el área de visualización, las transformaciones y la escala del destino antes de alterar los trazados. Más decimales no resolverán una correspondencia de coordenadas equivocada.
La comprobación geométrica del archivo termina cuando otra persona puede reproducir el total de contornos seleccionado y entender unidades, correspondencia, tolerancia y objetos incluidos. Nuestro ejemplo de navegador conservado superó esos controles numéricos. No se probó la importación a un editor, el recorrido de máquina ni el tamaño físico.
Si solo tienes un mapa de bits, el [flujo de imagen a vector de PerfectVector](https://perfectvector.com/es/image-to-vector) puede reconstruir primero geometría SVG editable. Revisa contornos y huecos recuperados y mide esa geometría seleccionada con una escala explícita. La vectorización crea trazados a partir de píxeles; no recupera un tamaño físico perdido, no infiere una línea central ni proporciona una estimación del recorrido de máquina. Conserva el vector original si está disponible. El emblema de este artículo se creó directamente y no se trazó.
## Preguntas frecuentes
**¿`getTotalLength()` devuelve píxeles o milímetros?**
Devuelve la longitud calculada por el navegador en unidades de usuario SVG. Establece la correspondencia de coordenadas y tamaño antes de expresar el resultado en píxeles del área de visualización o unidades físicas nominales.
**¿Por qué escalar el trazado no cambia el resultado local de la API?**
La ruta local guardada y su representación transformada ocupan espacios de coordenadas distintos. Nuestro segmento con los mismos datos devolvió 50 localmente tras un escalado uniforme y otro no uniforme. Sus longitudes transformadas fueron 100 y unas 72.111 unidades del SVG raíz.
**¿`pathLength="1"` significa que el trazado mide una unidad?**
Aporta un valor de calibración para el comportamiento compatible de distancia a lo largo del trazado. La longitud calculada de la API geométrica ignora ese atributo; nuestro control de 50 unidades siguió devolviendo 50.
**¿Puedo estimar el tiempo de corte desde un total de contornos?**
El total solo no basta. No establece las rutas generadas por el destino, el movimiento entre contornos, las pasadas repetidas, los cambios de velocidad ni el comportamiento del material. Usa las comprobaciones del trabajo en el destino real y una prueba de producción adecuada.
## Fuentes
1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Longitud del trazado calculada por el navegador en unidades de usuario.
2. [W3C: API geométrica SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Longitud calculada e independencia de la calibración `pathLength`.
3. [W3C: Sistemas de coordenadas SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Correspondencias del área de visualización, `viewBox` y transformaciones.
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Calibración del comportamiento de distancia a lo largo del trazado.
5. [W3C: Trazados SVG](https://www.w3.org/TR/SVG2/paths.html) — Subtrazados, segmentos dibujados y comandos de cierre.
***
¿Necesitas geometría editable de un mapa de bits antes de medir? [Crea una propuesta SVG](https://perfectvector.com/es/image-to-vector), revisa sus contornos y establece la escala prevista antes de registrar una longitud.
## Explore
- [Read the HTML article](https://perfectvector.com/es/blog/measure-svg-path-length)
- [Contornos de puntos SVG: controla el espaciado y los remates redondos](https://perfectvector.com/es/blog/svg-dotted-outlines.md)
- [Marcadores SVG de Leaflet: alinea la punta con iconAnchor](https://perfectvector.com/es/blog/leaflet-svg-marker-anchor.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)