Extractor de Coordenadas de SVG Path｜Convierte Trazados SVG a JSON Online

Esta herramienta online extrae coordenadas (x, y) de un trazado SVG (atributo "d") y las convierte en un array JSON. Es ideal para desarrolladores y diseñadores que necesitan manipular trazados SVG para animaciones web, visualizaciones de datos o proyectos de JavaScript.

💡 Resumen de la Herramienta

• Muestreo de Puntos Preciso: Extrae un número personalizable de coordenadas (puntos) a lo largo de cualquier trazado SVG complejo, incluyendo líneas, arcos y curvas de Bézier.
• Control de Resolución y Precisión: Ajusta fácilmente la cantidad de puntos a generar y la precisión de los decimales para las coordenadas resultantes, adaptando la salida a las necesidades de tu proyecto.
• Formatos JSON Flexibles: Elige entre dos formatos de salida JSON estándar: un array de arrays [[x, y]] o un array de objetos [{x, y}], facilitando la integración con librerías como D3.js, Three.js o GSAP.
• Vista Previa Interactiva: Visualiza instantáneamente el trazado SVG original y los puntos de muestreo generados en un lienzo. Cualquier cambio en la configuración se refleja en tiempo real.
• Procesamiento en el Navegador: Para garantizar tu privacidad, todos los datos del SVG se procesan localmente en tu navegador. Ninguna información se envía a nuestros servidores.

🧐 Preguntas Frecuentes

Q. ¿Qué es el atributo "d" en un SVG?

A. El atributo d (datos) en un elemento <path> de SVG contiene una serie de comandos y parámetros numéricos que definen la forma geométrica del trazado. Comandos como M (moveto), L (lineto), C (curveto), y Z (closepath) son los que instruyen al renderizador sobre cómo dibujar la forma.

Q. ¿Cómo funciona el muestreo de puntos en la herramienta?

A. La herramienta utiliza la API nativa del navegador para medir la longitud total del trazado SVG. Luego, distribuye el número de puntos que has seleccionado de manera uniforme a lo largo de esa longitud. Para cada punto, obtiene las coordenadas (x, y) exactas utilizando la función getPointAtLength(), lo que asegura una representación fiel de la curva original.

📚 Datos sobre el Atributo d de SVG

La sintaxis del atributo d es una especificación compacta y potente. Utiliza comandos de una sola letra (mayúsculas para coordenadas absolutas, minúsculas para relativas) seguidos de números. Por ejemplo, M 10 10 significa "muévete a la coordenada absoluta (10,10)", mientras que l 5 5 significa "dibuja una línea a 5 unidades a la derecha y 5 hacia abajo desde el punto actual". Esta sintaxis concisa permite definir formas vectoriales increíblemente complejas en una sola cadena de texto, siendo la base para la mayoría de las librerías de animación y visualización de datos que trabajan con SVG.