search

Found

info Descripción

Convierte el atributo d de SVG en arrays de coordenadas equiespaciadas como JSON. Visualiza cómo las curvas se descomponen en puntos y entrega coordenadas a entornos sin API DOM SVG (Arduino, plotters, Excel, firmware embebido) o úsalas como material de entrada para tareas con LLM.

📘 Cómo usar

  1. Abre tu SVG en un editor de texto, copia el atributo d del elemento path y pégalo en el campo de entrada.
  2. Ajusta los puntos de muestreo (2-1000) y la precisión decimal (0-6) para generar el JSON.
  3. Verifica las posiciones de muestreo en la vista previa y copia el JSON para usarlo en tu entorno destino.

Muestreador de Coordenadas de Ruta SVG

100
2
Ingrese la ruta SVG
¡Copiado!

grid_view Relacionados

Article

Muestreador de Coordenadas de Ruta SVG | Descompón Curvas en Arrays JSON de Puntos

Convierte el atributo d de un elemento <path> SVG en puntos de coordenadas muestreados de manera uniforme y exporta el resultado como JSON. El muestreo se renderiza visualmente para que veas exactamente cómo se descomponen las curvas en puntos — diseñado para aprender la geometría de rutas SVG y para pasar coordenadas a entornos sin acceso a la API DOM SVG.

💡 Resumen de la Herramienta

  • Muestreo visual: Los puntos de muestreo aparecen en la vista previa en tiempo real, mostrando cómo varía la densidad entre tramos rectos y curvas cerradas.
  • Dos formatos JSON: Elige entre array [x, y] u objeto {x, y} según la API receptora.
  • Cantidad de puntos ajustable: De 2 a 1000 puntos. Más puntos dan mayor fidelidad de curva; menos puntos comprimen los datos.
  • Control de precisión decimal: Define 0-6 decimales en el JSON de salida para adaptarse a los requisitos del receptor o reducir tamaño de archivo (la vista previa no se ve afectada — los cambios sub-píxel son invisibles).
  • Solo en el navegador: Los datos del trazado nunca salen de tu navegador. No se envía nada a ningún servidor.

🧐 Preguntas Frecuentes

Q. ¿Realmente necesitan esta herramienta los desarrolladores JavaScript?

A. En la mayoría de entornos JS basta con llamar a SVGPathElement.getPointAtLength() directamente en cinco líneas de código y olvidarse de la herramienta. Este conversor está pensado para situaciones en las que la API DOM SVG no está disponible: firmware embebido, sketches de Arduino, generadores de G-code para plotters, flujos de Excel/Power Automate, scripts de Python, y como recurso didáctico para visualizar cómo una ruta SVG se descompone en puntos discretos.

Q. ¿Puedo usarlo para preparar entradas para LLMs/IA?

A. Sí. Cuando pides a ChatGPT o Claude que anime o analice una curva, entregar al modelo un array JSON de coordenadas (en lugar de la cadena cruda del trazado) le evita interpretar la gramática de la ruta y vuelve la solicitud más fiable.

Q. ¿De dónde sale el atributo d de SVG?

A. Exporta cualquier forma vectorial desde Adobe Illustrator, Figma o Inkscape como SVG y abre el archivo en un editor de texto. Encontrarás un elemento <path d="M10 10..." /> — copia el contenido de d="..." y pégalo en esta herramienta.

📚 Cómo Funciona el Muestreo de Rutas SVG

Esta herramienta utiliza los métodos SVGPathElement.getTotalLength() y getPointAtLength(distance) de la API DOM SVG del navegador. El primero devuelve la longitud total de la ruta; el segundo devuelve las coordenadas X/Y a cualquier distancia recorrida. Juntos permiten muestrear cualquier punto de un trazado, incluidas curvas Bézier complejas, sin resolver las ecuaciones paramétricas a mano.