Show HN: SVG Path Builder | Hacker News Reader

Show HN: SVG Path Builder

anthonydugois.com

95 pointsanthonydugois30 comments

This is really cool and really well done. You should probably put the link to the GitHub page on it and add a LICENSE file to specify if it's open source though!

It would also be really nice to have a feature to hide the points and control points to see what you've made more clearly.

GitHub link for others: https://github.com/anthonydugois/svg-path-builder

I would like to see a license as well. Replies in general would be neat. Show HN and disappear for 6+ hours I guess.

Awesome! Definitely using this to make icons. Way handy to have something simple and online, and not have to fire up Inkscape or Illustrator.

Issues I saw: Ctrl-click to add point doesn't work well on OSX, where ctrl-click doubles as right-click and brings up a context menu.

After ctrl-click and seeing the context menu, it gets stuck in add-point mode until I tap ctrl again.

Maybe it would be easiest to add-point when you click in the background, and select-point when you click on a point?

Having an insert-point function would be really handy. Maybe it would be easiest to make it so that add-point checks the selected point before adding, and joins the selected point to the new point.

Might be nice to allow the point type options on the first point, in the case where you close the path? I don't know SVG paths well enough to know if it supports that natively, but if the only way to close a path is with a straight line, it limits the usefulness of having a close path option, yes?

Oh, and let the general options be collapsible, or at the bottom of the pane. Those are less often used than the point options.

Thanks! Your suggestions are very relevant. The point insertion function is planned for the next update, as well as the ability to change the path code.

The close path function is natively present in SVG. The code ends with the command Z when you want to close the path. The first point is declared using the command M (Move To), so if you want to end the path with a curve, you just have to close it manually with an actual point. :)

Am I being thick? When I hold ctrl and click (on mac), the web context menu pops up and prevents me inserting a point. Although when the menu disappears I actually can add points. Also I have no idea how to create quad or bezier points.

EDIT: oh I am being somewhat thick, you can scroll down to see more menu options like line type. Its not at all obvious though at the resolution I am on. he CTRL click issue is still open for me though

Isn't control-click a right click emulation by default on OSX?

yeah. so thats the problem, ctrl + click is not usable on mac.

Look at what I managed to do with this tool:

http://imgur.com/hRJIKBW

You know what that means? That this tool understands Bezier curves better than Adobe Illustrator. Why? Because Adobe has never heard of the phrase "cusp node".

If you have Illustrator, I challenge you:

- Draw a box with 4 sides

- Try and curve the top line without causing the side lines to curve

- Welcome to insanity.

Kudos to the author of this tool. Shame on Adobe.

Not to take away from how cool this site is, but that is actually really easy to do in Illustrator.

- Draw a box with 4 sides.

- Use the Anchor Point Tool (shift + c) to select the top line and drag it. The adjacent points will split their anchors.

You can use the Anchor Point Tool to convert points between corner mode, mirrored anchor mode, and split anchor mode. Not sure if those are the official terms.

If the anchor has its handles visible, you can also alt+click+drag one handle to automatically convert it to a split anchor / cusp / whatever the cool kids are calling it.

seriously. this is like AI 101.

Forgive me for being a little skeptical but can you show us a screenshot of the "toast shape" done in Adobe Illustrator (showing the guide lines, please)? (I'm changing the challenge a bit because just dragging the top line isn't the same as bestowing the top corners with guides and this challenge now necessitates the guides):

http://imgur.com/UbcUfMu

And make sure to tell us how long it took you. In SVG Path Builder the toast shape above took me 10 seconds, and it never gave me grief by trying to curve the sides, while still giving me the guides for each of the relevant corner nodes. Drawing that in Inkscape is just as easy. Same for CorelDraw.

If you can manipulate the guides of your corner nodes and have them affect only the top side, then you've succeeded in making those two top corner nodes cusp. I have never seen anyone online showing cusp nodes in Illustrator.

Sure, here is a toast shape: http://imgur.com/x86KzRb Took about 10 seconds as well.

Again, the anchor point tool is necessary here. First you drag the top line up to add split anchors (or cusp nodes, haven't ever used that term) to the two adjacent points. Then you can use either the anchor point tool or the direct selection tool to adjust the two new anchors.

The anchor point tool is essential to using Illustrator. You can read more about it under "Convert an anchor point precisely using the Convert Anchor Point tool" here: https://helpx.adobe.com/illustrator/using/editing-paths.html

One feature Adobe Illustrator is sorely lacking (afaik) is grid snapping for anchors. They will snap to objects, lines, and points, but grid snapping would be really helpful.

This should just be the interface for path editing in Inkscape. Inkscape already has these features, but you have to randomly and madly left, right, and double-click various things along with some random keyboard modifiers until you get what you want.

On another note, Blender seriously needs a more intuitive interface like this.

Inkscape could have had the world if they just copied Adobe Illustrator, but instead they came up with their own unfamiliar UI. I'm not saying their UI is worse that Illustrator (although I feel that way personally), but it's not better enough to justify the learning curve. I have to imagine Inkscape contributors were smart enough to realize this, so I guess they were afraid of getting sued. Same goes for Gimp/Photoshop.

I know nothing about Adobe, so I think Inkscape have more problems than being "Unfamiliar."

It's OK, but I never seem to remember if I'll change a property for a tool or my previous operation.

You star! I was fumbling around with animatron (also pretty good) but this is more direct implementation for what I need for static svg paths. Great job!

https://www.animatron.com/explore#staff-picks

What I do for SVG logos is coding them directly in a live editor: http://www.gamesfrommars.fr/live-svg-editor/

Lovely. I kind of grown affected to SVG after I had to create a lot of SVGs at our last customer. It's cool because all you need is a text editor and a SVG viewer (I use [1]) to create images.

Manually creating paths can be pretty difficult though and that's why I am happy to see tools like this one.

[1]: https://atom.io/packages/svg-preview

Do you know svg-edit (http://svg-edit.googlecode.com/svn/branches/stable/editor/sv...)? It is an older project but it works quite well for me when I need to draw some SVG (not very often). It would be interesting to see how the two compare.

Spot on. Here is the one I used: http://editor.method.ac/

Love it! I can see my self using this tool to create perfect SVG icons.

One thing it looks like it is missing is zooming.

Thanks! I'll work on a zooming function. ;)

Thank you very much guys! This is one of the first times that my work is so well received, and woh, what a great feeling! :D

I take into account your comments and suggestions. I will work on this strange behavior on Mac too. Thank you again.

I found this one pretty useful as well: http://framavectoriel.org/svg-editor.html

I would love to use it, but would like to see a license first.

There is a license https://github.com/anthonydugois/svg-path-builder/blob/gh-pa... :)

This is brilliant! Thanks for sharing.

Awesome work!

Reply on news.ycombinator.com