Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: SVG Path Builder

anthonydugois.com

Post reply on HN
Print view View original

21–30 of 32 posts

Re: Show HN: SVG Path Builder

#21

Post by tlarkworthy »

vincentkriek wrote: post #18
tlarkworthy wrote: post #17

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…

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

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

Re: Show HN: SVG Path Builder

#23

Post by kaydo_com_au »

nlte wrote: post #22

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/

Re: Show HN: SVG Path Builder

#25

Post by planfaster »

stevesunderland wrote: post #16
atonparker wrote: post #9

Earlier quoted context omitted.

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.

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.

Re: Show HN: SVG Path Builder

#26

Post by atonparker »

planfaster wrote: post #25
stevesunderland wrote: post #16

Earlier quoted context omitted.

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…

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.

Re: Show HN: SVG Path Builder

#27

Post by 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.

Re: Show HN: SVG Path Builder

#28

Post by anthonydugois »

dahart wrote: post #6

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 whe…

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

Post reply on HN