Hyvector – éditeur SVG rapide et moderne

• Hyvector est un éditeur web permettant de modifier efficacement des images SVG (Scalable Vector Graphics) de façon rapide et moderne
• Il nécessite la prise en charge de JavaScript et doit être activé pour fonctionner correctement
• Il est accessible immédiatement dans le navigateur sans installation complexe ni configuration préalable
• Il combine de hautes performances et un design moderne pour offrir une expérience utilisateur intuitive
• Il ne s’agit pas d’un éditeur SVG au niveau du texte ou du code, mais d’un environnement pratique reposant sur une interface visuelle

Principaux avantages et importance

• Par rapport aux éditeurs SVG open source et commerciaux, il offre une meilleure réactivité et une interface moderne
• Son fonctionnement web le rend accessible partout, quel que soit le système d’exploitation
• Il fournit un environnement de travail efficace sur les images vectorielles pour les designers comme pour les développeurs
• Il peut être utilisé immédiatement, sans avoir à installer de plugin ni de programme supplémentaire
• Ses outils d’édition intuitifs facilitent la création et la modification de ressources SVG

[GN⁺]

Avis Hacker News

• Je développe en side project une bibliothèque de rendu SVG en C++, et je n’avais jamais vraiment trouvé de bon éditeur SVG, donc j’utilisais surtout Illustrator puis je nettoyais le balisage obtenu, ou bien un éditeur textuel comme svgviewer.dev. Ton UX est très soignée, et c’est impressionnant de voir qu’il prend déjà en charge plus de fonctionnalités que les autres outils que j’avais trouvés jusque-là. Mon projet donner propose lui aussi un prototype d’éditeur de code web. Le SVG a un gros potentiel, mais il était freiné par les limites des outils, donc je suis ravi de voir de l’innovation arriver.
  • Je suis curieux de savoir ce qui ne va pas avec Inkscape ; il y a bien quelques bugs, mais dans l’ensemble j’ai l’impression qu’il fonctionne plutôt bien.
• Le début semble prometteur. Il manque quelques fonctionnalités assez évidentes : lors de l’édition avec l’outil nœud, ce serait bien que les nœuds de début et de fin puissent facilement s’aimanter l’un à l’autre, et surtout que la distance d’aimantation soit plus large avec l’outil crayon. Je pense aussi qu’un outil de transformation et de distorsion dans le style de Wick Editor serait adapté au mobile. Et si l’arrondi des coins n’est pas pris en charge pour les polygones, il vaudrait mieux masquer ou désactiver cette fonction.
  • C’est exactement le genre de retour que je voulais, merci.
• J’ai vraiment apprécié le niveau de contrôle offert, par exemple le fait de pouvoir agir sur des changements invisibles visuellement comme l’inversion de chemin. En revanche, il serait bien d’avoir un retour visuel, car il est difficile de savoir si l’inversion a bien été appliquée. Quand on copie une sélection, toutes les polices utilisées semblent être intégrées en base64 dans le SVG, ce qui gonfle fortement le fichier. Je me demande aussi si tu comptes rester strictement sur une correspondance 1:1 avec le SVG ou si tu envisages un certain niveau d’abstraction. De mon côté, je continue d’utiliser Figma à cause de sa fonctionnalité Vector Networks ; même s’il faudrait sans doute une conversion interne vers des données de chemin valides, ce serait extrêmement utile. J’ai aussi été surpris techniquement par le choix du rendu SVG ; je m’attendais à quelque chose de basé sur canvas. J’ai récemment essayé de rendre des objets 3D en SVG et j’ai très vite rencontré des problèmes de performances, sans encore en avoir trouvé la cause. Tu as déjà fait des tests de charge sur des appareils anciens ?
  • Pendant un moment, je ne me suis pas rendu compte que les Vector Networks — que j’appelle path graph — correspondaient en fait à une structure intermédiaire que j’avais déjà pour les opérations booléennes sur les chemins. Jusqu’à récemment, j’étais plutôt sceptique vis-à-vis des Vector Networks, mais avec la multiplication des images générées par IA, je me dis que ce serait génial comme résultat de vectorisation bitmap. C’est une fonctionnalité que j’aimerais ajouter, mais j’ai une montagne de priorités plus urgentes avant cela. Je vais aussi continuer les stress tests, et j’ai même essayé sur une vieille tablette Android très lente à 100 euros. Le post sur Hacker News a été publié sur un coup de tête, j’aurais dû tester davantage avant. Avant, j’utilisais une vieille machine ThinkPad pour sentir immédiatement les problèmes de performances, mais les IDE sont devenus trop lourds, donc ce n’est plus possible. Cela dit, je garde toujours de vieux appareils pour vérifier que tout tourne correctement. Je vais passer en revue toutes les suggestions des commentaires et créer des issues ; je suis étonné par la quantité de retours utiles, je m’attendais à 5 upvotes et peut-être 2 commentaires. Si j’ai opté pour le rendu SVG, c’est parce que je voulais que le rendu soit exactement identique au fichier SVG enregistré. J’ai aussi envisagé Canvas ou WebGL pour l’overlay, mais pour l’instant c’est suffisamment rapide sur la plupart des images.
• Je me dis que ce serait formidable si Karbon de KDE était devenu un outil d’édition SVG aussi intuitif et rapide. J’ai particulièrement besoin de fonctionnalités comme celles proposées par SVG Path Editor — par exemple convertir les coordonnées d’un chemin en valeurs relatives, ou éditer séparément les courbes et les lignes droites dans un path — mais je ne retrouve cela dans aucun autre éditeur. Et même si c’est un énorme chantier, l’ajout de fonctions d’animation serait aussi excellent.
  • Il existe beaucoup de projets appelés SVG Path Editor, mais celui de yqnn.github.io mentionné ici est de loin l’outil le plus avancé et le plus utilisable que j’aie testé jusqu’à présent.
• J’espère vraiment que ce projet va réussir. J’ai une suggestion pour la première expérience utilisateur : au démarrage, ce serait bien de fournir directement un document vide déjà créé, pour qu’on puisse s’exercer immédiatement, et par exemple qu’un outil amusant comme le Bezier pencil soit sélectionné automatiquement. J’ai cliqué plusieurs fois avant de comprendre qu’il n’y avait aucun document, puis j’en ai créé un nouveau et changé d’outil pour essayer ; mais la plupart des gens vont se bloquer là très vite. J’aimerais aussi que la taille par défaut du canvas soit un peu plus grande, par exemple un carré de 512 ou 500. En pratique, quand on essaie quelque chose de nouveau, si ce n’est pas amusant dans les 10 à 20 premières secondes, on s’en va tout de suite ; il faut accrocher l’utilisateur dès ce moment-là. C’est très bien réalisé.
  • D’accord avec ça. J’ai immédiatement cliqué sur l’outil crayon pour gribouiller un peu, mais rien ne s’est passé, ce qui m’a déçu. Même après avoir créé un nouveau document, le crayon ne fonctionnait toujours pas. Je n’ai finalement jamais compris comment l’utiliser. J’ai pu ajouter des nœuds avec l’outil Bezier, mais je n’ai pas réussi à les manipuler avec d’autres outils. On dirait que le glisser-déposer ne fonctionne pas du tout dans Chrome sous Windows.
• Je n’ai pas réussi à comprendre comment l’utiliser. J’ai bien réussi à créer un segment, mais je n’ai pas trouvé comment le déplacer ou le redimensionner, même si j’arrivais à faire apparaître les poignées de glissement. Et je n’ai absolument pas trouvé comment créer d’autres formes comme des rectangles ou des cercles ; j’ai appuyé sur les boutons presque 20 fois chacun, sans qu’il ne se passe quoi que ce soit.
  • Dans la barre d’outils principale, entre l’outil texte et l’outil image, c’est justement l’outil de forme ; les deux premières options sont le rectangle et le cercle.
  • Je pense que ce genre d’application devrait fournir énormément d’indices sur la manière de l’utiliser, avec la possibilité de les désactiver.
• J’ai pris beaucoup de plaisir à tester cet outil ; il est extrêmement rapide et intuitif, et les performances en zoom/panoramique sont notamment très supérieures à celles des outils plus anciens. Une question cependant : as-tu prévu d’ajouter une couche de plugin ou d’API adaptée aux workflows génératifs ? De plus en plus d’utilisateurs mélangent scripting et effets visuels basés sur l’IA dans l’édition SVG, donc si Hyvector disposait d’une couche programmable comme un mini-langage ou un pont JS, il deviendrait bien plus puissant. Félicitations pour le lancement ; c’est toujours réjouissant de voir de nouveaux outils qui abaissent la barrière d’entrée du travail vectoriel créatif.
  • Merci. J’ai récemment commencé à utiliser un peu l’IA dans d’autres projets de mon activité principale, et je suis d’accord sur l’importance de permettre l’intégration de génération par IA. Si tu peux expliquer plus en détail comment tu aimerais combiner IA et éditeur vectoriel, ça m’intéresse. J’avais pensé à la vectorisation et à la colorisation de bitmaps générés par IA, mais à part ça je n’y ai pas encore beaucoup réfléchi.
• J’aime vraiment beaucoup cette UX. Sur une tablette Android compatible Wacom, c’était très agréable à utiliser. Je ne sais pas d’où vient l’idée de cette manière d’éditer les splines — c’est-à-dire ajuster par glisser n’importe quel point de la ligne plutôt que des poignées individuelles — mais c’est clairement une bonne idée. Mon seul regret, c’est que le défilement tactile ne fonctionne pas dans l’arborescence de gauche. À part ça, tout est très fluide. Les raccourcis clavier sont-ils déjà implémentés ?
  • L’implémentation du glissement des courbes est étonnamment simple ; j’ai trouvé l’idée sur une ancienne discussion d’un forum Google. Si on maintient Shift pendant le glisser, l’orientation des poignées est aussi conservée. L’arborescence de gauche est difficile à gérer parfaitement sur tous les appareils, car elle doit prendre en charge les clics, les tap tactiles, le glisser-déposer, le défilement par balayage, le défilement tactile, tout en affichant correctement des centaines d’éléments, donc c’est complexe. Il reste encore quelques problèmes comme le défilement par balayage sur iOS ou de légères saccades, mais c’est déjà noté dans la liste. Les raccourcis clavier sont disponibles sur desktop uniquement ; si tu ouvres la barre de menus, ils sont affichés à droite des éléments.
• Après l’avoir essayé moi-même, j’ai trouvé les débuts très prometteurs. J’apprécie particulièrement l’UX : l’outil plume est intuitif, chaque calque a un aperçu dans le panneau des objets, les masques d’écrêtage sont bien intégrés, et des fonctions rares comme la conversion texte-vers-contours ou les opérations booléennes sont présentes. En retour critique : il faudrait des raccourcis pour changer d’outil, idéalement affichés aussi dans les info-bulles ; le zoom avec Ctrl +/- et le panoramique avec Espace + glisser seraient bienvenus ; lors de l’édition d’un groupe, il est difficile de sélectionner les objets individuels à l’intérieur, et le double-clic bascule directement vers l’outil nœud, alors qu’un mode d’isolation de groupe serait souhaitable ; pendant l’utilisation de l’outil plume, il faudrait pouvoir ajuster les points de contrôle du point précédent ; en mode plume, annuler ne revient pas sur l’ajout du dernier point du chemin mais seulement sur l’action antérieure, ce qui est gênant ; la prise en charge du texte est limitée, les polices intégrées comme @font-face ne s’affichent pas, et le support des filtres pose le même problème ; on dirait que le rendu SVG est fait de façon isolée et que le navigateur ne l’affiche donc pas correctement.
  • Merci pour ces bons retours. Je sens que je vais avoir énormément d’issues à rédiger dans les prochains jours. Honnêtement, quand j’ai posté sur Hacker News, j’espérais juste 5 upvotes et 2 commentaires, donc la réaction est énorme. On peut sélectionner les objets individuels à l’intérieur d’un groupe avec Ctrl + clic. La logique de sélection n’est pas encore très propre et je compte l’améliorer, mais cette méthode peut déjà aider en attendant.
• J’aime le potentiel que cela laisse entrevoir. En retour rapide : le fait que la barre d’outils apparaisse en haut du canvas casse un peu la concentration et réduit l’espace de travail. Une disposition plus classique, ou bien en bas du canvas, serait préférable. Sinon, ce serait bien de pouvoir déplacer ou replier la barre d’outils.
  • Merci. J’ai déjà changé plusieurs fois le design et la position de la barre d’outils. Il existe déjà une fonction de repli automatique quand la fenêtre devient étroite, et ajouter un bouton pour la replier serait très simple à implémenter.