Show HN: Hyvector – A fast and modern SVG editor
hyvector.com325 points by jansan 4 days ago
325 points by jansan 4 days ago
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.
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. What's the problem with inkscape? It has some bugs, but otherwise it works quite well It's been a while since I tried Inkscape, but I downloaded it again to give honest feedback. 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. > Weird keybindings, e.g. pressing Ctrl +/- does not zoom/unzoom if you prefer illustrator shorcut inksape offers it in welcome screen
but maybe it would not hurt to also add that binding defoult is just +- without modifiers > 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. this is not true for new installs. > 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). Inkscape extends SVG a lot so it can add more features. for exports just one of optimised svg export options inskcape offers Inkscape is a vector editor that can export to SVG, but that's a bit different than an editor specifically for the SVG file type. 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. Isn't inkscape's native data format SVG? 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. It's more of just their personal classification of the software than anything in my reading. 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. What is missing for you to call it an svg editor? Like, you can even inspect and modify the raw svg tree directly from the UI while you edit your document in inkscape. for what it's worth, if you click on an element and hit ctrl-shift-x you'll get the underlying svg code and you can edit it directly as you wish I think you can use the XML editor in the edit menu to directly edit the SVG in inkscape Inkscape's brilliant, but its niggles aren't trivial. Leaving transforms in the exported svg code has been pissing me off for years. it can be set up not to do that and it si set up by default not to do that. If its possible (for some elements in specific scenaris it is not) 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 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. [0]: https://yqnn.github.io/svg-path-editor/ There are numerous projects called "SVG Path Editor", among which this is the most advanced and usable one I've come across. 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. Well, this is actually the idea behind it. There is an internal object model, but currently the mapping from SVG to the internal model is almost 1:1. One first exception is clip paths, which in Hyvector is a path with stroke and fill and a content that is clipped outside that path. In SVG handling of clip paths is quite cumbersome and not very intuitive. 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. > In SVG handling of clip paths is quite cumbersome and not very intuitive. 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 Inkscape LPE is exactly that - non destructive path modifiers. Graphite.rs editor in some ways has even bigger focus on nondestrictive effects. 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? Thanks, the curve dragging is surprisingly easy. I think a very old discussion in a Google forum have me the idea how to implement it. It even works with keeping the handle directions (pressing Shift while dragging). 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. I'd be very interested in that discussion for one of my own projects, any chance you still have a link handy? I was wrong, it was on Stackexchange. Stackexchange is full of true gems, and they really often have no or only very few upvotes, because nobody recognizes their value. I could not figure out how to do stuff. I made a line segment, but then could not find a way to move or resize it, although I did get some drag handles to show up. I couldn't figure out how to make any other shape, like rectangles or circles. I clicked on every button I could find probably twenty times in different orders, but could not get most of them to do anything. The shape tool is on the main toolbar between the text tool and image tool. The first two shape options are rectangles and circles. I definitely saw the button, and clicked on it many times. And vigorously, but nothing ever happened. I tried this in Firefox and Chrome on two different machines. Then I used some debugging skills, and found that there were a pair of zero-opacity <iframe>s blocking my clicks on the button, which is why nothing happened. After detaching them from the document, the shape button started doing stuff. I suspect these mystery iframes explain most of my difficulty in using it. I Hyvector an `iframe` is only used when parsing an SVG, so apparently something went wrong and the iframe was not removed properly. I will have to add better error handling to prevent ensure everything is cleaned up in any case. I'm not sure if you changed anything, but it's working now. No phantom iframes. Everything makes more sense now. I think it's helpful for apps like this to provide a lot of hints about how to use the tools, which can then be turned off. Neat! I want this project to succeed. 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. Agreed! Looks great, but I did immediately click the pencil to doodle and was disappointed nothing happened. When I created a new document and tried to use the pencil nothing happened. I never figured out how to use it. I tried the Bezier tool and was able to add some nodes but was not able to manipulate them with any of the tools. Maybe dragging is entirely broken on Chrome/Windows? To select nodes I needed to click on the path in the "Objects" outline on the left side of the screen. Then I could switch to the Nodes tool and select nodes. But after that I can't drag nodes either. Firefox/Linux, so probably something is actually broken not just a compat issue. 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. 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 Thanks, the toolbar has already been redesigned and moved several times. It collapses anyway when the window gets too narrow, so giving it a collapse button should be super easy to do. Plus one on the floating thing, on desktop it'd be great to be able to move it out of my way but still have it present. 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. Very cool! A few notes: - I really like the level of fine-grained control, even for changes that don't visibly affect the output, like reversing a path. For that case, some visual feedback would help, since it's hard to tell if it worked - Copying a selection to the clipboard seems to include all fonts used in the scene (even if not selected) as base64 in the SVG, leading to a bloated output Do you plan to keep the strict 1:1 mapping with SVG, or are you open to some abstractions? I still use Figma for creating SVGs because of one killer feature I can't work without anymore: Vector Networks [1]. They'd need some internal conversion to valid path data, but it's an abstraction that could add real value. On the technical side, I'm surprised the editor uses SVG for rendering. Although of course it makes sense, I half expected it to use canvas under the hood. Lately I've been experimenting with rendering simple 3D objects using SVG and ran into performance issues pretty quickly, though I'm not yet sure what exactly' is causing them. Did you do any stress testing yet, especially on older devices? I realized a while ago that Vector Networks (I call them path graphs) is actually an intermediate structure that I already have when performing a boolean path operation. I was skeptical of Vector Networks until recently, when I realized that they would be awesome as a result of bitmap vectorization, which has become more important with all the AI generated images. So yes, I want to implement them, but there is so much more mundane work to do that I cannot say why. I am doing stress testing and test it on really crappy devices (an old 100€ Android tablet is the worst), but this post was quite spontaneous and I should have done a bit more testing before it. I used to deliberately work on an old ThinkPad to immediately notice any performance issues, but the IDEs have become so demanding that this is almost impossible. But I keep those devices around and try to make sure that it runs on older hardware. Regarding your other suggestions: I am currently going through all suggestions in the comments and will make issues for them. The amount of helpful responses was just overwhelming. I was hoping for about 5 upvotes and maybe two comments :) Edit: The decision on using SVG for rendering was done because I wanted to make sure that the rendering looks exactly like the saved SVG file. I have been thinking about using Canvas or WebGL for the overlay, but for now it runs fast enough with most images. After using it, I think this is a great start. As I mentioned in the previous comment, I really like the UX, and this is specifically about: - The Pen tool feels intuitive. - I like how the Objects panel shows previews of each layer. - It is nice to see clip-path support integrated well, and features such as converting text to outlines, and boolean operations - these seem like rare features. Here's some critical feedback after using it: - Keybindings to switch between tools would be useful, and they should be annotated on the tooltips - I'd like to see zoom/panning supported with Ctrl +/- and panning when holding space and clicking/dragging. - When editing groups of shapes, it is hard to select individual shapes in the group. Double-clicking switches to the Nodes tool, which is not exactly what I want. I'd like something where double-clicking a group goes into some sort of "Group Isolation" editing mode. - When using the Pen tool, I'd like to be able to go back to tweak the previous points, such as adjusting the control points, etc. - Undo in Pen mode does not undo the insertion of points in the path, instead of Undoes operations from before the shape was started. - Text support seems limited, for example an embedded @font-face did not render correctly. Similarly for filter support. If the editor doesn't support these features I'd expect them to at least be rendered correctly by the browser, but it seems like SVG rendering here is independent. Thanks for a ll the great feedback. I will have to write a bunch of issues over the next days and start working on them. Actually, I was hoping for about 5 upvotes and maybe two comments when I posted this on Hackernews, and the feedback is quite overwhelming. Regarding selection of elements froma group, you can select individual elements with Ctrl + click. The selection process is a bit messy and I need a cleaner concept, but maybe for now this helps. 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 are a lot of options in this thread already, but I've been using Figma to create and edit SVGs and don't have any complaints so far. Congratulations for your SVG editor, I really like the idea. Clean graphics, easy to use. Would it be possible to export the created files also in PDF format? It would be really useful as an editor. Thanks and keep it up 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. 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. > There is no way to join 2 nodes without introducing new edge, unless there is some hidden shortcut. 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. Nice. I built something like this years ago. SVG is a really fun standard to build stuff around. 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. Can this solve vector tracing? https://github.com/jankovicsandras/imagetracerjs (Public domain) Discaimer: I made this. The result doesn't match the original svg https://github.com/jankovicsandras/imagetracerjs/blob/master... on an a/b test. The inkscape extension link is to a empty page: https://inkscape.org/~MarioVoigt/%E2%98%85imagetracerjs-for-... "Vectorize" generator in Boxy SVG also uses imagetracerjs under the hood, you can check the online demo here: https://boxy-svg.com/#demo-tracing I think Inkscape still uses Potrace internally, which is produces a bit better results. I really like how well the node editor preserves the path as much as possible when adding or removing nodes, apparently adjusting adjacent nodes to minimize distortion. Not a single thing in this works in Safari Apple products are a poor testbed for web apps. Should’t be - it has significant marketshare regardless. Especially in art/design area. There should at least be an error message. Would love to try it on my iPad Air + Apple Pencil. Thank you for sharing!
Does it offer a way to edit relevant pieces of SVG code? No, this is currently not a feature. I wanted to keep a certain level of abstraction to be able to add features that SVG does not support natively. Internally it uses its own object model, which is similar to SVG but in parts different (for example when using clip paths), so giving access to the raw SVG code may be difficult. If I were to build a web-based vector graphics editor from scratch today, I would make it work internally with a "sane" subset of SVG such as SVG Micro [1]. 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... 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. 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 It is written in plain Javascript using Vue for reactivity. I have not made any decisions regarding the license or monetization, but for now it is just free to use. You might wanna look into Skia’s pathkit for a lot of path transformations it can do and you could use. how does it compare to inkscape? Inkscape has far more features, and Hyvector does not support some SVG features like filters and masks, yet. 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. Also, would it bring more to table on the web compared to svgedit? Nice thank you. I often use https://github.com/Yqnn/svg-path-editor, but I'm going to try this one out. Just tried to edit this icon so that the arrow is in the center of the circle. The mask wasn't properly recognized and so it only shows a black circle: <svg xmlns="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">
<circle cx="10" cy="10" r="10" fill="currentColor" mask="url(#maskArrow)"></circle>
<mask id="maskArrow">
<circle cx="10" cy="10" r="10" fill="white"></circle>
<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.41z"></path>
</mask>
</svg> As I wrote in the post above, masks and filters are not not supported, yet. For your icon a clip path may make more sense than a mask. If you want to create an icon with the same shape you can simply take the elements from the mask and paste them into Hyvector and work with that: <circle cx="10" cy="10" r="10" fill="white"></circle> <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.41z"></path> Would be interesting if it were open source. This is not enough to be a product, but it's enough to be a package you could build products with. If you're willing, I'd like to ask some questions about your implementation. My email is in my profile. What’s the story behind the naming? (I presume it’s not written in Hy/Hylang, the cute little Lisp that compiles to Python.) My children came up with it. All the obvious names were taken, so I kept it. I think it has something to do with Minecraft. Your project seems to be the opposite of Hytale; only 5 years instead of 10, and you've got a usable, working product without grifting for investor dollars. checked the generated SVG for clues and was glad to see you have a link to the editor. very nice! https://www.hyvector.com/dtd This is really lovely, very responsive, and better than other tools I've tried. Is it just me though, or is the saving functionality wonky? I seem to be able to save but then "save as" doesn't prompt for a new filename / location. I wanted to fiddle with an svg, add additional layers, save a few versions locally - but seem unable to do this? Thanks. Currently only classic cross-browser functionality is used to save files, which always saves files to the "Downloads" folder. I know that this is not perfect and improving this is certainly on my list. [dead] Thanks. I have only just started using a little AI for another project on my day job, but I am aware allowing integration of AI generation will be critical. Can you say a little bit more how you would like to use AI in combination with a vector editor? I was thinking of vectorizing and colorizing the result of an AI generated bitmap, but I have not thought beyond that. Good job! but somehow the UI looks blurry on mac. You are right, the rulers and thumbnails need to respect high resolution displays. It was always on my mind to take a look into this, but at the same time I was wondering if anyone would notice at all. Obviously some people do :)
jwmcglynn - 4 days ago
somethingsome - 4 days ago
jwmcglynn - 4 days ago
AdamBelis - 3 days ago
simonbw - 4 days ago
jcelerier - 4 days ago
perching_aix - 4 days ago
jcelerier - 4 days ago
Lalo-ATX - 4 days ago
somethingsome - 4 days ago
squidbeak - 4 days ago
AdamBelis - 3 days ago
WillAdams - 4 days ago
Gualdrapo - 4 days ago
satgo1546 - 4 days ago
lyu07282 - 4 days ago
jansan - 4 days ago
jarek-foksa - 4 days ago
Karliss - 4 days ago
boomskats - 4 days ago
jansan - 4 days ago
jdiff - 4 days ago
jansan - 4 days ago
recursive - 4 days ago
boomskats - 4 days ago
recursive - 4 days ago
jansan - 4 days ago
recursive - 2 days ago
stevage - 4 days ago
schiffern - 4 days ago
noxa - 4 days ago
schiffern - 4 days ago
edu - 4 days ago
jansan - 4 days ago
jfindley - 4 days ago
jshxr - 3 days ago
jansan - 3 days ago
jwmcglynn - 4 days ago
jansan - 4 days ago
ansc - 4 days ago
osener - 4 days ago
8mobile - 2 days ago
pveierland - 4 days ago
Karliss - 4 days ago
jansan - 4 days ago
artursapek - 4 days ago
iFire - 4 days ago
jankovicsandras - 4 days ago
iFire - 4 days ago
titaphraz - 4 days ago
jarek-foksa - 4 days ago
mbar84 - 3 days ago
herpdyderp - 4 days ago
cyanydeez - 4 days ago
nicce - 4 days ago
alwillis - 4 days ago
stared - 4 days ago
jansan - 4 days ago
jarek-foksa - 4 days ago
cssinate - 4 days ago
throwaway2562 - 4 days ago
jansan - 4 days ago
Matheus28 - 4 days ago
kiney - 4 days ago
jansan - 4 days ago
anilgulecha - 4 days ago
sandreas - 4 days ago
Mystery-Machine - a day ago
jansan - a day ago
popalchemist - 4 days ago
whartung - 4 days ago
syntaxfree - 4 days ago
jansan - 4 days ago
axus - 4 days ago
VoltCraft - 4 days ago
dmje - 2 days ago
jansan - 2 days ago
Alex_001 - 3 days ago
jansan - 3 days ago
rizky05 - 4 days ago
jansan - 4 days ago
