aydos.com

SVG Path Editor

Optimization focused SVG Path editor

Import SVG Path

Enter only one svg's path-d value

Input Size: 0

Export SVG Path


Output (Path) Size: 0

Scale

Enter "unit from" and "unit to"
If you want to convert viewbox from "0 0 20 20" to "0 0 128 128" enter 20 and 128
If you want to double the viewbox enter 1 and 2
If you want half of the viewbox enter 1 and 0.5 (or 2 and 1)

Options

viewbox
move factor
round digits
analyse distance
Input Size: 0
Output Size: 0


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?

Import

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.

ViewBox

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

Centralize

You can centralize the path within the visible viewBox. You can click Move to Center button in the Options menu or press Shift + C.

Scale

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.

Move

You can move the path with mouse or Ctrl+Arrows. If you use keyboard "move factor" setting is used for each stroke.

Zoom

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

Export

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

Analyse

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.

Import Text

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.

Line Numbers

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.

Break Apart

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.

Keyboard Shortcuts

Cautions

Thanks

The default path taken from game-icons.net