Hyvector – éditeur SVG rapide et moderne
(hyvector.com)- Pour le travail sur des graphiques vectoriels, inutile d’ouvrir une lourde application desktop : Hyvector propose dans le navigateur un flux de travail permettant d’éditer et d’exporter des SVG en quelques secondes
- Les tâches rapides comme la modification d’icônes, l’ébauche de logos ou le nettoyage de tracés SVG peuvent être effectuées immédiatement sans création de compte ni téléchargement d’une application volumineuse
- Tout le traitement reste en local, dans une approche privacy-first, avec pour objectif un démarrage rapide et une faible consommation mémoire
- Prend en charge le cross-format shaping pour le texte bidirectionnel, les systèmes d’écriture complexes et les caractères cursifs comme l’arabe
- Après avoir construit les fondations essentielles pendant 5 ans en solo, le développeur ajoute désormais des fonctionnalités comme les couleurs globales, l’épaisseur de trait dynamique et les polices variables sur un moteur cœur stabilisé
Un flux d’édition SVG sans installation
- Hyvector est un éditeur de SVG et de graphiques vectoriels qui s’exécute directement dans le navigateur
- Il se concentre sur un flux de travail consistant à ouvrir rapidement des fichiers, les modifier, puis exporter les graphiques
- Il peut être utilisé sans création de compte ni téléchargement d’une application volumineuse
- Voici quelques tâches qui se prêtent bien à ce traitement rapide
- modification d’icônes
- ébauche de logos
- nettoyage de tracés SVG
Environnement léger et confidentialité
- Peut être lancé n’importe où sans installation
- Vise un démarrage rapide et une faible consommation mémoire
- Utilise une approche privacy-first où tout le traitement reste en local
Fonctions d’édition et état du développement
-
Prise en charge de la typographie
- Prend en charge l’ensemble du texte bidirectionnel
- Peut gérer des systèmes d’écriture complexes
- Prend en charge le cross-format shaping pour les caractères cursifs comme l’arabe
-
Outils d’édition vectorielle
- Fournit une vue arborescente des éléments en glisser-déposer
- Permet un contrôle précis des tracés sur la base de transformations complètes, notamment l’inclinaison, la rotation et le redimensionnement
- Propose un pinceau de peinture avec un mode gomme puissant
-
Projet développé en solo
- D’abord lancé comme un petit side project rapide, il s’est étendu sur 5 ans en raison de la complexité des graphiques vectoriels
- Les fondations essentielles sont terminées et le moteur cœur est stabilisé
- Les prochaines fonctionnalités prévues incluent les couleurs globales (global colors), l’épaisseur de trait dynamique (dynamic stroke widths) et les polices variables (variable fonts)
1 commentaires
Commentaires sur Hacker News
Super. Mon projet parallèle est une bibliothèque de rendu SVG en C++, et il a été difficile de trouver un bon éditeur SVG.
En général, on finit par travailler dans Illustrator puis nettoyer le balisage généré, ou par revenir à un éditeur textuel comme https://www.svgviewer.dev/.
L’UX est assez soignée et, même maintenant, il prend en charge plus de fonctionnalités que les autres outils que j’ai pu essayer. Pour référence, mon projet est https://github.com/jwmcglynn/donner, et le prototype d’« éditeur » web (pour l’instant limité à l’édition basée sur le code) se trouve sur https://jwmcglynn.github.io/donner-editor/.
Le SVG a beaucoup de potentiel, mais c’est un domaine qui a souffert du manque de bons outils ; c’est donc agréable de voir de nouvelles tentatives dans cet espace.
Bon début. Il y a des fonctionnalités évidentes qui me semblent manquer.
L’outil de nœuds devrait essayer de snapper les nœuds de début/fin entre eux lors de l’édition, et on pourrait prévoir une distance de snap plus grande lors de la création initiale, surtout avec l’outil crayon.
Plutôt qu’un outil de nœuds pour l’édition, une approche de déformation par traction/poussée à la Wick Editor, Flash/Futurewave SmartSketch, serait sans doute bien plus adaptée au mobile.
Si l’arrondi des coins ne fonctionne pas sur les polygones, il faudrait le masquer ou le désactiver.
J’aurais aimé que Karbon de KDE ressemble à ça. C’est un éditeur SVG accessible, mais rapide et capable.
Si possible, ce serait bien d’y voir aussi les fonctions présentes dans SVG Path Editor[0]. Par exemple, convertir des coordonnées absolues en coordonnées relatives, ou éditer séparément les lignes et courbes de chaque chemin — des fonctions que je n’ai pas trouvées dans d’autres éditeurs.
Une autre fonctionnalité qui serait formidable, mais qui représenterait une énorme charge de travail ou pourrait devenir un projet à part entière, serait l’animation.
Il existe plusieurs projets appelés « SVG Path Editor », mais celui-ci est le plus avancé et utilisable que j’aie vu.
Ça a l’air bien. Ce n’est pas pour critiquer, mais j’ai toujours pensé que, dans un éditeur, le SVG lui-même est au mauvais niveau d’abstraction. Ce qu’on veut, ce n’est pas un éditeur SVG, mais un programme de dessin vectoriel.
Bien sûr, il doit rendre un SVG optimisé, mais construire l’UI/UX autour de concepts SVG comme les chemins et les chemins de découpe n’est pas convivial pour l’utilisateur final. C’est aussi ce qui m’a toujours agacé dans Inkscape.
La vraie fonctionnalité puissante, selon moi, serait d’intégrer dans un éditeur vectoriel des modificateurs à la Blender (réseau, miroir, etc.) pour permettre une édition non destructive.
La première exception concerne les chemins de découpe : dans Hyvector, ils sont traités comme des chemins ayant un contour et un remplissage, ainsi qu’un contenu rogné en dehors de ce chemin. La gestion des chemins de découpe en SVG est assez pénible et peu intuitive.
Si je peux continuer le développement, des fonctionnalités comme l’arrondi des coins des chemins, les opérations booléennes non destructives, la largeur de trait variable, les remplissages multiples et les déformations suivront.
En revanche, je veux conserver SVG comme format d’export. Il est vraiment excellent pour le web et peut être stylé avec CSS. Les effets doivent donc pouvoir être exportés en vrai SVG, et je veux éviter l’approche de certains éditeurs qui insèrent de faux bitmaps dans le SVG lors de l’export. Par exemple, il n’y aura pas de dégradé conique tant que SVG ne le prendra pas en charge un jour.
J’ai essayé de modifier cette icône pour centrer la flèche dans le cercle, mais comme le masque n’était pas correctement reconnu, je ne voyais qu’un cercle noir.
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">
Pour cette icône, un chemin de découpe serait peut-être plus approprié qu’un masque. Si vous voulez créer une icône de même forme, vous pouvez prendre les éléments à l’intérieur du masque, les coller dans Hyvector, puis travailler dessus.
Très bien. J’aime les éditeurs web.
J’apprécie que, dans les SVG importés, tous les objets et groupes soient clairement visibles avec un aperçu correct.
Il y a deux fonctions qui manquent, ou que je n’ai pas trouvées. Je me demande s’il existe un moyen de convertir un trait en forme, et s’il est possible d’éditer directement le code SVG à la main en temps réel. Ce sont peut-être des fonctions trop de niche pour l’utilisateur moyen, mais certaines opérations comme les remplissages sont beaucoup plus faciles à modifier dans le code qu’avec des outils visuels.
Je me demande aussi s’il est envisageable de le publier en open source.
J’aime vraiment l’UX. C’est aussi très utilisable sur une tablette Android compatible Wacom.
Je ne sais pas si la manière d’éditer les splines — pouvoir faire glisser n’importe quel point de la ligne au lieu d’ajuster des poignées individuelles — est une invention maison ou vient d’ailleurs, mais je l’aime beaucoup.
Le seul problème que j’ai remarqué est que le défilement tactile ne fonctionne pas dans l’arborescence de gauche ; à part ça, c’est très fluide. Je me demande si des raccourcis clavier ont aussi été implémentés.
Maintenir Shift pendant le glissement pour conserver la direction des poignées fonctionne aussi.
L’arborescence de gauche est difficile à faire fonctionner correctement sur tous les appareils. Elle doit prendre en charge le clic, le clic au toucher, le glisser-déposer, le défilement par balayage, le défilement tactile, etc., tout en se comportant comme si elle contenait des centaines d’éléments. Il reste des soucis comme le défilement par balayage sur iOS et quelques saccades, mais c’est dans la liste.
Les raccourcis clavier sont implémentés sur les appareils non mobiles. Si vous ouvrez un menu dans la barre de menus, le raccourci apparaît à droite de l’élément de menu.
Je n’ai pas réussi à comprendre comment l’utiliser. J’ai créé un segment, mais je n’ai pas trouvé comment le déplacer ou le redimensionner, même si des poignées de glissement sont apparues.
Je ne sais pas non plus comment créer d’autres formes comme des rectangles ou des cercles. J’ai appuyé sur presque tous les boutons visibles, dans divers ordres, une vingtaine de fois, mais la plupart du temps rien ne se passait.
Super. J’espère que ce projet réussira.
Quelques retours côté première impression : au démarrage, pourquoi ne pas ouvrir directement un document vide sans titre avec lequel jouer, et sélectionner comme outil initial quelque chose d’amusant, comme un crayon Bézier ?
J’étais assez motivé pour cliquer un peu partout, comprendre qu’aucun document n’était ouvert, créer un nouveau document puis changer d’outil pour commencer à jouer, mais beaucoup d’utilisateurs ne le feront pas. Le fait qu’aucun document ne soit ouvert semble être le principal obstacle.
C’est un détail qui peut sembler mineur, mais ce serait bien que le canevas par défaut soit un peu plus grand, par exemple un carré de 512 ou 500. Quand les gens découvrent un nouvel outil, ils n’accordent en réalité que les 10 à 20 premières secondes ; si on ne les accroche pas dans ce laps de temps, ils partent simplement, et on perd beaucoup d’utilisateurs.
Ça a l’air très bien, merci de l’avoir partagé.
Même après avoir créé un nouveau document et essayé le crayon, rien ne s’est passé. Au final, je n’ai pas réussi à comprendre comment l’utiliser.
Avec l’outil Bézier, j’ai pu ajouter quelques nœuds, mais je n’ai pas réussi à les manipuler avec aucun outil. Peut-être que le glisser-déposer est complètement cassé dans Chrome/Windows ?
C’est bien, et on voit beaucoup de potentiel. Petit retour : placer une barre d’outils flottante en haut est distrayant et empiète sur la zone de dessin réelle.
Il vaudrait mieux en faire une barre d’outils classique ou la placer en bas du canevas. Ou bien la rendre déplaçable ou repliable.