Hyvector – ein schneller, moderner SVG-Editor
(hyvector.com)- Bei der Arbeit mit Vektorgrafiken bietet Hyvector einen Workflow, um SVGs im Browser innerhalb von Sekunden zu bearbeiten und zu exportieren, ohne eine schwergewichtige Desktop-App öffnen zu müssen
- Schnelle Aufgaben wie das Anpassen von Icons, Logo-Entwürfe oder das Bereinigen von SVG-Pfaden lassen sich ohne Kontoerstellung oder Download großer Apps direkt erledigen
- Die gesamte Verarbeitung bleibt lokal und folgt einem Privacy-first-Ansatz; Ziel sind ein schneller Start und geringer Speicherverbrauch
- Unterstützt formatübergreifendes Shaping für bidirektionalen Text, komplexe Schriftsysteme und verbundene Schriftzeichen wie Arabic
- Ein Solo-Entwickler hat über 5 Jahre die zentrale Grundlage aufgebaut; auf der stabilisierten Core-Engine werden nun Funktionen wie globale Farben, dynamische Strichstärken und variable Fonts ergänzt
SVG-Bearbeitung ohne Installation
- Hyvector ist ein SVG- und Vektorgrafik-Editor, der direkt im Browser läuft
- Der Fokus liegt auf einem Workflow, bei dem Dateien schnell geöffnet, bearbeitet und Grafiken anschließend exportiert werden
- Nutzbar ohne Kontoerstellung oder Download großer Apps
- Aufgaben, die sich besonders schnell erledigen lassen, sind unter anderem:
- Icons anpassen
- Logo-Entwürfe erstellen
- SVG-Pfade bereinigen
Leichte Laufzeitumgebung und Privatsphäre
- Läuft überall ohne Installation
- Zielt auf schnellen Start und geringen Speicherverbrauch ab
- Verwendet einen Privacy-first-Ansatz, bei dem die gesamte Verarbeitung lokal bleibt
Bearbeitungsfunktionen und Entwicklungsstand
-
Typografie-Unterstützung
- Unterstützt vollständigen bidirektionalen Text
- Kann komplexe Schriftsysteme verarbeiten
- Unterstützt formatübergreifendes Shaping für verbundene Schriftzeichen wie Arabic
-
Werkzeuge zur Vektorbearbeitung
- Bietet eine Elementbaum-Ansicht per Drag-and-drop
- Ermöglicht präzise Kontrolle über Pfade auf Basis vollständiger Transformationen, einschließlich Neigen, Drehen und Skalieren
- Bietet einen Paintbrush mit leistungsfähigem Radiermodus
-
Ein-Personen-Entwicklungsprojekt
- Begann ursprünglich als schnelles Nebenprojekt, lief wegen der Komplexität von Vektorgrafiken jedoch über 5 Jahre
- Die zentrale Grundlage ist abgeschlossen, und die Core-Engine ist stabilisiert
- Als nächste Funktionen sind unter anderem globale Farben (global colors), dynamische Strichstärken (dynamic stroke widths) und variable Fonts (variable fonts) in Vorbereitung
1 Kommentare
Hacker-News-Kommentare
Cool. Mein Nebenprojekt ist eine C++-SVG-Rendering-Bibliothek, und es war schwer, einen guten SVG-Editor zu finden.
Meist arbeitet man erst in Illustrator und räumt dann das erzeugte Markup auf, oder man landet wieder bei einem textbasierten Editor wie https://www.svgviewer.dev/.
Die UX ist ziemlich ausgereift, und schon jetzt unterstützt er mehr Funktionen als andere Tools, die ich mir angesehen habe. Mein Projekt ist übrigens https://github.com/jwmcglynn/donner, und der Prototyp eines webbasierten „Editors“ (derzeit nur codebasierte Bearbeitung) liegt unter https://jwmcglynn.github.io/donner-editor/.
SVG hat großes Potenzial, wurde aber durch schwache Tools ausgebremst, daher freue ich mich über neue Ansätze in diesem Bereich.
Ein guter Anfang. Es gibt einige offensichtliche Funktionen, die mir fehlen.
Das Node-Tool sollte beim Bearbeiten versuchen, Anfangs-/End-Nodes aneinander zu snappen, und beim ersten Erstellen könnte die Snap-Distanz größer sein, besonders beim Pencil-Tool.
Statt eines Node-Tools zum Bearbeiten wäre ein Ansatz wie die Ziehen-/Drücken-Verformung im Stil von Flash/Futurewave SmartSketch aus Wick Editor auf Mobilgeräten wohl deutlich angenehmer.
Wenn das Abrunden von Ecken bei Polygonen nicht funktioniert, sollte es ausgeblendet oder deaktiviert werden.
Ich hätte mir gewünscht, KDEs Karbon würde so aussehen. Ein zugänglicher, aber schneller und leistungsfähiger SVG-Editor.
Wenn möglich, wäre es schön, wenn auch Funktionen aus dem SVG Path Editor0 dazukämen. Zum Beispiel absolute Koordinaten in relative umzuwandeln oder die Linien und Kurven jedes Pfads einzeln zu bearbeiten – Dinge, die ich in anderen Editoren nicht gefunden habe.
Eine weitere Funktion, die großartig wäre, aber enorm viel Arbeit oder sogar ein eigenes Projekt sein könnte, ist Animation.
Sieht gut aus. Das ist nicht als Kritik gemeint, aber ich dachte immer, dass SVG selbst in einem Editor die falsche Abstraktionsebene ist. Was man möchte, ist kein SVG-Editor, sondern ein Vektorzeichenprogramm.
Natürlich sollte es in optimiertes SVG rendern, aber wenn man UI/UX um SVG-Konzepte wie Pfade und Clip-Pfade herum baut, ist das für Endnutzer nicht freundlich. Das hat mich auch an Inkscape immer gestört.
Wirklich mächtig wäre meiner Meinung nach, Modifier wie in Blender (Array, Mirror usw.) in einen Vektoreditor zu bringen und damit nicht-destruktive Bearbeitung zu ermöglichen.
Die erste Ausnahme sind Clip-Pfade: In Hyvector werden sie als Pfade mit Kontur und Füllung sowie Inhalten behandelt, die außerhalb dieses Pfads abgeschnitten werden. Der Umgang mit Clip-Pfaden in SVG ist ziemlich umständlich und nicht intuitiv.
Wenn ich weiter daran entwickeln kann, sollen Funktionen wie abgerundete Pfad-Ecken, nicht-destruktive boolesche Operationen, variable Konturbreiten, mehrere Füllungen und Verzerrungen folgen.
Das Exportformat möchte ich aber bei SVG belassen. Es ist fürs Web wirklich gut und lässt sich mit CSS stylen. Daher müssen Effekte als echtes SVG exportierbar sein, und ich will vermeiden, wie manche Editoren beim SVG-Export Fake-Bitmaps ins SVG zu packen. Zum Beispiel wird es konische Gradienten erst geben, wenn SVG sie eines Tages unterstützt.
Ich wollte dieses Icon bearbeiten und den Pfeil in die Mitte des Kreises setzen, aber die Maske wurde nicht richtig erkannt, sodass nur der schwarze Kreis zu sehen war.
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">
Für dieses Icon wäre ein Clip-Pfad möglicherweise passender als eine Maske. Wenn du ein Icon mit derselben Form erstellen möchtest, kannst du die Elemente aus der Maske nehmen, in Hyvector einfügen und dann daran weiterarbeiten.
Sehr schön. Ich mag webbasierte Editoren.
Mir gefällt, dass in importierten SVGs alle Objekte und Gruppen klar mit korrekter Vorschau sichtbar sind.
Zwei Funktionen fehlen mir oder ich habe sie nicht gefunden: Ich frage mich, ob es eine Möglichkeit gibt, Linien in Formen umzuwandeln, und ob man den SVG-Code direkt von Hand live bearbeiten kann. Für normale Nutzer ist das vielleicht zu sehr eine Nischenfunktion, aber manche Dinge wie Füllungen lassen sich im Code viel einfacher bearbeiten als mit visuellen Tools.
Mich würde auch interessieren, ob es eine Chance gibt, das als Open Source zu veröffentlichen.
Die UX gefällt mir wirklich. Auch auf einem Android-Tablet mit Wacom-Unterstützung ist es sehr gut nutzbar.
Ich weiß nicht, ob die Spline-Bearbeitung – also dass man statt einzelner Handles einen beliebigen Punkt der Linie ziehen kann – selbst erdacht oder anderswo übernommen wurde, aber sie gefällt mir wirklich sehr.
Mir ist nur aufgefallen, dass Touch-Scrolling im linken Baum nicht funktioniert; ansonsten ist alles sehr flüssig. Ich frage mich, ob auch Tastaturkürzel implementiert sind.
Wenn man beim Ziehen Shift gedrückt hält, bleibt auch die Handle-Richtung erhalten.
Den linken Baum auf allen Geräten richtig hinzubekommen, ist schwierig. Er muss Klicks, Tippen als Klick, Drag-and-drop, Swipe-Scrolling, Touch-Scrolling usw. unterstützen und sich zugleich so verhalten, als enthalte er Hunderte Elemente. Es gibt noch Themen wie Swipe-Scrolling unter iOS und ein leichtes Ruckeln, aber das steht auf der Liste.
Tastaturkürzel sind auf nicht-mobilen Geräten implementiert. Wenn du in der Menüleiste ein Menü öffnest, werden die Shortcuts rechts neben den Menüeinträgen angezeigt.
Ich habe nicht herausgefunden, wie man es benutzt. Ich habe ein Liniensegment erstellt, aber keine Möglichkeit gefunden, es zu verschieben oder seine Größe zu ändern; Drag-Handles wurden zwar angezeigt.
Ich weiß auch nicht, wie man andere Formen wie Rechtecke oder Kreise erstellt. Ich habe fast alle sichtbaren Buttons in verschiedenen Reihenfolgen ungefähr zwanzigmal angeklickt, aber meistens passierte nichts.
Cool. Ich hoffe, dieses Projekt hat Erfolg.
Als Feedback zum ersten Eindruck: Wie wäre es, beim Start direkt ein leeres, unbenanntes Dokument zu öffnen, mit dem man herumspielen kann, und als anfänglich ausgewähltes Tool etwas Spaßiges wie den Bézier-Stift zu wählen?
Ich war motiviert genug, herumzuklicken, herauszufinden, dass kein Dokument geöffnet ist, ein neues Dokument zu erstellen und dann Tools zu wechseln, um damit zu spielen – aber viele Nutzer werden das nicht tun. Besonders dass kein Dokument geöffnet ist, scheint mir die größte Hürde zu sein.
Ein scheinbar kleines Detail: Die Standard-Leinwand könnte etwas größer sein, etwa 512 oder 500 im Quadrat. Wenn Leute ein neues Tool ausprobieren, geben sie ihm realistisch gesehen nur die ersten 10–20 Sekunden; wenn man sie in dieser Zeit nicht abholt, gehen sie einfach wieder, und man verliert viele Nutzer.
Sieht sehr gut aus, danke fürs Teilen.
Selbst nachdem ich ein neues Dokument erstellt und den Stift ausprobiert hatte, passierte nichts. Am Ende habe ich nicht herausgefunden, wie man es benutzt.
Mit dem Bézier-Tool konnte ich ein paar Nodes hinzufügen, aber mit keinem Tool manipulieren. Vielleicht ist Dragging in Chrome/Windows komplett kaputt?
Gut, und es zeigt viel Potenzial. Als kurzes Feedback: Die schwebende Toolbar oben ist ablenkend und nimmt dem eigentlichen Zeichenbereich Platz weg.
Es wäre besser, sie als normale Toolbar zu belassen oder unten auf der Canvas zu platzieren. Oder sie verschiebbar beziehungsweise einklappbar zu machen.