Show HN: Hyvector – A fast and modern SVG editor
256 jansan 70 5/9/2025, 10:45:40 AM hyvector.com ↗
I have been working on Hyvector for the last five years and finally decided to present the result of my work.
Hyvector is an SVG editor that runs in all modern browsers. It is stable, very fast, and capable of handling complex SVG images.
Big new features like art strokes, vector tracing, colorizing are in the making, but for now the focus is on pushing a polished first release out of the door.
I would love to hear any feedback on what you like, missing features, or any bugs you encounter via our issue tracker: https://github.com/hyvectorapp/hyvector-issues
Note that while Hyvector should work on a phone, it is much more usable on a desktop computer or tablet.
A couple First Impression Experience pieces of feedback:
* when it first starts, how about a blank untitled document to play with, and maybe select a fun tool like the Bezier pencil as the initially selected tool. I was able and motivated to click around, realize there was no open document (probably the biggest stumbling block), create a new document, change the tool, and start playing, but many users won't be.
* it seems like a small thing, but please make the default canvas a bit larger (maybe 512 or 500 square). Again just more fun in that critical 10-20 second window, which is all most people will realistically give when checking out a new thing. If you can't hook 'em in that timeframe, they simply browse away and you lose a ton of folks.
Looks very good, thank you for sharing.
Clicking on the path to select them with the Node tool or the Select tool doesn't seem reliable. The Select tool never works, and the Nodes tool I need to click near the nodes (which are invisible) and if I click too fast while searching it thinks I double-clicked and switches to the Select tool.
Maybe some of this makes some sense to the author, and a fix can be forthcoming.
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.
For context, I got started with Illustrator 9 as a teenager (this is making me feel dated, it was released in 2000), and I'm very familiar with the Illustrator UX and find it intuitive.
When using Inkscape, the UX just feels slightly off, things like:
- Weird keybindings, e.g. pressing Ctrl +/- does not zoom/unzoom
- The golden path feels buggy. When launching the window is for some reason cropped to the top 1/8th of the screen and needs to be resized, and the artboard is tiny.
- Usability issues, such as selecting paths does not show their outline, and the layers window doesn't show a preview of what's in each layer
- Exported SVGs are needlessly verbose. This looks like it has gotten better but is still there. For example, exporting an SVG with two gradients actually puts four gradients in the file (combining with inheritance).
I'm sure that spending more time with it would help, and Inkscape does seem quite powerful, but UX is a big factor when I adopt new tools and Inkscape is lacking there.
I've often found myself wanting to edit SVG code directly while viewing the result. This maybe not the most common approach, but sometimes you want to be be dealing with specifics that relate to the fact that you're working with an actual SVG file, and not just a vector image.
https://inkscape.org/en/develop/about-svg/
> The Inkscape project does not only use SVG as its native file format, it also takes part in the further development and refinement of SVG features by delegating a representative to the W3C SVG Working Group.
That said, Inkscape can default to save in SVG, can actively contribute to the SVG standard, but still be / come across as primarily a vector image editor.
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
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.
There are numerous projects called "SVG Path Editor", among which this is the most advanced and usable one I've come across.
Edit: or make it moveable/collapsible
Also, while I assume/hope there are shortcut keys on desktop, I have no idea what there are and if they're documented anywhere I can't find it. If there aren't shortcut keys, it'd be super useful to add them, at least for common actions.
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?
That tree on the left is difficult to get right on all devices. It has to support click, touch to click, drag and drop, swipe scrolling, touch scrolling, etc., and all that while acting as if it holds hundreds of elements. There are still a few issues, for example swipe scrolling and some jankiness on iOS, but I have them on my list.
Keyboard shortcuts are implemented for non-mobile devices. If you open a menu on the menu bar, you can see them at the right in the menu items.
https://math.stackexchange.com/a/952050
Would love to try it on my iPad Air + Apple Pencil.
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.
Duh, I was not even aware that nodes get connected with a single node replacement in other apps. Somehow I missed that.
> Also the "connect paths" ignores selection and instead randomly picks one of the two ends with matching direction.
It should currently connect by selection order (first selected with first selected on other path), but I may have to rethink this.
Regarding fill rule I am aware that this is missing. Thanks a lot for the valuable feedback.
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.
I think Inkscape still uses Potrace internally, which is produces a bit better results.
https://www.godsvg.com/
This way you get a fast and reliable rendering engine for free (including support for MathML and HTML objects), you can easily import third-party SVG assets with a normalizer such as SVGO and you don't need to bother with all the convoluted special cases.
[1] https://github.com/linebender/resvg/blob/main/crates/usvg/do...
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
No comments yet
https://svgedit.netlify.app/editor/index.html
https://github.com/SVG-Edit/svgedit
But I think Hyvector is easier to use, and this is the main focus. I spent a lot of time on cleaning up the UI, and I still see room for improvement.
Performance is comparable. I am testing with some massive SVGs that have tens of thousands of path nodes, and Inkscape and Hyvector can handle them equally well.
(I presume it’s not written in Hy/Hylang, the cute little Lisp that compiles to Python.)
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.
If I can continue developing this other features will follow: Corner rounding of paths, non-destructive boolean operations, variable stroke widths, multiple fills, distortions, etc.
The thing is that I want to keep SVG as the export format, because it it really good for the wbe can be styled with CSS. Therefore effects must be exportable as true SVG (even if composed of multiple SVG elements), not some fake bitmap inserted into an SVG as some other editors do it when exporting SVGs. This for example means that there will be no conic gradients unless they are supported by SVG one day.
Modern web browsers now support "clip-path" CSS property with inline/shorthand values which are much more convenient to use than <clipPath> element. There are some examples on MDN [1]. I haven't performed extensive tests yet but they seem to be working just fine with SVG objects.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path