SVGView

Extractor de rutas SVG

Obtén rápidamente datos de path para motion, clipping o generación de código. Ideal para devs y motion designers. Abre archivos SVG online y empieza a procesarlos al instante.

Arrastra y suelta tu archivo SVG

o haz clic para buscar, o pega el código SVG

Solo acepta archivos .svg
Pega el código SVG con Ctrl+V / Cmd+V

¿Por qué usar nuestro extractor de rutas SVG?

Extracción exacta del comando d

Lee cada elemento <path> y muestra la cadena d completa (curvas, arcos y cierres). Obtienes la secuencia exacta necesaria para animaciones o reutilización en código. Es útil cuando solo necesitas la geometría sin metadatos adicionales.

Copia individual o masiva

Puedes copiar una ruta a la vez o exportar todas las rutas con una sola acción. Esto es útil para dividir arte en múltiples animaciones o construir sprites. También puedes guardar snippets locales para prototipar más rápido.

Conteo y orden de rutas

Muestra el número total de paths y mantiene el orden original. Eso ayuda a alinear la salida con capas en herramientas de diseño y mantener cues de animación consistentes. Un orden claro es útil para animaciones secuenciales.

Salida estructurada y legible

Presenta valores d largos en una lista limpia para que puedas escanear y comparar fácilmente. Un formato consistente acelera revisión y handoff. El salto de línea mantiene legible la salida incluso en iconos complejos.

Flujo no destructivo

La extracción es de solo lectura y no modifica tu archivo. El SVG original permanece intacto para edición y control de versiones. Es seguro para ejecutarlo sobre assets de producción.

Local y privado

Todo se procesa en el navegador, sin subidas. Es seguro para assets de clientes y librerías internas. Además mantiene iteración rápida en archivos grandes.

Cómo extraer datos de rutas SVG

1

Añade tu SVG

Arrastra y suelta un archivo o pega el marcado. El extractor analiza los paths al instante y mantiene el viewBox original. Si tu SVG usa símbolos, expándelos antes de extraer. Abre archivos SVG online y empieza a procesarlos al instante.

2

Revisa los datos

Verás cada valor d y el conteo total de paths. Revisa la lista para confirmar que no falta nada antes de copiar. Es útil para detectar rutas sueltas que dejan algunas herramientas al exportar.

3

Copia y usa

Copia entradas individuales o exporta todo de una vez. El formato queda limpio para pegar en código o herramientas de diseño sin limpieza extra. Guarda resultados como snippets para reutilizar.

Preguntas frecuentes: Extractor de rutas SVG

¿Qué es el atributo d y cómo lo extraigo?
El atributo d contiene los comandos vectoriales que dibujan una ruta. Es la base para animaciones y ediciones programáticas. La herramienta muestra esos valores para que puedas copiarlos y compararlos entre versiones.
¿Puedo extraer múltiples paths a la vez?
Sí. Lista todos los <path> y mantiene el orden, así que puedes copiar uno o todos con un clic. Es útil en iconos complejos o ilustraciones con múltiples formas.
¿Modifica mi SVG?
No. Solo lee el archivo, así que tu fuente queda segura para futuras ediciones y exports.
¿Y las formas rect, circle o polygon?
Solo lee elementos <path>. Si necesitas comandos de otras formas, conviértelas a path en tu editor (la mayoría tienen opción de convertir a trazado).
¿Puedo usar la salida en herramientas de animación?
Sí. Funciona con flujos de GSAP, Lottie, SMIL y scripts personalizados. También es útil para librerías que hacen morph entre paths.
¿Hay límite de tamaño de archivo?
Admite archivos hasta 10MB. Si el SVG es complejo, simplifícalo para que la salida sea más manejable. Menos nodos también hacen las animaciones más suaves.
¿Se sube mi SVG a un servidor?
No. Se procesa en local en tu navegador, así que los archivos no salen de tu dispositivo. Ideal para trabajo confidencial.
¿Es gratis y no requiere descarga?
Sí. Es gratis y funciona en el navegador, sin instalación.
¿Necesito una cuenta?
No. Funciona al instante sin registro y con archivos en local.

Herramientas SVG relacionadas

Combina el extractor con estas herramientas para previsualizar, optimizar o reutilizar rutas de forma más efectiva.

SVG Viewer

Previsualiza el arte antes de extraer para verificar tamaños y capas.

Abrir herramienta

SVG Formatter

Da formato al marcado para que datos largos de path sean más fáciles de revisar.

Abrir herramienta

SVG Optimizer

Optimiza primero y luego extrae para mantener el d más conciso.

Abrir herramienta

SVG a React

Convierte las rutas en componentes reutilizables para librerías de UI.

Abrir herramienta