Show HN: Hyvector – A fast and modern SVG editor

Very nice! My side project is a C++ SVG rendering library, and I have never been able to find great SVG editors.

I usually fall back to Illustrator and then clean up the resulting markup, or a text-based editor such as https://www.svgviewer.dev/

Your UX is quite polished, and your tool already supports more features than other ones I've found, good work!

For reference this is my project, https://github.com/jwmcglynn/donner, which has a web-based "editor" (currently just code-based editing) prototype here: https://jwmcglynn.github.io/donner-editor/

SVG is one of those things that has lots of potential but has been impacted by not-so-great tooling, it's my passion and I'm glad to see innovation in the space.

It's a nice beginning.

Some obvious features which I missed:

- nodes tool should want to snap begin/end nodes together when editing (and the snap distance could be larger when initially creating, esp. w/ the pencil tool)

- rather than a Nodes tool for editing, something like to Wick Editor's Flash/Futurewave Smarksetch pull/push deforming would be much more mobile friendly

- if corner rounding doesn't work on polygons it should be hidden/disabled

You might wanna look into Skia’s pathkit for a lot of path transformations it can do and you could use.

This is what I wish KDE's Karbon was - a friendly but quick and capable SVG editor.

Granted, I wish it somehow could had the functionalities SVG Path Editor[0] has, which I haven't been able to find in any other editor (like, for example, converting absolute `<path>` coordinates to relative, editing each line, curve, and so on for each `<path>`).

Another feature that would be great to have but would require a monumental amount of work, or maybe even be its own project, would be animation.

Nice, shows a lot of promise. A quick feedback, placign the floating toolbar at the top is distracting and takes up real-state from the actual drawing. I'd prefer to have a regular toolbar or placing it at the bottom of the canvas.

Edit: or make it moveable/collapsible

I've been thinking about why there's no modern SVG editor like this. Super nice to see. Inkscape can be a bit of a pain imo, even if it has extensive features. I'll definitely give it a spin. Good luck!

There is no way to join 2 nodes without introducing new edge, unless there is some hidden shortcut. Also the "connect paths" ignores selection and instead randomly picks one of the two ends with matching direction. Even if you know the end direction rule you can't know which of the 2 endpoint pairs will be connected.

I might be slightly biased as I am more used to even/odd infill mode compared to non zero mode, but having user constantly keep track of which paths are clockwise and which are counterclockwise seems like unnecessary hassle, especially for paths without infill where it shouldn't matter. At least there is a UI indicator for it, otherwise I would be very confused.

I really like the UX of this. Very usable on a Wacom enabled android tablet.

Don't know if your spline editing mechanism (i.e. the ability to drag the line around from an aribtrary point rather than tweaking the individual handles) is something you came up with yourself or borrowed from elsewhere, but I really really like it.

Only thing I noticed is that touch scrolling doesn't work on the tree on the left. Otherwise it's very smooth.

Have you implemented any keyboard shortcuts?

The first thing that came to mind was my friend's project to do a SVG editor in Godot Engine https://www.godsvg.com/.

I'll write my first impressions of https://github.com/hyvectorapp so it helps usability and improvement.

Oh it's a freemium app.

hyvectorapp starts off looking like figma, penpot style which is a good sign.

I can export svg [x]

There's no align to grid system.

vector tracing is not generally solved except via the vectormagic product and machine learning research prototypes. I wonder how you solved it.

Can't interact more today so I'll end with this note of hopefulness.

This locked up my system so hard I couldn't recover by killing the browser or reloading the window manager (Firefox 133.0.3 / Sway 1.9). Had to reboot and don't have time to investigate further right now. Appeared to happen while double clicking and dragging around elements a bit rapidly.

Looks cool! Very polished, I appreciate just how much effort it takes to get something like this out of the door.

Couple of questions for OP

What is it written in? What will the license be?

Context: Currently evaluating the venerable SVGEdit (MIT, JavaScript) for a project

https://github.com/SVG-Edit/svgedit

If you're willing, I'd like to ask some questions about your implementation. My email is in my profile.

Thank you for sharing! Does it offer a way to edit relevant pieces of SVG code?

This looks great! If you're open to feedback, one thing I love is being able to edit the actual SVG properties right inside the app - the CSS, the path nodes, etc.

how does it compare to inkscape?

What’s the story behind the naming?

(I presume it’s not written in Hy/Hylang, the cute little Lisp that compiles to Python.)

Looks great! Not meant as a critique but I always thought SVG is the wrong level of abstraction for an editor, I don't really want a SVG editor I want a vector drawing program. Sure it should render to optimized SVG, but a UI/UX built around the SVG concepts like path, clip-path and the like is not very end-user friendly. This always irked me about inkscape anyway.

Also what I always thought would be a real killer feature would be something similar to blender modifiers (array, mirror, etc.) but in a vector editor, allowing for non-destructive editing.

Nice. I built something like this years ago. SVG is a really fun standard to build stuff around.

Good job! but somehow the UI looks blurry on mac.