Elysia Tools

Explora herramientas, ejemplos, explicaciones visuales y guías temáticas en un solo espacio claro.

Categorías populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegación

Design

Caminante de longitud de datos de ruta SVG

· Última actualización:2026-09-04

Recorre una ruta SVG comando a comando (M/L/H/V/C/S/Q/T/A/Z) — longitud de arco por segmento, distancias acumuladas de stroke-dashoffset, cajas delimitadoras por subtrazado, vectores de control cúbicos, resolución de flags de arco y alineación ruta-vs-viewBox.

Detalles

Qué te ayuda a hacer esta herramienta

Pega cualquier atributo d de SVG y el caminante tokeniza el flujo completo de comandos —M m L l H h V v C c S s Q q T t A a Z z, repeticiones implícitas, flags de arco compactos como "0 1150 30"— y reconstruye cada segmento en coordenadas absolutas. Cada segmento recibe una longitud de arco precisa: fórmulas exactas para rectas, cuadratura de Simpson adaptativa (tolerancia relativa 1e-9) para las integrales de velocidad de Bézier cúbicas/cuadráticas y arcos elípticos, y extremos analíticos (raíces de la derivada) para cajas ajustadas en lugar de muestreo. La tabla de comandos muestra la distancia inicial/final a lo largo de la ruta, de modo que cualquier animación stroke-dasharray/stroke-dashoffset puede apuntar al límite exacto de un comando, con fragmentos listos para copiar en unidades de usuario y en forma normalizada pathLength="1". Los comandos S y T resuelven sus controladores reflejados para que veas el campo de vectores real del renderizador; los comandos A se resuelven mediante la parametrización extremo→centro de SVG 2, informando centro, θ1, Δθ y aplicando la regla de escalado de radios cuando la cuerda supera 2·rx/2·ry. Un viewBox opcional recibe una auditoría de alineación: desbordamiento, márgenes, desfase de centrado y viewBox ajustado sugerido.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Continuar con herramientas y temas relacionados

Escrito por el equipo de Elysia Tools

Guía de uso de la herramienta

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Categoría
Design
Tipos de entrada
textarea, text, number
Tipo de salida
html
Cobertura de ejemplos
4
API disponible
Sí

Resumen

El Caminante de longitud de datos de ruta SVG analiza y recorre cada comando del atributo d de un trazado vectorial, calculando longitudes de arco exactas, distancias acumuladas de stroke-dashoffset, cajas delimitadoras y la alineación frente al viewBox.

Cuándo usarlo

  • Al preparar animaciones CSS o SVG basadas en stroke-dasharray y stroke-dashoffset que requieren límites de segmento precisos.
  • Al auditar datos de trazados vectoriales complejos con arcos elípticos o curvas Bézier para verificar desbordamientos en el viewBox.
  • Al depurar controladores reflejados de comandos S/T o resolver parámetros geométricos y flags en arcos SVG (comandos A).

Cómo funciona

  1. 1Tokeniza la cadena de comandos (M, L, H, V, C, S, Q, T, A, Z) admitiendo sintaxis compacta y convirtiendo coordenadas relativas a absolutas.
  2. 2Calcula la longitud de arco por segmento usando fórmulas analíticas para rectas y cuadratura adaptativa de Simpson para curvas Bézier y arcos.
  3. 3Determina la caja delimitadora ajustada mediante raíces de derivadas y resuelve centros y ángulos de arcos elípticos según la especificación SVG 2.
  4. 4Genera la tabla con distancias acumuladas para dashoffset, previsualización gráfica interactiva y métricas de ajuste respecto al viewBox proporcionado.

Casos de uso

  • Calcular valores exactos de dashoffset para pausar o sincronizar animaciones de dibujo de líneas en momentos específicos del trazado.
  • Inspeccionar curvas Bézier cúbicas con comandos S para visualizar la posición de los manejadores de control reflejados.
  • Validar y depurar parámetros de arcos elípticos (radios, rotación del eje X, flags large-arc y sweep) convertidos a formato centro-ángulo.

Comparar alternativas

  • Analiza el marcado SVG, elimina elementos redundantes, reduce peso, compara antes y despues y exporta archivos limpios

  • Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables

  • Genera códigos QR artísticos con colores de marca, degradados, módulos redondeados o de puntos y un logotipo central, con desglose de penalización de máscara…

Para quién

Ideal para

  • Analizar datos de imagen en el navegador.
  • El flujo de trabajo «Cubic S-curve with a reflected S handle», en una sola pasada.
  • Tareas repetibles con datos de imagen y los mismos ajustes cada vez.

Poco adecuado para

  • Trabajos por lotes totalmente automatizados — esta página está pensada para uso interactivo; para scripts, use el endpoint de la API.
  • Contenido en otros formatos — esta herramienta espera datos de imagen.

Casos límite y errores frecuentes

  • Archivos muy grandes

    Los archivos grandes tardan más y pueden alcanzar los límites de memoria del navegador — pruebe primero con una muestra más pequeña.

  • Omitir la revisión de la salida

    Compare las primeras filas o páginas de la salida con la entrada antes de usarla en producción.

  • Archivos de exportadores poco habituales

    Algunos archivos usan variantes de formato que no se convierten limpiamente — si la salida se ve mal, vuelva a guardar el archivo desde la aplicación que lo creó e inténtelo de nuevo.

Ejemplos

1. Curva Bézier cúbica con suavizado S

Desarrollador frontend

Contexto

Un desarrollador necesita crear una animación de trazo continuo sobre un icono vectorial de dos curvas simétricas.

Problema

Conocer la longitud exacta acumulada al final de la primera curva C para sincronizar una pausa en la animación CSS antes de la curva S.

Cómo usarlo

Pega la cadena de trazado en 'Datos de ruta', define el viewBox como '0 0 200 200' y ajusta la fracción dibujada al 50%.

pathData: "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80", viewBox: "0 0 200 200", drawPercent: 50

Resultado

Obtiene la longitud total de 282.0104 unidades, con el punto medio exacto en 141.0052 unidades y los vectores de control S resueltos.

2. Auditoría de arco elíptico y ajuste de viewBox

Diseñador UI/UX

Contexto

Un diseñador exportó una forma con líneas y un arco elíptico complejo que no calza adecuadamente en el contenedor SVG.

Problema

Identificar el centro geométrico del arco elíptico y confirmar si la ruta desborda los límites del viewBox actual.

Cómo usarlo

Preguntas frecuentes

¿Qué comandos SVG admite esta herramienta?

Soporta todos los comandos estándar SVG en mayúsculas y minúsculas: M, L, H, V, C, S, Q, T, A y Z, incluyendo repeticiones implícitas y flags compactos.

¿Cómo se calculan las longitudes de curvas Bézier y arcos?

Se calculan mediante integración numérica con cuadratura de Simpson adaptativa bajo una tolerancia relativa de 1e-9.

¿Cómo ayuda a configurar animaciones stroke-dashoffset?

La tabla desglosa la distancia acumulada al inicio y final de cada comando, entregando valores exactos en unidades de usuario y normalizados con pathLength="1".

¿Es obligatorio indicar el viewBox?

No, es opcional. Si se introduce, la herramienta audita márgenes, posibles desbordamientos y sugiere un viewBox ajustado a la geometría.

¿Qué hace el parámetro de fracción dibujada?

Permite simular visualmente el trazado progresivo de la ruta al porcentaje indicado sobre la vista previa interactiva.

Inicio
Herramientas3201
Ejemplos593
Visualizaciones465
Visores de archivos103
Temas233
Etiquetas333
Imágenes, audio y video657

Herramientas de procesamiento, conversión y optimización de imágenes, audio y video

Matemáticas, fechas y finanzas644

Calculadoras, herramientas numéricas, lógica de fechas, estadística y finanzas

Diseño y color297

Herramientas de color, maquetación, gráficos, estilo visual y apoyo al diseño

Texto y redacción209

Herramientas de redacción, limpieza, formato, extracción y análisis de texto

Desarrollo y Web193

Utilidades para desarrolladores, red, depuración web y automatización

Conversión y codificación175

Herramientas de conversión de formatos, archivos, unidades, archivos comprimidos y codificación

Revisión de fuentes FLAC/WAV y entrega de evidencias
Revisión e integración de un componente de sorteos autoalojado
Revisión de lotes de códigos Stripe y comprobación previa a la importación
Revisión del descarte fotográfico y entrega de candidatos para edición
Estructurar una captura de interfaz, revisarla y entregarla a desarrollo

© 2026 Elysia Tools. Todos los derechos reservados.

DocumentaciónPreciosAcerca deTérminos de servicioPolítica de privacidadCookiesContacto
Medios

Ejemplos SVG

Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG

Medios

Muestras SVG

Gráficos vectoriales de muestra para el visor SVG en el navegador

Visualización de datos

Ejemplos D3.js Data Visualization

Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas

Formatos de datos

Ejemplos de XML

Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas

Design

Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)

Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables.

Media

Detector de progresiones de acordes

Estima localmente los acordes de un audio y descarga CSV, JSON, SVG y notas del método en un ZIP.

Media

Minificador y analizador SVG

Analiza el marcado SVG, elimina elementos redundantes, reduce peso, compara antes y despues y exporta archivos limpios

Design

Tablero de dibujo en perspectiva de un punto

Dibuja prismas y líneas hacia un punto de fuga móvil, aprende por pasos y descarga PNG o SVG localmente.

Introduce el comando d con arcos relativos en 'Datos de ruta' y añade '0 0 100 100' en 'ViewBox'.

pathData: "M 100,100 h -50 a 50,50 0 1,1 50,-50 z", viewBox: "0 0 100 100", drawPercent: 75

Resultado

El analizador confirma una longitud de 335.6194 unidades, desglosa el arco de 235.6194 con centro en (50,50) y valida la alineación sin desbordamientos.

Minificador y analizador SVG
Verificador de accesibilidad
Generador de códigos QR artísticos con módulos estilizados e inserción de logotipo