Hyvector – schneller und moderner SVG-Editor

• Hyvector ist ein webbasierter Editor, mit dem sich SVG-Bilder (Scalable Vector Graphics) schnell und effizient bearbeiten lassen
• Er benötigt Unterstützung für JavaScript und funktioniert nur korrekt, wenn diese aktiviert ist
• Ohne komplizierte Installation oder Konfiguration ist er sofort im Browser zugänglich
• Er kombiniert starke Leistung mit modernem Design und bietet eine intuitive Benutzererfahrung
• Statt SVGs auf Text- oder Code-Ebene zu bearbeiten, bietet er eine komfortable Bearbeitungsumgebung über eine visuelle Benutzeroberfläche

Wichtige Vorteile und Bedeutung

• Im Vergleich zu Open-Source- und kommerziellen SVG-Editoren bietet er schnelle Reaktionszeiten und eine moderne UI
• Durch den webbasierten Ansatz ist er unabhängig vom Betriebssystem und überall zugänglich
• Er bietet sowohl Designerinnen und Designern als auch Entwicklerinnen und Entwicklern eine effektive Arbeitsumgebung für Vektorgrafiken
• Er lässt sich sofort nutzen, ohne zusätzliche Plugins oder Programme installieren zu müssen
• Mit intuitiven Bearbeitungswerkzeugen können SVG-Ressourcen einfach erstellt und geändert werden

[GN⁺]

Hacker-News-Kommentare

• Ich entwickle als Side-Project eine C++-SVG-Rendering-Bibliothek und habe nie wirklich einen guten SVG-Editor gefunden. Deshalb nutze ich meistens Illustrator und bereinige anschließend das resultierende Markup oder verwende den textbasierten Editor svgviewer.dev. Deine UX ist sehr ausgereift, und es hat mich beeindruckt, dass es bereits mehr Funktionen unterstützt als andere Tools, die ich bisher gefunden habe. Mein Projekt donner bietet ebenfalls einen webbasierten Code-Editor-Prototypen. SVG ist ein Bereich mit großem Potenzial, der bislang durch die Grenzen der Tools ausgebremst wurde, daher freue ich mich sehr über Innovationen in diesem Bereich.
  • Ich frage mich, was genau das Problem mit Inkscape ist. Es gibt zwar ein paar Bugs, aber insgesamt wirkt es auf mich so, als würde es ziemlich gut funktionieren.
• Sieht nach einem guten Start aus. Es fehlen ein paar klar erkennbare Funktionen: Beim Bearbeiten mit dem Node-Tool wäre es gut, wenn Start- und Endknoten leicht aneinander snappen würden, besonders beim Zeichnen mit dem Pencil-Tool sollte die Snap-Distanz größer sein. Ein Transform-/Distort-Tool im Stil von Wick Editor wäre vermutlich mobilfreundlich. Wenn Polygon-Ecken nicht abgerundet werden können, wäre es besser, die Funktion zu verstecken oder zu deaktivieren.
  • Genau solches Feedback wollte ich wirklich haben, danke.
• Mir hat sehr gefallen, dass es Kontrolle auf hohem Niveau erlaubt, zum Beispiel auch bei Änderungen wie dem Umkehren von Pfaden, die visuell nicht direkt auffallen. Allerdings wäre Feedback hilfreich, damit man erkennt, ob das Umkehren tatsächlich ausgeführt wurde. Wenn man eine Auswahl kopiert, werden alle verwendeten Schriftarten als base64 in das SVG eingebettet, wodurch die Datei stark anwächst. Ich frage mich, ob du weiterhin strikt an einer 1:1-Abbildung auf SVG festhalten willst oder ob du auch Abstraktionen in Betracht ziehst. Ich bleibe bei Figma vor allem wegen der Funktion Vector Networks. Auch wenn intern eine Umwandlung in gültige Pfaddaten nötig wäre, wäre das sehr nützlich. Technisch hat es mich überrascht, dass du auf SVG-Rendering setzt; ich hatte mit Canvas gerechnet. Ich habe kürzlich versucht, 3D-Objekte mit SVG zu rendern, und bin schnell auf Performance-Probleme gestoßen, deren Ursache ich noch nicht gefunden habe. Mich würde interessieren, ob du schon einmal Stresstests auf älteren Geräten gemacht hast.
  • Mir war eine ganze Weile nicht klar, dass Vector Networks, die ich path graph nenne, tatsächlich eine Zwischenstruktur waren, die ich für Boolean-Path-Operationen bereits hatte. Bis vor Kurzem war ich gegenüber Vector Networks skeptisch, aber durch die vielen KI-generierten Bilder denke ich inzwischen, dass sie als Ergebnis der Bitmap-Vektorisierung ziemlich cool wären. Es ist eine Funktion, die ich gerne einbauen würde, aber es gibt erst einmal einen Berg dringenderer Prioritäten. Ich werde auch weiterhin Stresstests machen und habe es sogar auf einem uralten, extrem langsamen 100-Euro-Android-Tablet ausprobiert. Der Post auf Hacker News war spontan, ich hätte eigentlich noch mehr testen sollen. Früher habe ich dafür alte ThinkPad-Maschinen benutzt, um Performance-Probleme sofort zu spüren, aber die IDEs sind mit der Zeit so schwer geworden, dass das nicht mehr praktikabel ist. Trotzdem will ich alte Geräte weiter behalten und prüfen, ob es dort gut läuft. Ich werde alle Vorschläge aus den Kommentaren durchgehen und Issues daraus machen. Ich bin überrascht, wie viel nützliches Feedback hereingekommen ist; ich hatte nur mit 5 Upvotes und vielleicht 2 Kommentaren gerechnet. Der Grund für SVG-Rendering war, dass ich wollte, dass die gespeicherte SVG-Datei und das Rendering exakt gleich aussehen. Für Overlays habe ich auch Canvas oder WebGL in Betracht gezogen, aber aktuell ist es bei den meisten Bildern bereits schnell genug.
• Ich wünschte, Karbon von KDE wäre zu so einem intuitiven und schnellen SVG-Editor geworden. Besonders die Funktionen des SVG Path Editor wären wirklich nötig, etwa Pfadkoordinaten in relative Werte umzuwandeln oder Kurven und Geraden innerhalb eines Pfads getrennt zu bearbeiten. So etwas habe ich bisher jedoch in keinem anderen Editor gefunden. Und auch wenn es eine riesige Aufgabe wäre, wären Animationsfunktionen ebenfalls großartig.
  • Es gibt viele Projekte mit dem Namen SVG Path Editor, aber das hier erwähnte Projekt auf yqnn.github.io ist das fortschrittlichste und brauchbarste Tool, das ich bisher verwendet habe.
• Ich hoffe wirklich, dass dieses Projekt erfolgreich wird. Ich habe einen Vorschlag zur First-User-Experience: Direkt zum Start sollte es bereits ein erstelltes „leeres, unbenanntes Dokument“ geben, damit man sofort herumprobieren kann, und zum Beispiel könnte ein unterhaltsames Tool wie der Bezier Pencil automatisch ausgewählt sein. Ich habe mehrfach geklickt, bevor ich gemerkt habe, dass gar kein Dokument existiert, dann ein neues erstellt und das Tool gewechselt, um es auszuprobieren, aber die meisten Nutzer werden hier wahrscheinlich schnell hängen bleiben. Außerdem wäre es gut, wenn die Standardgröße der Canvas etwas größer wäre, etwa ein Quadrat mit 512 oder 500. Wenn etwas Neues nicht innerhalb von 10 bis 20 Sekunden Spaß macht, springen die Leute in der Realität oft sofort ab. Man muss sie innerhalb dieses Zeitfensters abholen. Sehr gut gemacht.
  • Stimme zu. Ich habe sofort auf den Pencil geklickt, um etwas zu kritzeln, und war enttäuscht, dass nichts passierte. Selbst nach dem Erstellen eines neuen Dokuments funktionierte der Pencil immer noch nicht. Am Ende habe ich nie herausgefunden, wie man es benutzt. Mit dem Bezier-Tool konnte ich Knoten hinzufügen, aber ich konnte sie mit anderen Tools nicht bearbeiten. Auf Chrome/Windows scheint die Drag-Funktion überhaupt nicht richtig zu funktionieren.
• Ich habe nicht wirklich verstanden, wie man es benutzt. Ich konnte zwar eine Linie erstellen, aber ich habe nicht herausgefunden, wie man sie verschiebt oder skaliert, obwohl ich Drag-Handles einblenden konnte. Ich habe auch überhaupt keinen Weg gefunden, andere Formen wie Rechtecke oder Kreise zu erstellen. Ich habe die Buttons fast 20-mal gedrückt, aber nichts ist passiert.
  • In der Haupt-Toolbar ist das Tool zwischen dem Text-Tool und dem Bild-Tool das Shape-Tool. Die ersten beiden Optionen sind Rechteck und Kreis.
  • Ich denke, bei solchen Apps ist es gut, wenn sehr viele Hinweise zur Benutzung eingeblendet werden und man sie abschalten kann.
• Es hat wirklich Spaß gemacht, dieses Tool zu testen, weil es sehr schnell und intuitiv ist. Besonders die Zoom-/Pan-Performance war den älteren Tools klar überlegen. Eine Sache, die mich interessiert: Gibt es Pläne, ein Plugin- oder API-Layer für generative Workflows hinzuzufügen? Immer mehr Nutzer kombinieren beim SVG-Editing Scripting oder KI-basierte visuelle Effekte, daher wäre Hyvector mit einer programmierbaren Ebene wie einer Mini-Sprache oder einer JS-Bridge deutlich mächtiger. Glückwunsch zum Launch – es ist immer schön, wenn neue Tools die Hürde für kreative Vektorarbeit senken.
  • Danke, ich habe in letzter Zeit in anderen Projekten meines Hauptjobs angefangen, ein wenig mit KI zu arbeiten, und stimme zu, dass es wichtig ist, Integrationen für KI-generierte Inhalte zu ermöglichen. Es wäre interessant, genauer zu hören, wie du KI mit einem Vektor-Editor kombinieren möchtest. Ich habe an Vektorisierung und Kolorierung von KI-generierten Bitmaps gedacht, aber darüber hinaus bisher noch nicht viel.
• Ich mag diese UX wirklich sehr. Auf einem Android-Tablet mit Wacom-Unterstützung ließ es sich sehr gut benutzen. Ich weiß nicht, woher die Idee für diese Art der Spline-Bearbeitung kam – also dass man nicht einzelne Handles zieht, sondern beliebige Punkte auf der Linie per Drag anpasst –, aber sie ist definitiv gut. Ein kleiner Nachteil ist, dass Touch-Scrolling im linken Baum nicht funktioniert. Ansonsten läuft alles sehr flüssig. Mich würde interessieren, ob Keyboard-Shortcuts schon implementiert sind.
  • Die Implementierung des Kurven-Draggings war überraschend einfach. Die Idee dazu hatte ich aus einer alten Diskussion in einem Google-Forum. Wenn man Shift gedrückt hält und zieht, bleibt auch die Richtung der Handles erhalten. Der linke Baum ist schwer auf allen Geräten perfekt umzusetzen, weil er Klick, Touch-Klick, Drag-and-Drop, Swipe-Scrolling, Touch-Scrolling usw. unterstützen und zugleich Hunderte Elemente gut darstellen muss, also ist das ziemlich komplex. Auf iOS gibt es noch Swipe-Scrolling und etwas Ruckeln, das steht bereits auf der Liste. Keyboard-Shortcuts werden auf dem Desktop, aber nicht auf Mobilgeräten unterstützt; wenn man dort die Menüleiste öffnet, werden sie rechts neben den Einträgen angezeigt.
• Nachdem ich es selbst ausprobiert habe, hatte ich den Eindruck, dass der Start wirklich sehr stark ist. Vor allem die UX gefällt mir: Das Pen-Tool ist intuitiv, im Objekt-Panel gibt es Layer-Vorschauen, Clipping Paths sind gut integriert, und seltene Funktionen wie Text-zu-Konturen sowie Boolean-Operationen sind vorhanden. Als kritisches Feedback: Es sollte Shortcuts zum Wechseln zwischen Tools geben, und sie sollten in den Tooltips angezeigt werden. Zoom per Ctrl +/- und Panning per Leertaste + Drag wären wünschenswert. Beim Bearbeiten von Gruppen ist es schwer, einzelne Objekte innerhalb der Gruppe auszuwählen, und ein Doppelklick wechselt direkt ins Node-Tool, aber ein Gruppen-Isolationsmodus wäre hilfreich. Während der Nutzung des Pen-Tools sollte man die Kontrollpunkte des vorherigen Punkts anpassen können, und im Pen-Modus macht Undo nicht das Hinzufügen des letzten Pfadpunkts rückgängig, sondern nur die Aktion davor, was unpraktisch ist. Die Textunterstützung ist begrenzt, eingebettete Schriftarten wie @font-face werden nicht angezeigt, und bei Filtern ist es ähnlich. Es wirkt so, als würde das SVG-Rendering unabhängig erfolgen, sodass es im Browser nicht korrekt gezeichnet wird.
  • Danke für das gute Feedback. In den nächsten Tagen werde ich wohl sehr viele Issues schreiben. Ehrlich gesagt hatte ich beim Posten auf Hacker News nur auf 5 Upvotes und 2 Kommentare gehofft, aber die Resonanz ist enorm. Einzelne Objekte innerhalb einer Gruppe kann man mit Ctrl + Klick auswählen. Die Auswahllogik ist noch nicht ganz sauber und wird weiter verbessert, aber fürs Erste sollte das helfen.
• Ich sehe viel Potenzial. Durch das schnelle Feedback wirkt die Toolbar-Struktur, bei der sie oben auf der Canvas erscheint, etwas ablenkend und nimmt Arbeitsfläche weg. Eine klassische Toolbar-Position oder eine Platzierung am unteren Canvas-Rand wäre besser. Oder die Toolbar sollte verschiebbar beziehungsweise einklappbar sein.
  • Danke, Design und Position der Toolbar habe ich bereits mehrfach geändert. Es gibt schon eine Funktion, bei der sie automatisch einklappt, wenn das Fenster schmaler wird; einen Button zum Einklappen hinzuzufügen, wäre sehr einfach.