7 ms·

Open-source online SVG path editor

169 points by sandreas 5y ago

HNSucksAss 5y ago
tomcam 5y ago
Can’t wait to explore this more. It sort of feels like it might become the vim of graphics editors.
- chrismorgan 5y ago
  I don’t know what you mean by invoking Vim here. Among text editors, there’s nothing particularly special about Vim in its functionality (what you can do with it), it just presents commands in a slightly different way that makes it more efficient when you’re used to it. (I say this as a devoted Vim user for over fifteen years.) This, on the other hand, is focusing on a tiny piece of the functionality of graphics editors, exposing the ability to edit path data as a text/graphic hybrid, a mode not supported in the slightest by any graphics editor that I can think of. It’s functionally radical (it makes novel things possible or feasible), which Vim never was, is or will be. Is there some other axis you have in mind that I’m not seeing?
  - ComodoHacker 5y ago
    >what you mean by invoking Vim A tool praised by almost everyone and used by almost no one? :)
- drcongo 5y ago
  As in nobody knows how to quit out of it?
sandreas 5y ago
Here is the usable demo: https://yqnn.github.io/svg-path-editor/ https://yqnn.github.io/svg-path-editor/ I found this while searching for a way to edit paths and it was just the right tool. Every hour I find new features, like - Snap to grid (on and off - I first thought the drag and drop of dots was not working correctly) - Minify output - Import and Download as SVG Button upper right - Scale and translate - The three dot menu in the Commands list With the image import button and opacity settings you can easily manually vectorize raster images. It's just awesome. I would love to see some more github stars here :-)
elia_is_me 5y ago
some days ago when i was trying to copy some icons from ytb i found this tool. Really good job!
zxcvgm 5y ago
Thanks for posting this! It's an absolute godsend for creating small vector icons. As an example, I was looking at various popular sites for how they implement the "hamburger menu" icon, and it turns out that YouTube has a really compact one: M21,6H3V5h18V6z M21,11H3v1h18V11z M21,17H3v1h18V17z When I tried implementing my own in something like Inkscape, it always uses floats for coordinates, no matter how hard I tried to coax it into a fixed grid or using integer values. With that problem alone, you will never be able to get a compact path. This editor is perfect for doing this.
- ygra 5y ago
  One trick I've been using fairly often to ensure integer coordinates is to divide my shape into a uniform grid that can then be stretched to the actual size. Then you can use a combination of the SVG's size, viewBox and preserveAspectRatio='none' to stretch that to the full size. Have used that frequently for flags, e.g. https://commons.wikimedia.org/wiki/File:Flag_of_Biliy_Kamin.svg https://commons.wikimedia.org/wiki/File:Flag_of_Biliy_Kamin.... But indeed, when using Inkscape for exact geometric work, you need a lot of care and in many cases editing the file by hand is easier.
- throwaway744678 5y ago
  I frequently use this to (lightly) edit vector drawables for android: though they are not proper SVG, the path syntax is the same. And, yes, it is a godsend!
- sandreas 5y ago
  You can also use this editor for WPF Controls in C# / XAML!
- jhgb 5y ago
  Smart quantization of SVG paths sounds like a neat problem. Is there no existing tool for it already? Along the lines of pngcrush or similar. This may be too-stupid-to-work but what immediately comes to my mind is normalizing all coordinates into an [0,1]x[0,1] interval and then finding an optimal N so that the maximum rounding error for quantizing all coordinates to the nearest K/N (where K is a non-negative integer up to N) is minimal (for some definition of "optimal", since you have two criteria now - resulting path string length AND maximum rounding error achieved for a given N). Then all your coordinate components should be integers in the range of [0,N].
aww_dang 5y ago
I'd like to use text inside of a SVG along a curve.
- Gualdrapo 5y ago
  Inkscape can do that.
nougatbyte 5y ago
I found this some weeks ago and used it to learn how SVG pathes work. It was enough to write a function making pathes absolute and splitting them into pieces. Great tool
djmips 5y ago
This is really well done!
quinnjh 5y ago
Excellent tool thanks!

169 points by sandreas 5y ago

HNSucksAss 5y ago

tomcam 5y ago

Can’t wait to explore this more. It sort of feels like it might become the vim of graphics editors.

chrismorgan 5y ago
I don’t know what you mean by invoking Vim here. Among text editors, there’s nothing particularly special about Vim in its functionality (what you can do with it), it just presents commands in a slightly different way that makes it more efficient when you’re used to it. (I say this as a devoted Vim user for over fifteen years.) This, on the other hand, is focusing on a tiny piece of the functionality of graphics editors, exposing the ability to edit path data as a text/graphic hybrid, a mode not supported in the slightest by any graphics editor that I can think of. It’s functionally radical (it makes novel things possible or feasible), which Vim never was, is or will be. Is there some other axis you have in mind that I’m not seeing?
- ComodoHacker 5y ago
  >what you mean by invoking Vim A tool praised by almost everyone and used by almost no one? :)
drcongo 5y ago
As in nobody knows how to quit out of it?

sandreas 5y ago

Here is the usable demo: https://yqnn.github.io/svg-path-editor/ https://yqnn.github.io/svg-path-editor/ I found this while searching for a way to edit paths and it was just the right tool. Every hour I find new features, like - Snap to grid (on and off - I first thought the drag and drop of dots was not working correctly) - Minify output - Import and Download as SVG Button upper right - Scale and translate - The three dot menu in the Commands list With the image import button and opacity settings you can easily manually vectorize raster images. It's just awesome. I would love to see some more github stars here :-)

elia_is_me 5y ago

some days ago when i was trying to copy some icons from ytb i found this tool. Really good job!

zxcvgm 5y ago

Thanks for posting this! It's an absolute godsend for creating small vector icons. As an example, I was looking at various popular sites for how they implement the "hamburger menu" icon, and it turns out that YouTube has a really compact one: M21,6H3V5h18V6z M21,11H3v1h18V11z M21,17H3v1h18V17z When I tried implementing my own in something like Inkscape, it always uses floats for coordinates, no matter how hard I tried to coax it into a fixed grid or using integer values. With that problem alone, you will never be able to get a compact path. This editor is perfect for doing this.

ygra 5y ago
One trick I've been using fairly often to ensure integer coordinates is to divide my shape into a uniform grid that can then be stretched to the actual size. Then you can use a combination of the SVG's size, viewBox and preserveAspectRatio='none' to stretch that to the full size. Have used that frequently for flags, e.g. https://commons.wikimedia.org/wiki/File:Flag_of_Biliy_Kamin.svg https://commons.wikimedia.org/wiki/File:Flag_of_Biliy_Kamin.... But indeed, when using Inkscape for exact geometric work, you need a lot of care and in many cases editing the file by hand is easier.
throwaway744678 5y ago
I frequently use this to (lightly) edit vector drawables for android: though they are not proper SVG, the path syntax is the same. And, yes, it is a godsend!
sandreas 5y ago
You can also use this editor for WPF Controls in C# / XAML!
jhgb 5y ago
Smart quantization of SVG paths sounds like a neat problem. Is there no existing tool for it already? Along the lines of pngcrush or similar. This may be too-stupid-to-work but what immediately comes to my mind is normalizing all coordinates into an [0,1]x[0,1] interval and then finding an optimal N so that the maximum rounding error for quantizing all coordinates to the nearest K/N (where K is a non-negative integer up to N) is minimal (for some definition of "optimal", since you have two criteria now - resulting path string length AND maximum rounding error achieved for a given N). Then all your coordinate components should be integers in the range of [0,N].

aww_dang 5y ago

I'd like to use text inside of a SVG along a curve.

Gualdrapo 5y ago
Inkscape can do that.

nougatbyte 5y ago

I found this some weeks ago and used it to learn how SVG pathes work. It was enough to write a function making pathes absolute and splitting them into pieces. Great tool

djmips 5y ago

This is really well done!

quinnjh 5y ago

Excellent tool thanks!