Hyvector – editor de SVG rápido y moderno

• Hyvector es un editor web para editar de forma eficiente imágenes SVG (Scalable Vector Graphics), rápido y moderno.
• Requiere compatibilidad con JavaScript y debe estar habilitado para funcionar correctamente.
• Se puede acceder de inmediato desde el navegador sin instalaciones ni configuraciones complejas.
• Combina un rendimiento potente con un diseño moderno para ofrecer una experiencia de usuario intuitiva.
• No está pensado para editar SVG a nivel de texto o código, sino para ofrecer un entorno de edición cómodo mediante una interfaz visual.

Principales ventajas e importancia

• En comparación con editores SVG de código abierto y comerciales, ofrece una respuesta rápida y una UI moderna.
• Al ser una herramienta web, se puede acceder a ella desde cualquier lugar sin importar el sistema operativo.
• Proporciona un entorno eficaz de trabajo con imágenes vectoriales tanto para diseñadores como para desarrolladores.
• Se puede usar de inmediato sin la carga de instalar plugins ni programas adicionales.
• Sus herramientas de edición intuitivas permiten crear y modificar recursos SVG con facilidad.

[GN⁺]

Opiniones de Hacker News

• Estoy desarrollando una librería de renderizado SVG en C++ como proyecto paralelo y nunca había encontrado un buen editor SVG, así que normalmente usaba Illustrator y luego limpiaba el marcado resultante, o usaba el editor basado en texto svgviewer.dev. Me impresionó mucho lo pulida que está tu UX y que ya soporte más funciones que otras herramientas que había encontrado. Mi proyecto Donner también ofrece un prototipo de editor de código basado en web. SVG tiene muchísimo potencial, pero era un área limitada por las herramientas disponibles, así que me alegra ver innovación aquí.
  • Me da curiosidad saber qué problemas tiene Inkscape. Tiene algunos bugs, pero en general siento que funciona bastante bien.
• Se ve como un muy buen comienzo. Hay algunas funciones claramente ausentes: al editar con la herramienta de nodos, estaría bueno que los nodos inicial y final pudieran ajustarse fácilmente entre sí, y especialmente al dibujar con la herramienta de lápiz, sería mejor que la distancia de ajuste fuera más amplia. Creo que una herramienta de transformación y distorsión al estilo Wick Editor sería amigable para móviles. Si no se puede redondear las esquinas en polígonos, sería mejor ocultar o desactivar esa opción.
  • Justamente quería este tipo de feedback, gracias.
• Me gustó mucho que permita control a alto nivel; por ejemplo, me gustó que puedas controlar cambios que en realidad no son visibles, como invertir una ruta. Pero sería bueno tener alguna retroalimentación, porque es difícil saber si la inversión se ejecutó o no. Al copiar una selección, parece que todas las fuentes usadas se incrustan en el SVG en base64, lo que infla el archivo. Tengo curiosidad por saber si piensas mantener estrictamente el mapeo 1:1 con SVG o si también considerarías una abstracción. Yo sigo usando Figma por una función llamada Vector Networks; aunque requeriría conversión interna a datos de ruta válidos, sería muy útil. Técnicamente me sorprendió que adoptaras renderizado SVG; pensé que sería basado en canvas. Hace poco intenté renderizar objetos 3D con SVG y me topé rápido con problemas de rendimiento, pero todavía no descubro la causa. ¿Has hecho pruebas de estrés en dispositivos antiguos?
  • Durante bastante tiempo no me di cuenta de que Vector Networks (yo lo llamo path graph) en realidad ya era una estructura intermedia que tenía para operaciones booleanas de rutas. Hasta hace poco era escéptico con Vector Networks, pero últimamente, con tantas imágenes generadas por IA, empecé a pensar que sería genial como resultado de vectorizar bitmaps. Es una función que me gustaría introducir, pero hay una montaña de cosas más urgentes en la lista de prioridades. También voy a seguir haciendo pruebas de estrés, y hasta lo probé en una vieja tablet Android lentísima de 100 euros. La publicación en Hacker News fue bastante improvisada y debí haber probado más. Antes usaba una ThinkPad vieja para detectar problemas de rendimiento al instante, pero ya no es posible porque el IDE se fue poniendo cada vez más pesado. Aun así, quiero seguir conservando dispositivos viejos para verificar que todo funcione bien. Voy a revisar todas las sugerencias de los comentarios y convertirlas en issues. Me sorprendió muchísimo la cantidad de feedback útil; esperaba algo como 5 upvotes y unos 2 comentarios. La razón de usar renderizado SVG fue que quería que el SVG guardado se viera exactamente igual al renderizado. También pensé en hacer el overlay con Canvas o WebGL, pero por ahora funciona lo bastante rápido en la mayoría de las imágenes.
• Me hace pensar en cómo habría sido si Karbon de KDE se hubiera convertido en una herramienta de edición SVG tan intuitiva y rápida. En especial, de verdad hacen falta funciones como las que ofrece SVG Path Editor (por ejemplo, convertir coordenadas de ruta a valores relativos, editar por separado curvas y líneas dentro de una ruta), pero todavía no he encontrado eso en ningún otro editor. Y aunque sería una tarea enorme, también estaría muy bien si se agregaran funciones de animación.
  • Hay muchos proyectos llamados SVG Path Editor, pero el de yqnn.github.io que se presentó aquí es la herramienta más avanzada y útil que he usado hasta ahora.
• De verdad espero que este proyecto tenga éxito. Tengo una sugerencia sobre la experiencia del primer uso: sería bueno que al empezar ya hubiera un documento vacío sin nombre listo para practicar de inmediato, y por ejemplo que una herramienta divertida como el lápiz Bezier estuviera seleccionada automáticamente. Yo hice varios clics antes de darme cuenta de que no había ningún documento, luego creé uno nuevo y cambié de herramienta para probar, pero creo que muchos usuarios se van a trabar ahí muy rápido. También estaría bien que el tamaño predeterminado del canvas fuera un poco más grande (por ejemplo, cuadrado de 512 o 500). La realidad es que, al probar algo nuevo, si no se siente divertido en 10-20 segundos, la gente se va enseguida. Tienes que engancharlos de inmediato. Está muy bien hecho.
  • Coincido. Yo hice clic de inmediato en el lápiz para intentar garabatear y me decepcionó que no pasara nada. Incluso después de crear un documento nuevo, el lápiz seguía sin funcionar. Al final nunca logré entender cómo usarlo. Sí pude agregar nodos con la herramienta Bezier, pero no logré manipularlos con otras herramientas. Parece que la función de arrastrar no funciona bien en Chrome/Windows.
• No logré entender bien cómo se usa. Alcancé a crear un segmento, pero no encontré cómo moverlo o redimensionarlo, y sí pude hacer aparecer los manejadores de arrastre. Tampoco encontré ninguna forma de crear otras figuras como rectángulos o círculos. Probé casi 20 veces los botones, pero no pasó nada.
  • La herramienta de formas es la que está en la barra principal entre la herramienta de texto y la de imagen. Las dos primeras opciones son rectángulo y círculo.
  • Creo que apps como esta deberían mostrar muchísimas pistas sobre cómo usarlas, con opción para desactivarlas.
• Me divertí mucho probando esta herramienta; es muy rápida e intuitiva. En particular, el rendimiento al hacer zoom y pan es muchísimo mejor que el de herramientas anteriores. Una cosa que me da curiosidad es si hay planes de agregar una capa de plugins o API orientada a flujos de trabajo generativos. Cada vez más usuarios mezclan scripting o efectos visuales impulsados por IA con edición SVG, así que si Hyvector tuviera una capa programable, como un mini lenguaje o un puente con JS, sería muchísimo más potente. Felicidades por el lanzamiento; siempre da gusto ver más herramientas nuevas que bajan la barrera de entrada para el trabajo vectorial creativo.
  • Gracias. Hace poco empecé a usar un poco de IA en otros proyectos de mi trabajo principal, y coincido en que permitir integración con IA es importante. Me encantaría que me contaras con más detalle cómo te gustaría combinar IA y un editor vectorial. Yo había pensado en usarla para vectorizar y colorear bitmaps generados por IA, pero fuera de eso todavía no lo había considerado.
• Me gusta muchísimo esta UX. Se sintió muy bien de usar en una tablet Android con funciones de Wacom. No sé de dónde salió la idea de esta forma de editar splines (o sea, ajustar arrastrando puntos arbitrarios sobre la línea en vez de manejadores individuales), pero definitivamente está muy buena. Lo único que extrañé es que no se puede hacer scroll táctil en el árbol de la izquierda. Fuera de eso, todo se siente muy fluido. ¿Ya hay atajos de teclado implementados?
  • La forma de implementar el arrastre de curvas fue sorprendentemente simple. Tomé la idea de una discusión antigua en un foro de Google. Si mantienes presionada la tecla Shift mientras arrastras, también se conserva la dirección del manejador. El árbol de la izquierda es difícil de resolver perfectamente en todos los dispositivos, porque tiene que soportar clic, toque, arrastrar y soltar, scroll por deslizamiento, scroll táctil, y además mostrar bien cientos de elementos, así que es complejo. Todavía hay cosas en la lista, como el scroll por deslizamiento en iOS o algunos pequeños tirones. Los atajos de teclado, excepto en móviles, aparecen a la derecha de cada opción cuando abres la barra de menú en escritorio.
• Al probarlo directamente sentí que el arranque es muy prometedor. La UX me gustó especialmente por lo intuitiva que es la herramienta de pluma, porque el panel de objetos muestra vista previa de cada capa, por la buena integración de clipping paths y porque ofrece funciones poco comunes como convertir texto a contornos y operaciones booleanas. Como feedback crítico: estaría bueno tener atajos para cambiar entre herramientas y que aparezcan también en los tooltips; me gustaría soporte para zoom con Ctrl +/- y pan con espacio + arrastrar; al editar grupos, es difícil seleccionar objetos individuales dentro del grupo, y el doble clic te cambia directo a la herramienta de nodos, así que estaría bueno un modo de aislamiento de grupo; mientras usas la pluma, debería ser posible ajustar el punto de control del punto anterior; y en modo pluma, deshacer no revierte la adición del punto de la ruta sino solo la acción anterior, lo cual es incómodo. El soporte de texto es limitado, y lo mismo pasa con filtros; las fuentes incrustadas como @font-face no se muestran. Parece que el renderizado SVG se hace por separado, así que en el navegador no logra dibujarse correctamente.
  • Gracias por el buen feedback. Parece que en los próximos días voy a tener muchísimos issues para escribir. La verdad, cuando publiqué en Hacker News esperaba apenas 5 upvotes y 2 comentarios, pero la respuesta fue enorme. Sí se pueden seleccionar objetos individuales dentro de un grupo con Ctrl + clic. La lógica de selección todavía no está del todo pulida y la voy a seguir mejorando, pero por ahora ese método puede ayudar.
• Me gustó porque se le ve mucho potencial. Como feedback rápido, la estructura en la que la barra de herramientas aparece arriba del canvas rompe un poco la concentración y reduce el espacio de trabajo. Sería mejor una disposición de barra más convencional o ponerla debajo del canvas. O, si no, estaría bueno que se pudiera mover o plegar.
  • Gracias. El diseño y la ubicación de la barra ya los cambié varias veces. Ya existe una función para plegarla automáticamente cuando la ventana se hace angosta, y agregar un botón para plegarla sería muy fácil de implementar.