Free movies

1. Svg Ide

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.

Janvas uses the standard SVG (Scalable Vector Graphics) format. This means that a file created with Janvas can be opened by any web browser and by the many applications that support this standard for the web and for letterpress printing. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more. Inject life into your SVG With a rich animation library and easy event handing, Snap.svg lets you bring your SVG to life. Free SVG converter Need to convert a picture to SVG format? Picsvg is a free online converter that can convert an image to a SVG file. You can upload an image file (jpg,gif,png) up to 4 Mb, then you can select effects to enhance the SVG image result. GLIPS Graffiti Editor is yet another free open source SVG editor software for Windows, Mac, and Linux. It is a Java based software that comes in a portable package that can be used without installation.

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

• 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

Cautions

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

Thanks

Svg Ide

The default path taken from game-icons.net