Repolode
Enviar
Yqnn

Yqnn/svg-path-editor

Editor visual en el navegador para crear y manipular datos de trazados SVG con puntos arrastrables y un panel de comandos.

Alternativa open source a:Inkscape

Ver en GitHubSitio web
Estrellas
5,336
Forks
423
Issues abiertos
27
Último commit
hace 4 meses

¿Qué es?

SVG Path Editor es una aplicación web para crear y editar el atributo `d` de los trazados SVG. Puedes pegar datos de trazado sin procesar en un campo de texto y ver cómo cambia la forma en el lienzo, o crear un trazado desde cero seleccionando un tipo de comando y haciendo clic en el punto de destino.

Los puntos se pueden mover arrastrándolos, y cada comando del trazado se puede insertar, eliminar, convertir a otro tipo o alternar entre coordenadas relativas y absolutas. El editor también permite reordenar los trazados, por ejemplo, para iniciar un trazado o subtrazado desde un comando seleccionado o invertir un subtrazado. Las operaciones sobre trazados completos incluyen escalar, trasladar, rotar, redondear, convertir coordenadas, invertir y optimizar. El viewBox se puede ampliar, arrastrar o configurar con valores numéricos, y cuenta con una opción para ajustar el zoom al contenido.

La lógica de edición se publica por separado como el paquete npm svg-path-editor-lib. El proyecto funciona con Node.js 18.13 o superior e incluye un servidor de desarrollo, una compilación de producción y pruebas unitarias con Karma.

Funciones clave

  • 01Editar datos de trazados SVG como texto sin procesar o arrastrando puntos en el lienzo.
  • 02Insertar, eliminar y convertir comandos de trazado individuales.
  • 03Alternar los comandos entre coordenadas relativas y absolutas.
  • 04Escalar, trasladar, rotar, redondear y optimizar el trazado completo.
  • 05Ajustar el viewBox con el zoom, arrastrándolo, mediante campos numéricos o ajustando el zoom al contenido.

Casos de uso

  • Ajustar manualmente trazados de iconos o ilustraciones exportados desde otras herramientas.
  • Crear formas SVG sencillas directamente en el navegador.
  • Limpiar y acortar datos de trazados redondeando u optimizando los comandos.

Inicio rápido

  1. 1

    Instala Node.js v18.13 o una versión superior y, después, instala las dependencias

    npm install
  2. 2

    Inicia el servidor de desarrollo y abre http://localhost:4200/

    npm start

Antes de usarlo

  • Para ejecutarlo localmente se necesita Node.js v18.13 o una versión superior.
  • El README no ofrece una compilación de escritorio independiente; la versión alojada se ejecuta en el navegador.

Temas

#svg#svg-path#graphics#vector#web-editor#typescript#svg-editor#svg-parser

Preguntas frecuentes

¿Qué es svg-path-editor?
Editor visual en el navegador para crear y manipular datos de trazados SVG con puntos arrastrables y un panel de comandos. SVG Path Editor es una aplicación web para crear y editar el atributo `d` de los trazados SVG. Puedes pegar datos de trazado sin procesar en un campo de texto y ver cómo cambia la forma en el lienzo, o crear un trazado desde cero seleccionando un tipo de comando y haciendo clic en el punto de destino.
¿svg-path-editor es gratuito? ¿Qué licencia tiene?
svg-path-editor es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿svg-path-editor sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de svg-path-editor fue el 18 jun 2026.
¿Para qué puedo usar svg-path-editor?
Ajustar manualmente trazados de iconos o ilustraciones exportados desde otras herramientas. Crear formas SVG sencillas directamente en el navegador. Limpiar y acortar datos de trazados redondeando u optimizando los comandos.
¿Cómo se instala svg-path-editor?
Instala Node.js v18.13 o una versión superior y, después, instala las dependencias: npm install Inicia el servidor de desarrollo y abre http://localhost:4200/: npm start
¿Dónde consigo svg-path-editor?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Yqnn/svg-path-editor

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados