Svg Editor can load, edit and write the SVG vector graphics data online or offline.
Here's the link to the summary of SVG. http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
Unlike the bitmap images such as jpeg or ping, SVG can re-edit the edited graphics data again and again. That enables users to share the same graphics data for editing with many other users online.

Basics

  • Click the hand shaped icon or press space key to drag the screen.
  • Scroll the slider on top or use mouse wheel to zoom in / out the screen.
  • To select the item, just click the item.
  • To select multiple items, click items with [Shift] key pressed
  • Drag the icons on a selected item to scale, rotate it.
  • To edit the item, just double-click the item.
  • The editing point will be shown when in editing mode.
  • The editing handles will appear when a editing point clicked.
  • Double-clicking a editing point will change editing mode.
  • To add a new editing point, double-click on the edge of the item.
  • An open path will be closed by moving the first editing point to the last.
  • Most of the menu items are also available from the right click menu.
  • If an item is selected, a panel will appear on the right. The item's styles, such as color, can be changed from there.

Tool pallete

draw Draw

Draw a line by pressing the mouse button and move the mouse around on the screen.

draw Path

Click the screen to create a point. Another click will create a line , click several times to make a shape. While mouse pressed, keep pressing the mouse button and moving the mouse a bit makes a control point. Double-clicking or clicking on the first point will end the drawing.

draw Polygon

Click the screen to create a point. Another click will create a line , click several times to make a shape. Double-clicking or clicking on the first point will end the drawing. To edit the point, choose [ Convert to Path ] from the menu.

draw Polyline

Click the screen to create a point. Another click will create a line , click several times to make a shape. Double-clicking will end the drawing. To edit points, choose [ Convert to Path ] from the menu.

draw Circle

Moving the mouse while pressing the mouse button will create a circle with clicked point as a cener. To edit points, choose [ Convert to Path ] from the menu.

draw Ellipse

Moving the mouse while pressing the mouse button will create a ellipse with clicked point as a cener. To edit points, choose [ Convert to Path ] from the menu.

draw Rectangle

Moving the mouse while pressing the mouse button will create a rectangle. To edit points, choose [ Convert to Path ] from the menu.

draw Line

Moving the mouse while pressing the mouse button will create a line . To edit points, choose [ Convert to Path ] from the menu.

draw Image

Moving the mouse while pressing the mouse button to make a image size. Type the url for the image( such as jpg, png ) and load the image from the url.

draw Text

Clicking on the screen will display the text. Double-click the text for editing the text.

draw Code Panel

This will display SVG code panel. Capable of updating the graphics by changing the code.

File

Reset

Bringing back the originally loaded image.

New

Create a new blank document. Set the width and height from the window.

Save

Save the current graphics to the server. The saved graphics will be shared on the gallery.

Edit

Undo ( Beta )

Undo editing. ( not fully implemented. sometimes not working. )

Redo ( Beta )

Redo editing. ( not fully implemented. sometimes not working. )

Copy Item

Copy selected item.

Paste Item

Paste last copied item on the current layer. ( The item will be pasted where the originally copied item was at. )

Copy Style

Copy the style of the slected item( color, opacity , etc... )

Paste Style

Paste the copied style to the selected item.

Item

Group

Group the selected items. Grouped item can be transformed as one item. Double-click a grouped item to edit the items inside a grouped item.

UnGroup

Ungroup a grouped items so that each items will be separated.

Bring to Front

Bring the selected item on top of the other items when overlaped.

Send to Back

Send the selected item to the back the other items when overlaped.

Set Clipping Path ( Beta )

Select two items first. This will clip the one item with the other. ( Baggy. Editing an item after set as clipping path may cause a problem. )

Remove Clipping Path ( Beta )

Remove the cliped item from the item with clipping path applied.

Outline / Normal

Toggle outline display and normal( Colored ) display. Outline is useful for finding the item behind the item.

Delete item

Delete the selected item. ( also works with Delete key )

Path

Convert to Path

Convert Polygon, Polyline, Circle, Ellipse, Rect, Line to Path. Path has more editing capability, such as adding / romoving points etc...

Mix Path

Select two Path items first. The last point of the first Path and the first point of the next Path will be joined. If either of a path is closed, it will be a opend path. To mix Polygon, Polyline, Circle, Ellipse, Rect, Line, choose [ Convert to Path ] first.

Delete Edit Point

Click the point on a path first. The point will be deleted. To add a point, double-click on the edge of an item.

Delete Control Point

Click the point on a path first. Control handles on the point will be removed if any. To add handles, double-click on the point.