
Show HN: SVG Path Builder - anthonydugois
http://anthonydugois.com/svg-path-builder/
======
DanielStraight
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](https://github.com/anthonydugois/svg-path-builder)

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

------
dahart
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?

~~~
anthonydugois
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. :)

------
tlarkworthy
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

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

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

------
planfaster
Look at what I managed to do with this tool:

[http://imgur.com/hRJIKBW](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.

~~~
atonparker
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.

~~~
stevesunderland
seriously. this is like AI 101.

~~~
planfaster
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](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.

~~~
atonparker
Sure, here is a toast shape:
[http://imgur.com/x86KzRb](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](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.

------
dheera
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.

~~~
blt
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.

~~~
kpil
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.

------
tlarkworthy
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](https://www.animatron.com/explore#staff-picks)

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

------
renke1
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](https://atom.io/packages/svg-
preview)

------
nlte
Do you know svg-edit ([http://svg-
edit.googlecode.com/svn/branches/stable/editor/sv...](http://svg-
edit.googlecode.com/svn/branches/stable/editor/svg-editor.html))? 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.

~~~
kaydo_com_au
Spot on. Here is the one I used:
[http://editor.method.ac/](http://editor.method.ac/)

------
spleeder
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.

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

------
anthonydugois
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.

------
kaydo_com_au
I found this one pretty useful as well: [http://framavectoriel.org/svg-
editor.html](http://framavectoriel.org/svg-editor.html)

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

~~~
anthonydugois
There is a license [https://github.com/anthonydugois/svg-path-builder/blob/gh-
pa...](https://github.com/anthonydugois/svg-path-builder/blob/gh-
pages/LICENSE.md) :)

------
petergatsby
This is brilliant! Thanks for sharing.

------
RandyRanderson
Awesome work!

