8 ms·

SVG Path Editor

618 points by blindm 6y ago

stanmancan 6y ago
This is super cool. I’ve heard people talk about how you can manually editing SVGs but it always looked impossible to me. This does an awesome visually showing you how it all works.
- dnautics 6y ago
  I typically manually edit svgs in inkscape, but it's a real hassle: - copy/paste-in-place introduces minor deviations. - I can never be sure if copy/paste/move will change path values or do it as a transformation. - I don't do it often and forget to turn off path auto-minification; it's a real pain to have inkscape constantly shift between relative accumulating coordinates and absolute coordinates.
xipho 6y ago
Thanks for sharing. It's hard to find good stand-alone SVG editing libraries/engines that really focus on the back-end editing/API and not the UI (buttons, icons, etc). We've always wanted an engine that just focuses on draw and export of the SVG, and that lets us define the buttons, look, UI etc. as needed. Perhaps of interest, one of our devs poked at native JS approach for a while- https://github.com/SpeciesFileGroup/svg-detailer/ https://github.com/SpeciesFileGroup/svg-detailer/. It definitely needs some code cleanup prior to production readiness, but it illustrates our needs/thought process.
harrygeez 6y ago
This is amazing! I've been handwriting some simple SVGs and this makes that so much simpler. I like how this goes down pixel-level accuracy that provides the simplicity I like and exposes semantics that are familiar to programmers such as path commands. Tools like Sketch are a little intimidating to start learning and I'm not even sure if they expose things like path commands.
chrismorgan 6y ago
This looks very good, especially as a teaching tool. Writing and minifying SVG by hand (including path data) is a hobby of mine. I’m pleased to see that the minification doesn’t put a space after the “0” or “1” of large-arc-flag and sweep-flag; historically I’ve found most minification tools doing so, and even some tools failing to parse `a1 2 3 104 5` (arc: rx=1, ry=2, x-axis-rotation=3, large-arc-flag enabled, sweep-flag disabled, dx=4, dy=5). One missing optimisation is culling superfluous path commands. If you have two commands of the same type in a row, you don’t need to repeat the letter: `L1 2L-3 4` can become just `L1 2-3 4`; also, after the initial M or m command, it switches to L or l automatically, so in `M1 2L-3 4` the L could be removed. An area I’d really like to see more work in (in SVG tooling in general) is path simplification/minification. In automated tools I’ve only seen rounding to a fixed number of decimal places, which is what this tool is offering, and which is terrible: some decimal places are far more significant than others, and indeed some points could be happily dropped, and rounding everything is not always the correct behaviour for fidelity. Instead of “two decimal places”, I’d like to see things like “accurate to within one pixel in any given direction”, which I reckon will normally compress better for a given quality level. There’s also the approach taken by Inkscape’s path simplification, which chooses a completely new set of points and curves that approximate the current values, but this harms the accuracy of the path and isn’t flexible enough (you run it in discrete steps, rather than there being a continuous slider or the ability to simplify some sections harder than others, whether automatically for best accuracy or manually).
- edent 6y ago
  If you're interested in minifying SVGs by hand, we're creating SVG icons in under 1KB at https://github.com/edent/SuperTinyIcons/ https://github.com/edent/SuperTinyIcons/ We could do with some help on the accuracy of some of them :-)
  - liquidise 6y ago
    Awesome project. So nice to see these logos collected in a place with attention to the underlying SVG detail. None of the garbage comments/ids/etc outputted by Adobe and Sketch.
  - 6y ago
vishnuharidas 6y ago
Nice tool. I recommend adding an "clear" or "new" option where the users can clear the preset sword and start a new art.
- chrismorgan 6y ago
  The “Path” text area in the top left is fully reactive, so if you delete its contents the sword vanishes.
  - vishnuharidas 6y ago
    True, I discovered that after playing with it for a while! But it can be hard for a new person (who's not aware of the SVG commands) to to and clear that text area to clear the canvas.
simlevesque 6y ago
that's a life saver. I edited them manually too many times to count and it would have been useful then.
callumprentice 6y ago
This is excellent. I am probably missing something obvious but how do I load an arbitrary SVG into this? Do I need to manually extract the PATH parts of the file ?
DIVx0 6y ago
This is real cool! My hobby is plotting (AxiDraw) generative art. I often want to hand tweak SVGs prior to plotting them. I often get frustrated with the heavy weight tools such as InkScape and Illustrator. This looks like just the thing I need. Looking forward to trying it out this weekend!
elwell 6y ago
Looks like a great alternative to Inkscape
- swizy 6y ago
  You're right - The few times I've used Inkscape to do something simple has always resulted in remoting into my PC to use Illustrator.
intrasight 6y ago
Cool. But weird interaction style - with having to hover over the vertical bar below the fields in order to change field to be editable. Curious why one would create fields that way.
fluxinflex 6y ago
Great tool, it reminds me of svg edit[0] 0 = https://svg-edit.github.io/svgedit/dist/editor/index.html https://svg-edit.github.io/svgedit/dist/editor/index.html
zw123456 6y ago
This will come in handy for doing quick CNC work. A lot simpler than inkscape or other similar tools especially if you just need to cut a few simple pieces. Thanks for sharing !
- SoSoRoCoCo 6y ago
  My thoughts exactly. Sometimes you need a quick SVG that is too complicated to do by hand but too simple for Inkscape.
skunkworker 6y ago
I like this tool a lot. As someone who learned modelling in Autodesk Inventor then had to re-learn in Maya, a tool like this could help to make the transition from a hard, grid based system to something much more artistic and flexible.
sjbrown 6y ago
I love this. I'm too often guessing and doing trial-and-error when trying to get SVG paths juuuust right for my SVG-based virtual tabletop project.
deleted 6y ago
[deleted]
c-smile 6y ago
Very cool! Especially for the Sciter (and now Sciter.JS [1]) where we can use SVG paths directly in CSS as vector images: input.radio { background-image: url(path: M 4 8 L 10 1 L 13 0); background-size: 1em; stroke: black; stroke-width: 3px; } More details are here: https://sciter.com/lightweight-inline-vector-images-in-sciter/ https://sciter.com/lightweight-inline-vector-images-in-scite... [1] Sciter.JS preview: https://github.com/c-smile/sciter-js-sdk https://github.com/c-smile/sciter-js-sdk
- emmanueloga_ 6y ago
  Seeing this reminds me of the question: "why do we have an <img> element? Why not an <icon> element? Or an <include> element?" [1] Back in the olden times shipping a feature like the `url(path:)` above was enough to have it become a defacto standard! Meta: link [1] uses text-fragments [2] that seem super useful to me but apparently are not implemented by Firefox (yet!) 1: https://diveinto.html5doctor.com/past.html#:~:text=original%20question:%20why%20do%20we%20have%20an%20%3Cimg%3E%20element https://diveinto.html5doctor.com/past.html#:~:text=original%... 2: https://wicg.github.io/scroll-to-text-fragment/ https://wicg.github.io/scroll-to-text-fragment/
  - c-smile 6y ago
    Well, we have plenty of images already: <img>, <picture>, <figure>, <object>, <iframe> can be used for that purposes too. It is just unclear how <icon> is different from <img>. As of <include> (so called client side includes) Sciter has them [1] as they make sense in precisely desktop environments - when files included from local sources (synchronously). [1] <include> in Sciter: https://sciter.com/forums/topic/import-html-in-html/ https://sciter.com/forums/topic/import-html-in-html/
codazoda 6y ago
Checkout DotGrid for writing svg graphics too. I'm not involved with the project, just love the idea of small, energy efficient software. https://100r.co/site/dotgrid.html https://100r.co/site/dotgrid.html
- sebmaynard 6y ago
  Just fell down quite a rabbit hole exploring their site, some really lovely tools, and some fascinating writing
- ddoice 6y ago
  What a beautiful piece of code and UI!
toufka 6y ago
Is there a library out there that allows you to make some of these manipulations in code? Like: translateX(svg, 10px), scale(svg, 10%), ConvertToRelative(svg), AutoBounds(svg), etc. There are many that allow you to generate an svg, but it's been hard to find those that allow you to manipulate an existing svg.
- yqnn 6y ago
  You can copy 'svg.ts' and 'svg-parser.ts', from here: https://github.com/Yqnn/svg-path-editor/tree/master/src/app https://github.com/Yqnn/svg-path-editor/tree/master/src/app It's what's used internally by the tool. const path = new Svg('M 0 0 L 1 1'); path.translate(1, 2); // Translates (x:1pt , y:2pt) path.scale(2, 3); // Scales (x:200%, y:300%) path.setRelative(true); // Converts the path to use only relative commands path.asString(); // Export the path with no minification path.asString(1, true); // Export the path with 4 decimals, and minification I wanted to publish them separately on npm, but didn't had time to do it :)
  - toufka 6y ago
    Very cool! Thanks!
r00tanon 6y ago
Very cool. Although I prefer Inkscape, and it handles SVG nicely.
SiVal 6y ago
How is the pan-zoom implemented in this? It's nicely done.
- yqnn 6y ago
  Using TouchEvents, and a bit of basic geometry. It's here: https://github.com/Yqnn/svg-path-editor/blob/master/src/app/canvas/canvas.component.ts#L258 https://github.com/Yqnn/svg-path-editor/blob/master/src/app/...
nashashmi 6y ago
How does this compare to svg edit.
deleted 6y ago
[deleted]
deleted 6y ago
[deleted]
cyral 6y ago
Very nice! I've needed an easy to use SVG editor for making simple icons before, especially with grid snapping, and wasn't able to find anything like this.
bellwether 6y ago
Love this!!
bosuanzi 6y ago
Nice cool
nihakue 6y ago
Unbelievable. I just wrapped up my first svg-heavy project. Something like this would have been an invaluable learning tool. I ended up writing a lot of SVG by hand, and mostly through trial and error. Looks great, though :P
anderspitman 6y ago
Is there such a thing as SVG but where you can define a subshape and reuse it elsewhere in the file?
- Silhouette 6y ago
  Perhaps you're looking for <defs> and <use> elements?
  - anderspitman 6y ago
    That looks like the ticket, thanks! It's very embarrassing that I didn't know about this before.
    - ygra 6y ago
      The main drawback for those things is that you cannot parameterize them, which is a bummer if you've created a shape that you might want to vary in ways that a transform cannot easily do.
      - anderspitman 6y ago
        Seems like you can get pretty far with CSS variables though, yeah? Do you have a good example of something common that can't be accomplished?
        ygra 6y ago
        For styling purposes, yes, CSS allows a lot and things like currentColor enable you to at least have colors and styling dynamic when instancing symbols. But things like parametric shapes don't work without scripting, which is a bummer, since in many other places SVG is very amenable to handwriting with a lot of cool features. Just not with a lot of abstraction options.

618 points by blindm 6y ago

This is super cool. I’ve heard people talk about how you can manually editing SVGs but it always looked impossible to me. This does an awesome visually showing you how it all works.

dnautics 6y ago
I typically manually edit svgs in inkscape, but it's a real hassle: - copy/paste-in-place introduces minor deviations. - I can never be sure if copy/paste/move will change path values or do it as a transformation. - I don't do it often and forget to turn off path auto-minification; it's a real pain to have inkscape constantly shift between relative accumulating coordinates and absolute coordinates.

xipho 6y ago

Thanks for sharing. It's hard to find good stand-alone SVG editing libraries/engines that really focus on the back-end editing/API and not the UI (buttons, icons, etc). We've always wanted an engine that just focuses on draw and export of the SVG, and that lets us define the buttons, look, UI etc. as needed. Perhaps of interest, one of our devs poked at native JS approach for a while- https://github.com/SpeciesFileGroup/svg-detailer/ https://github.com/SpeciesFileGroup/svg-detailer/. It definitely needs some code cleanup prior to production readiness, but it illustrates our needs/thought process.

harrygeez 6y ago

This is amazing! I've been handwriting some simple SVGs and this makes that so much simpler. I like how this goes down pixel-level accuracy that provides the simplicity I like and exposes semantics that are familiar to programmers such as path commands. Tools like Sketch are a little intimidating to start learning and I'm not even sure if they expose things like path commands.

chrismorgan 6y ago

This looks very good, especially as a teaching tool. Writing and minifying SVG by hand (including path data) is a hobby of mine. I’m pleased to see that the minification doesn’t put a space after the “0” or “1” of large-arc-flag and sweep-flag; historically I’ve found most minification tools doing so, and even some tools failing to parse `a1 2 3 104 5` (arc: rx=1, ry=2, x-axis-rotation=3, large-arc-flag enabled, sweep-flag disabled, dx=4, dy=5). One missing optimisation is culling superfluous path commands. If you have two commands of the same type in a row, you don’t need to repeat the letter: `L1 2L-3 4` can become just `L1 2-3 4`; also, after the initial M or m command, it switches to L or l automatically, so in `M1 2L-3 4` the L could be removed. An area I’d really like to see more work in (in SVG tooling in general) is path simplification/minification. In automated tools I’ve only seen rounding to a fixed number of decimal places, which is what this tool is offering, and which is terrible: some decimal places are far more significant than others, and indeed some points could be happily dropped, and rounding everything is not always the correct behaviour for fidelity. Instead of “two decimal places”, I’d like to see things like “accurate to within one pixel in any given direction”, which I reckon will normally compress better for a given quality level. There’s also the approach taken by Inkscape’s path simplification, which chooses a completely new set of points and curves that approximate the current values, but this harms the accuracy of the path and isn’t flexible enough (you run it in discrete steps, rather than there being a continuous slider or the ability to simplify some sections harder than others, whether automatically for best accuracy or manually).

edent 6y ago
If you're interested in minifying SVGs by hand, we're creating SVG icons in under 1KB at https://github.com/edent/SuperTinyIcons/ https://github.com/edent/SuperTinyIcons/ We could do with some help on the accuracy of some of them :-)
- liquidise 6y ago
  Awesome project. So nice to see these logos collected in a place with attention to the underlying SVG detail. None of the garbage comments/ids/etc outputted by Adobe and Sketch.
- 6y ago

vishnuharidas 6y ago

Nice tool. I recommend adding an "clear" or "new" option where the users can clear the preset sword and start a new art.

chrismorgan 6y ago
The “Path” text area in the top left is fully reactive, so if you delete its contents the sword vanishes.
- vishnuharidas 6y ago
  True, I discovered that after playing with it for a while! But it can be hard for a new person (who's not aware of the SVG commands) to to and clear that text area to clear the canvas.

simlevesque 6y ago

that's a life saver. I edited them manually too many times to count and it would have been useful then.

callumprentice 6y ago

This is excellent. I am probably missing something obvious but how do I load an arbitrary SVG into this? Do I need to manually extract the PATH parts of the file ?

DIVx0 6y ago

This is real cool! My hobby is plotting (AxiDraw) generative art. I often want to hand tweak SVGs prior to plotting them. I often get frustrated with the heavy weight tools such as InkScape and Illustrator. This looks like just the thing I need. Looking forward to trying it out this weekend!

elwell 6y ago

Looks like a great alternative to Inkscape

swizy 6y ago
You're right - The few times I've used Inkscape to do something simple has always resulted in remoting into my PC to use Illustrator.

intrasight 6y ago

Cool. But weird interaction style - with having to hover over the vertical bar below the fields in order to change field to be editable. Curious why one would create fields that way.

fluxinflex 6y ago

Great tool, it reminds me of svg edit[0] 0 = https://svg-edit.github.io/svgedit/dist/editor/index.html https://svg-edit.github.io/svgedit/dist/editor/index.html

zw123456 6y ago

This will come in handy for doing quick CNC work. A lot simpler than inkscape or other similar tools especially if you just need to cut a few simple pieces. Thanks for sharing !

SoSoRoCoCo 6y ago
My thoughts exactly. Sometimes you need a quick SVG that is too complicated to do by hand but too simple for Inkscape.

skunkworker 6y ago

I like this tool a lot. As someone who learned modelling in Autodesk Inventor then had to re-learn in Maya, a tool like this could help to make the transition from a hard, grid based system to something much more artistic and flexible.

sjbrown 6y ago

I love this. I'm too often guessing and doing trial-and-error when trying to get SVG paths juuuust right for my SVG-based virtual tabletop project.

deleted 6y ago

[deleted]

c-smile 6y ago

Very cool! Especially for the Sciter (and now Sciter.JS [1]) where we can use SVG paths directly in CSS as vector images: input.radio { background-image: url(path: M 4 8 L 10 1 L 13 0); background-size: 1em; stroke: black; stroke-width: 3px; } More details are here: https://sciter.com/lightweight-inline-vector-images-in-sciter/ https://sciter.com/lightweight-inline-vector-images-in-scite... [1] Sciter.JS preview: https://github.com/c-smile/sciter-js-sdk https://github.com/c-smile/sciter-js-sdk

emmanueloga_ 6y ago
Seeing this reminds me of the question: "why do we have an <img> element? Why not an <icon> element? Or an <include> element?" [1] Back in the olden times shipping a feature like the `url(path:)` above was enough to have it become a defacto standard! Meta: link [1] uses text-fragments [2] that seem super useful to me but apparently are not implemented by Firefox (yet!) 1: https://diveinto.html5doctor.com/past.html#:~:text=original%20question:%20why%20do%20we%20have%20an%20%3Cimg%3E%20element https://diveinto.html5doctor.com/past.html#:~:text=original%... 2: https://wicg.github.io/scroll-to-text-fragment/ https://wicg.github.io/scroll-to-text-fragment/
- c-smile 6y ago
  Well, we have plenty of images already: <img>, <picture>, <figure>, <object>, <iframe> can be used for that purposes too. It is just unclear how <icon> is different from <img>. As of <include> (so called client side includes) Sciter has them [1] as they make sense in precisely desktop environments - when files included from local sources (synchronously). [1] <include> in Sciter: https://sciter.com/forums/topic/import-html-in-html/ https://sciter.com/forums/topic/import-html-in-html/

codazoda 6y ago

Checkout DotGrid for writing svg graphics too. I'm not involved with the project, just love the idea of small, energy efficient software. https://100r.co/site/dotgrid.html https://100r.co/site/dotgrid.html

sebmaynard 6y ago
Just fell down quite a rabbit hole exploring their site, some really lovely tools, and some fascinating writing
ddoice 6y ago
What a beautiful piece of code and UI!

toufka 6y ago

Is there a library out there that allows you to make some of these manipulations in code? Like: translateX(svg, 10px), scale(svg, 10%), ConvertToRelative(svg), AutoBounds(svg), etc. There are many that allow you to generate an svg, but it's been hard to find those that allow you to manipulate an existing svg.

yqnn 6y ago
You can copy 'svg.ts' and 'svg-parser.ts', from here: https://github.com/Yqnn/svg-path-editor/tree/master/src/app https://github.com/Yqnn/svg-path-editor/tree/master/src/app It's what's used internally by the tool. const path = new Svg('M 0 0 L 1 1'); path.translate(1, 2); // Translates (x:1pt , y:2pt) path.scale(2, 3); // Scales (x:200%, y:300%) path.setRelative(true); // Converts the path to use only relative commands path.asString(); // Export the path with no minification path.asString(1, true); // Export the path with 4 decimals, and minification I wanted to publish them separately on npm, but didn't had time to do it :)
- toufka 6y ago
  Very cool! Thanks!

r00tanon 6y ago

Very cool. Although I prefer Inkscape, and it handles SVG nicely.

SiVal 6y ago

How is the pan-zoom implemented in this? It's nicely done.

yqnn 6y ago
Using TouchEvents, and a bit of basic geometry. It's here: https://github.com/Yqnn/svg-path-editor/blob/master/src/app/canvas/canvas.component.ts#L258 https://github.com/Yqnn/svg-path-editor/blob/master/src/app/...

nashashmi 6y ago

How does this compare to svg edit.

deleted 6y ago

[deleted]

deleted 6y ago

[deleted]

cyral 6y ago

Very nice! I've needed an easy to use SVG editor for making simple icons before, especially with grid snapping, and wasn't able to find anything like this.

bellwether 6y ago

Love this!!

bosuanzi 6y ago

Nice cool

nihakue 6y ago

Unbelievable. I just wrapped up my first svg-heavy project. Something like this would have been an invaluable learning tool. I ended up writing a lot of SVG by hand, and mostly through trial and error. Looks great, though :P

anderspitman 6y ago

Is there such a thing as SVG but where you can define a subshape and reuse it elsewhere in the file?

Silhouette 6y ago
Perhaps you're looking for <defs> and <use> elements?
- anderspitman 6y ago
  That looks like the ticket, thanks! It's very embarrassing that I didn't know about this before.
  - ygra 6y ago
    The main drawback for those things is that you cannot parameterize them, which is a bummer if you've created a shape that you might want to vary in ways that a transform cannot easily do.
    - anderspitman 6y ago
      Seems like you can get pretty far with CSS variables though, yeah? Do you have a good example of something common that can't be accomplished?
      - ygra 6y ago
        For styling purposes, yes, CSS allows a lot and things like currentColor enable you to at least have colors and styling dynamic when instancing symbols. But things like parametric shapes don't work without scripting, which is a bummer, since in many other places SVG is very amenable to handwriting with a lot of cool features. Just not with a lot of abstraction options.