SVG Path Editor
Optimization focused SVG Path editor
SVG Path Editor lets you edit and optimize SVG's path element. It takes only one path element. You can edit viewport, scale, flip, rotate and edit path segments. With analyse button you can find unnecessary segments and delete them.
You can optimize the default image from 1356 bytes to 610~ bytes.
In this application, github.com/aydos/svgpath is used.
How to Use?
Firstly import a path string. Its is the "d" attribute of the path.
Make Absolute, Relative
You can make all segments absolute or relative. Lessen used characters is good for zip algorithm.
Round to Integers
You can round all numbers to integer. Or use "round digit" on Options menu to round to suitable decimal point.
Flip Vertical, Flip horizontal
With buttons FV and FH you can flip vertically and horizontally
Rotate clockwise, counterclockwise
With buttons CW and CC you can rotate 5 degrees in clockwise or counterclockwise directions.
You need to enter a suitable viewbox setting in the Options menu. Default value is "0 0 512 512". If you dont see your SVG, set this value to an appropriate one (see Centralize also).
You can centralize the path within the visible viewBox. You can click Move to Center button in the Options menu or press Shift + C.
You can change scale of the path. For example, you have a SVG in "0 0 24 24" and you need to scale it to "0 0 512 512", then enter 24 and 512 in the boxes on Options menu. You can use Shift + Z, Shift + W, Shift + Q, Shift + W keys also.
You can move the path with mouse or Ctrl+Arrows. If you use keyboard "move factor" setting is used for each stroke.
You can zoom in with Shift + Numpad+ and zoom out with Shift + Numpad-. Zooming changes the viewBox, not the path. You can also move the viewBox with Shift + Arrows
Get your final optimized path string with Export SVG Path button. There are some export options, for break apart see below Break Apart section.
You can download the result with Save SVG File button.
Fill vs Stroke View
You can show SVG with Fill mode or Sroke mode via Shift + F.
Segments Coordinate View
You can show segments coordinates via Shift + S. There are four modes: (1) No segments shown (2) Segments coordinates shown (default mode) (3) Segments and their curve coordinates shown, (4) Only M segments shown. When you mouse over these segments (small rectangles), segment indice will shown below coordinates. If segment is a M segment, the order is shown also, this will help on break apart segments (see Export).
You can perform some analysis via Analyse button, mostly line analysis.
Some removable segments will be removed.
And program will detect segments which are too close (closer than analyse distance on Options menu) to each other. These segments marked with # D in the text area. You can check and make required changes or delete segments in the text area. Then, click Import Text button to accept these changes.
In the text area you can edit the path, you can add segments also. Clicking Import Text button will import these changes. Comments idenfied by # character.
In some cases you may need Import Text after Analyse.
You can on/off showing line numbers in text area via Shift + N. You can click Import Text in both cases. Line numbers shows the segment indice, and when you mouse over segments (small rectangles on SVG), segment indice will shown below coordinates. So you can learn which segment is on which line.
On the Export menu you can break apart the path into paths begining with M and ending with Z segments. Some times you want to control where to break. In those cases you can use the Break with MZZ option. To do so you need two consequtive Z segments. In the text area and the second Z segment and press Import Text.
You may need change the M segment from absolute to relative or vice versa. On M segments line both coordinates shown, one in comment. You can alter the line and press Import Text.
- Ctrl + Arrows: Move SVG
- Shift + S: Change segment show mode
- Shift + F: Change SVG fill mode
- Shift + C: Center SVG into current viewbox
- Shift + Z: Scale SVG with 0.90 ratio (smaller svg)
- Shift + Q: Scale SVG with 0.99 ratio (smaller svg)
- Shift + X: Scale SVG with 1.10 ratio (larger svg)
- Shift + W: Scale SVG with 1.01 ratio (larger svg)
- Shift + Arrows: Move viewbox
- Shift + Numpad+: Zoom in viewbox (smaller viewbox)
- Shift + Numpad-: Zoom out viewbox (larger viewbox)
- Shift + N: Show line numbers in text area
- Always be aware viewbox setting in the options menu. Don't forget: viewBox = min-x min-y width height
- There is no UNDO. Take backups.
- Do analysis with all absolute segments.
The default path taken from game-icons.net