Se mencionó en la Cumbre SVG el otro día, ¿no sería bueno cuando se trabaja con SVG poder trabajar con él en ambos sentidos a la vez?
- Ver y editar el código y ver los resultados visualmente
- Ver y editar las formas visuales y ver el cambio de código
Puede que no exista la herramienta perfecta y verdadera, ¡pero ciertamente hay algunas ideas para lograrlo!
Constructor de rutas SVG de Anthony Dugois
Insertaría el Pen aquí, pero realmente necesitas un poco más de espacio para jugar con él. Aquí hay un video de cómo funciona:
Le muestra la salida del código, pero no puede ajustar el código para ver los cambios en la parte visual. Todavía hace un trabajo increíble al mostrarle los diferentes tipos de comandos de curva disponibles en la sintaxis de ruta SVG.
SvgPathEditor de Yann Armelin
Lo agregaré en mayo de 2020, ¡y creo que es el más cercano a la perfección!
Copie y pegue algunos datos de ruta allí y simplemente funciona. Puede jugar con el área visual, arrastrando puntos y puntos de curva alrededor, o editar los datos de la ruta en sí, o los datos de la ruta desglosados en un formulario con controles individuales.
SVG de Sten Hougaard manipular caminos
Un bolígrafo del Sr. Hougaard tiene algunas curvas preestablecidas con las que puedes arrastrar y jugar.
No solo le brinda los datos, sino que también le brinda una completa elemento. También es unidireccional, sin cambiar el código a mano.
XVG de Varun Vachhar
Esta extensión de Chrome no te permite ver el código SVG ni te permite manipular nada, pero te muestra los puntos y controles de curva que componen un SVG en cualquier lugar donde encuentres uno en la web, lo que te da un poco de detrás de escena. Mira.
Es realmente genial cómo puedes invocar esto en cualquier lugar. Sería genial verlo evolucionar con capacidades de manipulación interactivas y mostrar el resultado de esos cambios.
Clippy de Bennett Feely
Clippy no es SVG, es para la ruta del clip de CSS, pero creo que verás fácilmente cómo este tipo de interfaz de usuario sería genial para la manipulación de SVG y para ver el código mientras haces las cosas.
Curva Cubic Bézier de Ana Tudor con SVG
Este lo puedo incrustar aquí mismo:
No hay edición del código directamente, pero está muy claro a partir de las interacciones qué partes del código está cambiando cuando manipula los puntos de control de la curva SVG.
Caminos de Brent Jackson
¡Añadiendo este! Me alegro mucho de que se haya señalado porque parece lo más parecido a poder editar en ambos lados: código y visualmente.
Software de gráficos: solo visual
Recuerde que el punto aquí es buscar una interfaz de usuario que conecte la idea de edición visual y edición de código. El software de edición de vectores como Adobe Illustrator es visual solo porque hay herramientas para manipular gráficos visualmente, pero no sabes cómo eso está afectando el código.
Puede exportar el código y mirarlo, pero esa no es la conexión en tiempo real que estamos explorando aquí.
Editores de código: solo código
Los editores de código como CodePen ayudan a unir el código y la salida visual:
Pero sigue siendo una calle de un solo sentido. No puedes hacer nada con ese lado visual más que mirarlo.
Esperando la herramienta perfecta
Muchas opciones; ¡nada perfecto! Nada de lo que he visto, todavía, une perfectamente la edición de código y la edición visual como ciudadanos de interfaz de usuario de primera clase iguales.