yqnn / svg-path-editor Goto Github PK

Your tool is mentioned by SuperTinyIcons which in turn got some attention in Newsletters.

See edent/SuperTinyIcons#504
I used your editor to play with scale and precision, ended up with precision in the viewBox notation:

I wonder, would it be possible to do some calculations in your editor, see a list which scale settings make a smaller minified path.
Maybe even calculate which results overlap very well with the original.

Ever seen such a tool?

this path does not work in your tool:

M3 -1.48562e-06L0.113249 5L5.88675 5L3 -1.48562e-06Z

However it works as soon as you replace the two instances of -1.48562e-06 with -0.00000148562 .

M3 -0.00000148562L0.113249 5L5.88675 5L3 -0.00000148562Z

Hi,
When you zoom out too much, the grid disappears. For a large scale path, it will be useful to set the grid scale.

Hi, awesome tool!

I'm missing a horizontally/vertically flipping operation. Or maybe a rotation action (90°/180°/270° - I reckon other angles are much more diffcults)

Hi, first of all this is awesome work! Incredibly useful for editing paths, especially for creating/tweaking custom svg icons in my case. Hopefully with this issue i can help with a small improvement:

Currently, whenever editing the Path code in the top panel, the viewport Configuration updates itself automatically. While generally useful and an obvious default, this behavior is less desirable for me as i'd love the viewport to remain fixed at xy=0/0 and 24px height no matter what i do with the path. I find myself very frequently resetting the configuration and it's getting tedious.

Proposal: i would love it if the Configuration panel had a "lock" toggle icon which would prevent any subsequent automatic viewport configurations to be applied. It's debatable if it should also disable the input fields or not, i.e. also prevent manual updates while locked. Personally in my use-case i'd go with not, so manual changes would be allowed, only automatic ones prevented, but problem is then the functionality would be less obvious. Disabling the fields would make it crystal clear as to what the lock does, to any user.

Initially the toggle would be in the unlocked state, preserving the existing default behavior. Thus the lock would be an opt-in feature.

This lock would fit quite nicely in the existing Configuration panel, like this:

I could have a go at implementing this and submitting a pull request if you confirm that it's something you would consider integrating in the live version. Please let me know what you think :)

Seems like site is dead for some reason. can you confirm this?

While hovering over H/h and V/v nodes in the left COMMANDS panel onto their values to display the tooltip what each value means, the app displays y/dy and x/dx, but should be the other way around, i.e., x/dx and y/dy, respectively.

Hello there,

I was wondering if there was a way to convert multiple existing commands of the same type (e.g. L 100 200 L 300 400 -> Q ? ? ? ? Q ? ? ? ?) to another command of a different type.

I am currently working with an SVG path consisting of C's. However, I was hoping to try to convert all the C's into quadratic bezier curves at once instead of manually converting the commands one by one.

If there are any workarounds available, I am all ears.

Happy Halloween!

Regards,
Charlie

I'm trying to combine parts of 2 paths, but one is written in a clockwise order and the other in a counter/anti-clockwise order. I would love to be able to flip the order of the points with a button, which would probably fit well in the "Path operations" section.

https://github.com/krispo/svg-path-utils has an implementation of this that can probably be borrowed or used directly.

Hi, I absolutely LOVE this project!

I think it would be neat to include this link:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

to the Mozilla docs for SVG as they're super easy to read and understand, and a great reference for just about everything there. That way, if someone wants to learn more about what the commands mean, they can just click to open a new tab, rather than googling and stumbling around, which most won't bother to do anyway. You could also (or alternatively) include a simple modal for information on the different svg commands.

Just some ideas. I think right above "Bug reports & feedback" on the bottom left would be a great place to add it:

Also, you could change the link (or add a star icon) to say something about "star this project on GitHub" in case you'd like to get even more stars ⭐

Also, as someone else mentioned, cleaning up unused items / optimizing the SVG code feels like it would be do-able here, maybe not perfectly, but at least to improve the efficiency (not just file size, but also work to draw it)

Would you like to to it, please. It would be very helpful.

Hi, this is a great project, thanks for putting it together!

Currently, the first step I take when opening the editor is to add this bit of css using the browser inspector. It would be great to incorporate as a toggleable option.

.drawings path {
  fill: none !important;
}

Nice tool.

I wanted to get rid of the sword ⚔️ image and start fresh with a blank canvas, but couldn't find the most expected "new" or "clear" button. After walking around, I realized that I can clear the contents of the "PATH" window to clear the canvas.

It will be good to add a clear ❌ or new 📝 option where the users can easily clear the preset sword ⚔️ and start an empty canvas.

The reset viewbox functionality (as seen in download and reset zoom) doesn't work for my path:

m13 0c2 0 11 4 11 20 3 0 4-2 2-8 4 2 10 12 4 20 0 1 2 2 3 0 0 28-40 18-32-6 4-12 14-8 12-26z

Absolutely love this tool by the way 😄

Would be great to be able to undo operations, especially "delete".

I wish to edit this svg

<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.46088 12.8405L22.2354 9.06243C22.7542 8.95215 23.2956 9.05249 23.7405 9.34139L31.8394 14.6009C32.2842 14.8898 32.8256 14.9901 33.3445 14.8798L37.4249 14.0125C38.5053 13.7829 39.5674 14.4726 39.797 15.553L40.4207 18.4874C40.6504 19.5679 39.9607 20.6299 38.8803 20.8596L31.8654 22.3506C31.3466 22.4609 30.8052 22.3605 30.3603 22.0717L22.2614 16.8122C21.8165 16.5233 21.2751 16.4229 20.7563 16.5332L17.654 17.1926" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M43.5393 33.1596L25.7648 36.9377C25.246 37.048 24.7046 36.9476 24.2597 36.6587L16.1608 31.3992C15.7159 31.1103 15.1745 31.01 14.6557 31.1203L10.5753 31.9876C9.49486 32.2173 8.43282 31.5276 8.20317 30.4471L7.57943 27.5127C7.34978 26.4323 8.03947 25.3702 9.11991 25.1406L16.1348 23.6495C16.6536 23.5392 17.195 23.6396 17.6399 23.9285L25.7388 29.188C26.1836 29.4769 26.725 29.5772 27.2439 29.4669L30.3462 28.8075" stroke="#333" stroke-width="4" stroke-linecap="round"/></svg>

But it has 2 paths and i can only import one at a time and edit it

Is there a way i can import the svg with all paths at once and edit it nicely

PS: This is the only easiest tool I was able to find on whole internet for editing simple icons. Thanks for the project ❤️

Really nice tool! As a workaround for #21 I'm currently reworking all the points (removing extraneous points, turning l into h when they are almost horizontal, etc), but it's a bit heavy on the fingers at the moment. Would you consider adding shortcuts to simplify this? For instance (picked U & I since they seem fairly safe for web applications, are next to each other, and I is a vertical line):

• Ctrl-U: Convert to horizontal
• Ctrl-I: Convert to vertical
• Delete: Remove the selected point

Is there a way to select and move more than one point at a time?
I have Tried Shift+Click, but it doesn't seem to work.

BTW thanks for this great tool.

I'd like to be able to translate sets of paths across to different areas. For example, here's a sample Path:

M 474.2 161.7 c -16.1 -46.6 -46.7 -87.1 -91.3 -109.6 c -51 -25.7 -111 -28.1 -166.4 -19.3 c -49.8 8 -102.3 26 -139.6 61.2 c -19.6 18.5 -34.7 40.9 -42.7 66.8 c -8 26 -10.4 53.1 -12.1 80.1 c -0.1 1.1 -0.4 2 -1 2.7 c 0 0.2 0.1 0.5 0.1 0.8 c 0 52.9 -1.1 108.3 30.1 153.9 c 25.3 37.1 64.5 61.5 107.2 73.7 c 88 25.2 194.2 9.6 264.9 -50.8 c 74.1 -63.3 80.9 -172.3 50.8 -259.5 z z z m -320.6 -91.2 h 2 c 0.4 0 0.9 0 1.3 0.1 c 10.1 0.6 17.7 4 23.9 12.8 c 6.8 9.6 12.7 19.9 17.8 30.6 c 2.4 -3.3 5.3 -6.3 8.2 -9.3 c 5 -5.1 8.9 -10 12.3 -16.4 c 3 -5.7 6.2 -11.5 11.5 -15.4 c 0.2 -0.5 0.3 -1 0.5 -1.4 c 1.4 -4.1 5.6 -3.8 8.2 -1.5 c 3.4 0 6.8 0.7 10.3 0.4 c 1.8 -0.2 3.4 0.6 4.4 1.8 c 0.7 0.1 1.4 0.2 2.1 0.3 c 4.4 0.7 5.4 5.9 3.1 9 c -13.9 18.8 -28.4 38 -45.7 54 c -0.1 20.2 -0.7 40.4 -0.2 60.6 c 0.7 0.8 1.2 1.9 1.2 3.4 v 0.3 c 0.2 0.7 0.2 1.4 0 2.1 v 0.6 c 0 2.8 -1.9 5.9 -5.1 5.9 h -1 c -0.6 0 -1.1 -0.1 -1.6 -0.2 c -1.7 0.2 -3.5 0.2 -5.4 0.2 c -3.4 0 -7.7 0.7 -10.5 -1.7 c -2.7 -2.3 -2.8 -5.7 -3.2 -9 c -0.8 -6.4 -0.6 -12.7 -0.4 -19.1 c 0.3 -9.4 -0.2 -18.6 -0.6 -27.9 c -0.2 -3.7 -0.5 -7.9 -0.3 -12.1 c -3.3 -6.5 -7.8 -12.3 -12.1 -18.1 c -3.3 -4.6 -6.5 -9.2 -10.1 -13.6 c -6.4 -7.8 -15.3 -17.5 -14.7 -28.3 m 4.1 -8.1 z z

And I'm trying to move the Y part to the center. You can see this operation is difficult as I need to move individual units. It would be nice to have a select logic to drag a box to select a bunch of paths and then group them and then translate the group across.

Is it possible to use a URL query string to encode a path, which then opens in the editor?

This way any path can be opened in the web editor from any location.

Path's can then also be shared.

For large paths, gzip could also be used (path_gzip=x) (https://www.typescriptlang.org/play does this).

Thanks.

Would be great if the current path could be saved (localStorage) with an explicit save button.

You can then easily do multiple test edits, and with one F5 reload the last (best) state.

Or allow for more (named/numbered) state saves, but that is more development.

add a flip option. flip horizontal or vertcal.

While using this I thought of 2 possible nice to have's additions:

1. Export option, with options/selections for things like:

• Export to single path/multiple paths (break on Z or MZ)
• Export as JS array (same, break on Z/MZ but add each to an array's index)
  -- Others not as cool but useful: Include SVG header, viewbox, Id/Class

2. Drag and drop for the whole path (and better coordinate calculations on mouse)

P.S:
This is great stuff, thanks for sharing! Helped me a lot today.
I could try to work on some of those and add PRs if you're OK with that.
Cheers!

I'm workin on a HTML Designer Webcomponent (https://node-projects.github.io/web-component-designer-demo/index.html), wich is developed in with MIT Licence. Am I allowed to use parts of your Framework in my Designer? Even if it's another Licence?
I don't like to add it as a Dependency, cause the Designer should be mostly dependecy less, so anyone using it get no complications with externel javascrip libs

Great tool!

But I still have to post-process your output.

Could you take out the spaces from the processed data

Your output:

m 555 730 h -99 a 10 10 0 0 0 0 21 h 99 a 10 10 0 0 0 0 -21 z m 0 30 h -99 a 10 10 0 1 0 0 21 h 99 a 10 10 0 0 0 0 -21 z m

What you want in SVG:

m555 730h-99a10 10 0 0 0 0 21h99a10 10 0 0 0 0-21zm0 30h-99a10 10 0 1 0 0 21h99a10 10 0 0 0 0-21zm

This would be useful when debugging points.

The "Translate" operation only works in Absolute mode.

If you're in Relative mode, and choose to translate by e.g., (1,1), it does nothing. Is there a reason why it shouldn't work?

I copied/pasted the path from a problem on StackOverflow

M31.9004,21.79 L24.9004,29.79 C24.6704,30.05 24.3494,30.2 24.0004,30.2 C23.6504,30.2 23.3304,30.05 23.0994,29.79 L16.0994,21.79 C15.6604,21.29 15.7104,20.53 16.2104,20.1 C16.7104,19.66 17.4694,19.71 17.9004,20.21 L24.0004,27.18 L30.0994,20.21 C30.5304,19.71 31.2904,19.66 31.7904,20.1 C32.2904,20.53 32.3394,21.29 31.9004,21.79 M24.0004,5 C13.5064,5 5.0004,13.507 5.0004

Its an incorrect path; but the editor stores it in localStorage and doesn't built the editor UI on page Reload

only way out now is to clear the localStorage cache

Hi, absolutely love your tool.

Adding reflect horizontal / vertical, as well as maybe rotate would probably be helpful for a number of users.

You could add it under "path operations" with scale and translate, and then you'd have just about all of the basics.

I got the idea for adding this as a VS Code extension, as it could be a nice IDE workflow supplement whenever opening up an SVG in VS Code.

Perhaps opening a SVG with this svg-path-editor would open up a webview to the side and let us edit them directly in place, without moving between programs or moving around files.

A good start on how to create one is right here: https://code.visualstudio.com/api/extension-guides/webview

Example of a webview extension

I just don't have time to delve into this and do it right now.

Anyone up for the task?

The keyboard doesn't work on an Android phone

Hello, thank you for creating this amazing tool, which I have been wanting for a long time! I'm glad I found it.
FYI I also found a similar tool here:

https://github.com/mathieudutour/svg-path-visualizer

Cheers

Hi, great work !
importing background image works fine.
On the other hand, it becomes impossible to add or modify the existing path.
It seems that the image is in the foreground and the path in the background.

best regards

Being able to put an image underneath the current path could make this great for tracing paths, ideally the position and scale could be controlled

It would be nice if the options you set for export (e.g. stroke core/width) were saved between exports, if not sessions.

I'm not sure if its just me or happens to everyone but it takes around 5 minutes for the editor (https://yqnn.github.io/svg-path-editor/) to even start loading. It didn't used to be like this. Can this be resolved?

From Windows 10 settings my mouse wheel has 7 rows per click.

I think the scroll wheel zoom is too sensitive, it should ignore that setting. E.g.

Take this:

I flip scroll wheel only once, and I have no idea where I am after that:

It's possible to ignore mouse wheel setting and use singe clicks, I suggest you find a way.

Cool project!

Hi Yann, a suggestion - it would be nice to have shareable urls. While this could of course be extended to all parameters, having just the path would already be extremely useful for collaborating more easily.

So opening an url like this:
https://yqnn.github.io/svg-path-editor?path=M 13 0 L 13 1 L 13 2 C 14 5 12 12 8 14 C 6 12 2 12 0 16 C -3 22 5 28 10 23 C 12 21 12 16 9 15 C 12 13 15 8 15 3 C 16 4 20 9 19 14 C 16 13 13 15 13 18 C 13 27 25 27 25 18 C 25 15 22 13 20 14 C 21 9 18 3 15 1 C 15 1 15 0 15 0 C 15 0 14 0 13 0 Z

... would automatically load the path (in this case, it's a cherry).

At the same time, editing the path would automatically update the url (always kept in sync).

If you feel this feature aligns with your goals for the SVG Path Editor, I wouldn't mind trying to make a pull request at some point or simply provide some tips for your own implementation

As someone who really likes to work with small integers in SVG, this would help a ton.

Is it possible to add Rotate path operation?

Request to add further minifying to the minify function.

First of all, this is a great tool, thank you for making it.

From looking at the code it seems that minifying is done on Line 510 in file 'svg.ts':
str.replace(/^([a-z]) /i, '$1').replace(' -', '-');

I would like to remove leading zero's on floats and leading whitespace before a negative number by changing the regex.
str.replace(/ ?([a-z]) /gmi, '$1').replace(/ -/gmi, '-').replace(/-0\./gmi, '-.');

Example

Current Path of Minified Sword Logo
M4 8l6-7l3-1l-1 3l-7 6c1 1 1 2 2 1c0 1 1 2 0 2a1.42 1.42 0 01-1 1a5 5 0 00-2-3q-0.5-0.1 -0.5 0.5t-1.5 1.3t-0.8-0.8t1.3-1.5t0.5-0.5a5 5 90 00-3-2a1.42 1.42 0 011-1c0-1 1 0 2 0c-1 1 0 1 1 2m6-7l0 2l2 0l-1.8-0.2l-0.2-1.8

Path of Minified Sword Logo after additional minifying
M4 8l6-7l3-1l-1 3l-7 6c1 1 1 2 2 1c0 1 1 2 0 2a1.42 1.42 0 01-1 1a5 5 0 00-2-3q-.5-.1-.5 .5t-1.5 1.3t-.8-.8t1.3-1.5t0.5-.5a5 5 90 00-3-2a1.42 1.42 0 011-1c0-1 1 0 2 0c-1 1 0 1 1 2m6-7l0 2l2 0l-1.8-.2l-.2-1.8

so i have google translate extension on my chrome and every time i double click on the board its selecting the values

this problem easily fixable by using css user-select prop!

tnx for this grate tool ❤

Hello everyone,

Thanks for this great tool!

A nice feature to add would be the variables that will allow you to easily change the appearance of a path just by changing their
values.

An even more advanced feature would be the ability to define the value of a parameter based on calculation with other parameters.

Here is an example of use

Variables

Path

M 0 0 L 0 $size L $size $size Z

The interpolation of the parameters could be done in another way like size or ${size} with syntax highlighting.

I've been slowly working on a small project and would love for there to be an easy way to do a side-by-side comparison of multiple versions. Currently I have a notepad and copy each in, exporting it, then placing it on a sheet in Inkscape.

Uncertain the best way to go about this. One thought was to have a way to "pin" a version, which would add it to a comparison list. Whenever you want to compare, there's a button that displays all of the versions using some sort of masonry with scroll bars and symbols to be able to remove items.

Request for feature:

I can drag and drop svg icon file and editor will extract all paths from svg, show them in dialog like this

Provide ability to split a command into two, by inserting a new point in the middle.
This is useful when trying to match two path commands for morphing

The aspect ratio is fixed to about 4:2.9. Since there's an input for the viewport width and height it should be adjustable or preserving aspect ratio is toggleable.

I would like rotate the path in 2 ways:

1. change the order from clockwise to anticlockwise (so 1.2.3 become 3.2.1)
2. change the first element (so 1.2.3 become 2.3.1)

I hope I have explained it well, perhaps it would be worth adding some images