Hyvector – editor de SVG rápido y moderno
(hyvector.com)- En el trabajo con gráficos vectoriales, sin necesidad de abrir una app de escritorio pesada, Hyvector ofrece un flujo para editar y exportar SVG en el navegador en cuestión de segundos
- Tareas rápidas como ajustar íconos, hacer borradores de logos o limpiar trazados SVG se pueden resolver de inmediato sin crear una cuenta ni descargar una app pesada
- Todo el procesamiento se mantiene de forma local con un enfoque de privacidad primero, buscando inicio rápido y bajo uso de memoria
- Soporta modelado tipográfico entre formatos para texto bidireccional, sistemas de escritura complejos y caracteres conectados como el árabe
- Tras pasar 5 años construyendo la base principal como desarrollador independiente, ahora está agregando funciones como colores globales, grosor de trazo dinámico y fuentes variables sobre un motor central ya estabilizado
Flujo de edición SVG sin instalación
- Hyvector es un editor de SVG y gráficos vectoriales que corre directamente en el navegador
- Se enfoca en un flujo de trabajo para abrir archivos rápido, editarlos y luego exportar los gráficos
- Se puede usar sin crear una cuenta ni descargar una app pesada
- Algunas tareas para las que resulta ideal son las siguientes
- Ajuste de íconos
- Borradores de logos
- Limpieza de trazados SVG
Entorno ligero y privacidad
- Puede ejecutarse en cualquier lugar sin instalación
- Busca inicio rápido y bajo uso de memoria
- Usa un enfoque de privacidad primero donde todo el procesamiento permanece de forma local
Funciones de edición y estado del desarrollo
-
Soporte tipográfico
- Soporta texto bidireccional completo
- Puede manejar sistemas de escritura complejos
- Soporta modelado tipográfico entre formatos para caracteres conectados como el árabe
-
Herramientas de edición vectorial
- Ofrece una vista de árbol de elementos con arrastrar y soltar
- Permite controlar trazados con precisión con base en transformaciones completas, incluyendo inclinación, rotación y cambio de tamaño
- Incluye un pincel de pintura con un potente modo borrador
-
Proyecto de un solo desarrollador
- Al principio comenzó como un side project rápido, pero por la complejidad de los gráficos vectoriales se extendió durante 5 años
- La base principal ya está terminada y el motor central está estabilizado
- Ya vienen en camino funciones como colores globales (global colors), grosor de trazo dinámico (dynamic stroke widths) y fuentes variables (variable fonts)
1 comentarios
Opiniones de Hacker News
Genial. Mi proyecto paralelo es una biblioteca de renderizado SVG en C++, y me ha costado encontrar un buen editor SVG.
Normalmente termino trabajando en Illustrator y luego limpiando el marcado generado, o vuelvo a un editor basado en texto como https://www.svgviewer.dev/
La UX está bastante pulida y, aun ahora, soporta más funciones que otras herramientas que he revisado. Como referencia, mi proyecto es https://github.com/jwmcglynn/donner, y el prototipo de “editor” web (por ahora solo permite edición basada en código) está en https://jwmcglynn.github.io/donner-editor/
SVG es un área con mucho potencial, pero se ha visto afectada por la falta de buenas herramientas, así que me alegra ver nuevos intentos en este espacio.
Es un buen comienzo. Hay algunas funciones claras que sentí que faltaban.
La herramienta de nodos debería intentar hacer snap entre los nodos inicial/final al editar, y al crearlos por primera vez podría tener una distancia de snap más grande, especialmente con la herramienta lápiz.
En vez de una herramienta de nodos para edición, algo como la deformación de tirar/empujar al estilo Flash/Futurewave SmartSketch de Wick Editor probablemente sería mucho más amigable en móvil.
Si el redondeo de esquinas en polígonos no funciona, debería ocultarse o desactivarse.
Me hubiera gustado que Karbon de KDE se viera así. Es un editor SVG amigable, pero rápido y capaz.
Si se puede, sería bueno que también incluyera funciones presentes en SVG Path Editor0. Por ejemplo, convertir coordenadas absolutas en relativas, o editar individualmente las líneas y curvas de cada ruta; son cosas que no he encontrado en otros editores.
Otra función que sería excelente, aunque podría implicar una enorme cantidad de trabajo o convertirse en un proyecto aparte, es la animación.
Se ve bien. No lo digo como crítica, pero siempre he pensado que, en un editor, el SVG en sí es el nivel de abstracción equivocado. Lo que uno quiere no es un editor SVG, sino un programa de dibujo vectorial.
Claro, debería renderizar a SVG optimizado, pero construir la UI/UX alrededor de conceptos de SVG como rutas y clip paths no es amigable para el usuario final. Eso también es algo que siempre me molestó de Inkscape.
Creo que lo realmente potente sería incorporar a un editor vectorial algo parecido a los modificadores de Blender (arrays, mirror, etc.) para permitir edición no destructiva.
La primera excepción son los clip paths: en Hyvector se tratan como rutas con trazo y relleno, además de contenido que se recorta fuera de esa ruta. En SVG, manejar clip paths es bastante engorroso y poco intuitivo.
Si puedo seguir desarrollándola, vendrán funciones como redondeo de esquinas en rutas, operaciones booleanas no destructivas, ancho de trazo variable, múltiples rellenos y distorsiones.
Eso sí, quiero mantener SVG como formato de exportación, porque es realmente bueno para la web y se puede estilizar con CSS. Por eso los efectos tienen que poder exportarse como SVG real, y quiero evitar el enfoque de algunos editores de meter bitmaps falsos dentro del SVG al exportar. Por ejemplo, no habrá gradientes cónicos hasta que SVG los soporte algún día.
Intenté editar este ícono para centrar la flecha dentro del círculo, pero como la máscara no se reconocía correctamente, solo se veía un círculo negro.
http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">
Para este ícono, un clip path quizá sería más adecuado que una máscara. Si quieres crear un ícono con la misma forma, puedes tomar los elementos dentro de la máscara, pegarlos en Hyvector y trabajar desde ahí.
Muy bueno. Me gustan los editores web.
Me gusta que, en un SVG importado, todos los objetos y grupos se vean claramente con una previsualización correcta.
Hay dos funciones que faltan o que no encontré: me pregunto si hay una forma de convertir líneas en formas, y si se puede editar el código SVG directamente a mano en tiempo real. Tal vez sea demasiado de nicho para usuarios generales, pero para algunas tareas, como los rellenos, es mucho más fácil editar en código que con herramientas visuales.
También me da curiosidad si existe la posibilidad de liberarlo como open source.
Me gusta mucho la UX. También es muy usable en una tablet Android con soporte para Wacom.
No sé si la forma de editar splines —poder arrastrar cualquier punto de la línea en vez de ajustar handles individuales— la inventaste tú o la tomaste de otro lado, pero me encanta.
Lo único que vi es que el scroll táctil no funciona en el árbol de la izquierda; por lo demás, va muy fluido. También me pregunto si ya implementaron atajos de teclado.
También funciona mantener Shift mientras se arrastra para conservar la dirección de los handles.
El árbol de la izquierda es difícil de ajustar bien en todos los dispositivos. Tiene que soportar clic, clic con toque, drag and drop, scroll por swipe, scroll táctil, etc., y al mismo tiempo comportarse como si pudiera contener cientos de elementos. Todavía hay problemas como el scroll por swipe en iOS y algo de tartamudeo, pero lo tengo en la lista.
Los atajos de teclado están implementados en dispositivos que no son móviles. Si abres un menú desde la barra de menús, verás los atajos a la derecha de cada elemento.
No logré descubrir cómo usarlo. Creé un segmento de línea, pero no encontré cómo moverlo ni cambiarle el tamaño, aunque sí aparecieron handles de arrastre.
Tampoco sé cómo crear otras formas como rectángulos o círculos. Presioné casi todos los botones visibles en varios órdenes unas veinte veces, pero en la mayoría no pasó nada.
Genial. Espero que este proyecto tenga éxito.
Como feedback de primera impresión, se me ocurre que al iniciar podrías abrir de inmediato un documento vacío sin título para que el usuario pueda jugar, y dejar seleccionada como herramienta inicial alguna herramienta divertida, como el lápiz Bézier.
Yo tuve la motivación suficiente para hacer clic por todos lados, darme cuenta de que no había ningún documento abierto, crear uno nuevo, cambiar de herramienta y empezar a jugar, pero muchos usuarios no lo harán. En especial, que no haya un documento abierto parece ser el mayor obstáculo.
Parece un detalle pequeño, pero sería bueno que el canvas predeterminado fuera un poco más grande; por ejemplo, un cuadrado de 512 o 500. Cuando la gente prueba una herramienta nueva, de forma realista solo le da los primeros 10 a 20 segundos; si no la atrapas en ese tiempo, simplemente se va y pierdes muchos usuarios.
Se ve muy bien, y gracias por compartirlo.
Incluso después de crear un documento nuevo e intentar usar el lápiz, no pasó nada. Al final no pude descubrir cómo usarlo.
Con la herramienta Bézier pude agregar algunos nodos, pero no pude manipularlos con ninguna herramienta. ¿Será que el arrastre está completamente roto en Chrome/Windows?
Está bueno y se ve con mucho potencial. Como feedback simple, poner la barra de herramientas flotante arriba distrae y se come el área real de dibujo.
Sería mejor dejarla como una barra de herramientas normal o ubicarla debajo del canvas. O bien hacer que se pueda mover o contraer.