SVG-Editor - Help

About

SVG-Editor is an on-line SVG drawing tool aimed at the SVG developer. SVG-Editor only edits SVG; it does not add other markup to a SVG document. It provides precise graphical control of the SVG elements and their properties.

SVG-Editor is a true WYSIWYG (bugs 'n' all) editor and uses a browser's native SVG renderer (or Adobe SVG-Viewer with IE 8).

SVG-Editor can create SVG documents from scratch but also provides for the uploading of existing documents for editing. Markup of an uploaded SVG document that is not edited by SVG Editor will be left intact including any javascript or animation. Thus SVG-Editor can be used to graphically edit the graphical parts of an SVG application while a favourite text editor can be used to develop interaction and animation.

SVG-Editor allows creation of animation-friendly SVG by providing precise and clear control of transformations around user defined shape origins.

Bronze, Silver and Gold user levels

A prospective user can audition SVG-Editor at Bronze user level which bypasses the need to give login details and allows the user to create up to 10 SVG documents stored against their IP address for 3 days. Creating a user account and logging in at Silver level allows the user to save and store SVG documents against their username, whilst upgrading to a Gold-level subscription allows access to addtional tools, to upload SVG & XHTML 5 documents for editing, and the facility to revert to any of the last ten saved copies of the document.

To Begin

Click on the"Try" button to audition the SVG-Editor or if you already have an account click login and enter your username and password first. On opening SVG-Editor the browser will display a large document area with the icons of the various tools to be selected in the top right-hand margin and with document info at the bottom of the right-hand margin. Property information of selected, shapes is entered and displayed at the bottom left of the screen. Note that the selected shape type to the left of ID will change dependent on the shape(s) currently selected, e.g. ellipse, group, multi, etc. Clicking on the underlined shape type will open a dialogue in the bottom right of the screen where additional property information may be edited.

Screen shot

Bold letters indicate keyboard shortcuts that can be used as an alternative to clicking on the command upon the screen.

Underlined text can be clicked upon to open a dialogue in the bottom right of the screen where additional property information can be edited.

Operational Tools

Select shapes Select shapes - click on a shape to select the shape. Press the keyboard <ctrl> key whilst clicking on a shape to select multiple shapes or alternatively press the keyboard <shift> key whilst draging the cursor over a selection of shapes. Note some browsers don't support use of the <ctrl> and <shift> keys so check boxes are provided in the bottom right of the screen to duplicate these functions.
Repeated clicking upon a shape will rotate through the hierarchy of the shape's grouping from the selected shape only, to the shape's group(s) up to the shape's layer and back to just the selected shape.

Select shapes - allows transformations to be performed on the shape using the diamond shapes centred on each side of the shape to scale horizontally and vertically, and also at the corners of the shape to rotate and the offset in-between those on the centre of the sides and the corners to skew the shape. Note that properties can also be entered/edited within the Shape dialogue. The blue control point (the default for the Secondary string colour as selected in the Grid properties) is origin and can be moved to allow rotation from different position; this is especially useful in animation applications. Translate (the diamond in the centre) moves the whole selected shape.

Select point Select point - modify shapes and groups with this tool. Upon applying Select point to an element, a number of control points (depending on the shape selected) will be displayed. These control points are added to allow the user to modify the defining dimension of the shape that were specified when the shape was originally drawn. The blue control point is generally the start position while the red control point generally controls the size of the shape (these are the default settings for the Primary and Secondary string colour defined in the Grid properties). The property values in the Shape dialogue will move accordingly as modifications are made - alternatively transformations can be affected by entering the data into this dialogue box.

Delete shapes Delete shapes - will delete selected shape. Whilst Delete shapes is selected, each click made on a shape will be deleted until Delete shapes is un-selected.

Magnify drawing Magnify drawing - to magnify the drawing, position and drag the cursor over the area where magnification is required. Double click on the Scale attribute to zoom out to default screen size.

Move drawing Move drawing - moves the whole page - position the cursor at any point on the page and drag to where you'd like it to move.

Cut to clipboard Cut to clipboard   Copy to clipboard Copy to clipboard   Paste from clipboard Paste from clipboard

Undo Undo last edit   Redo Redo last edit

Drawing Shapes

Draw rectangle Draw rectangle position the cursor on the drawing pane and drag to the size of the rectangle required.

Draw circle Draw circle position the cursor on the drawing pane and drag to the size of the circle required.

Draw ellipse Draw ellipse position the cursor on the drawing pane and drag to the size of the ellipse required.

Draw polygon Draw polygon  - draws a shape made up of straight line sections. Position the cursor on the drawing pane and click at the start corner of the shape, then click at each subsequent corner of the shape. To finish move the cursor out of the drawing pane and the finished shape will be highlighted as selected.

Draw straight line Draw straight line - position the cursor on the drawing pane and drag in the direction and for the length required.

Draw polyline Draw polyline - draws a path made up of straight line sections. Position the cursor on the drawing pane and click at the start of the path, then click at the end of each successive section of the path. To finish move the cursor out of the drawing pane and the finished shape will be highlighted as selected.

Draw complex path Draw complex path - draws a complex path made up of multiple different lines and curves (see Path Command dialogue that opens at bottom right of screen). Options are:

All lines and curve types are as described in the SVG specification.

On selecting Draw complex path an absolute move is created to the first position clicked on the drawing pane. A subsequent click on the drawing pane will add an absolute Bézier curve with two control points from the previous position by default but by typing the letter highlighted in the Path command dialogue first it is posible to create any other of the line types with appropriate control points. Typing the uppercase letter will select absolute positioning whilst typing the lowercase letter will select relative positioning.
As each section of the complex path is drawn, the user is automatically taken to the next line section allowing creation of a complex curve.
By typing the letter Z of the Clozand clicking anywhere on the drawing pane the path can be closed.

Arc draws an arc with two control points. The red x/y control point is relative to the centre point and allows for four different arcs depending on which of the four quadrants the control point is in. Moving the red cntrol point away from the centre specifies the x and y radius of the arc. The blue control point controls the rotation attribute. To draw/modify an arc, move the red control point within the four quadrants to select which of the four arc types that is required, move the red control point away from the centre point to select the radii of the arc and then move the blue control point to get rotation. Note these colours are the default settings for the Primary and Secondary string colour defined in the Grid properties).

Draw text Draw text - creates text. Click at start point and drag for the length required then enter text in the Text dialogue that opens in the bottom right of the screen. Other properties can also be set here as per the SVG specification.

Add text span Add text span - allows the user to create a piece of subtext relative to the parent text (e.g. subscript, superscript). To create, select the relevant piece of parent text, then click on Add text span and enter additional text. Additonal properties can be set in the Tspan dialogue that opens in the bottom right of the screen.

Add text path Add text path - allows the user to create a piece of text that follows a path. To create, select the relevant piece of parent text, then click on Add text path and enter additional text. The reference to the path and additonal properties can be set in the TextPath dialogue that opens in the bottom right of the screen.

When  item(s) are selected, be it a shape, text or a group, clicking on the selection type (the underlined element name to the left of ID) opens a dialogue allowing the user to edit specific properties as follows:

Layers

The term Layer is used to mean a group of the root of the document that has an ID or am invisible layer of referenced shapes (defs). The Layer drop-down menu allows the active layer to be selected. The blank entry in the Layer drop-down menu is the root element of the document.

New layer - from the Layer drop-down menu - allows the user to create new layers. Selection of a layer will display all layers that have not been hidden or set to display none.

New definition layer - from the Layer drop-down menu - allows the user to create invisible layers used to define elements that are used or re-used elsewhere. Selection of a defs layer will only display that layer.

Layer opens the Document tree dialogue giving access to the structure of the document; shapes can be selected from here and clicking on the arrows at the bottom of the Document tree dialogue allows re-ordering of the shapes.

Other Commands

Grid applies a grid over the document with the following properties:

The primary and secondary string colours are used to distinguish betwen different types of control point when drawing and modifying shapes and showing the selection.

Snap - click the checkbox to snap shapes to user-specified x and y divisions entered via the Snap dialogue (accessible by clicking on the underlined text).

Document previews the last saved version of the document.

Importing Images

Import image - allows the import of JPG, GIF, PNG images already uploaded anywhere on the World Wide Web. Click the cursor on the drawing pane where the image is required, drag to specify the size of the required image and then enter the image URL in the Image dialogue that opens at bottom right of screen.

Groups

Group shapes Group shapes   Ungroup shapes

Selected shape(s) can be placed in a group by using Group shapes.  Once grouped, properties and transformations can be applied to the whole group.

Re-use Existing Shapes

Re-use existing shapes Re-use existing shapes - references existing shapes and groups and allows them to be re-used elsewhere in the document. The ID must be specified on the selection to be re-used. Click on the icon to select the shape to be re-used, then click on the drawing pane where the shape wants to be re-used.

Hyperlinks

Make hyperlink Make hyperlink - select shapes that will form the anchor for the link and enter URL details into the dialogue that opens in bottom right of screen. The hyperlink will only be effective on saving and can be verified by previewing the live document by clicking on Document (bottom right margin).

Patterns, Markers, Clipping and Masking - Gold Users

Make pattern Make pattern - Selected shapes(s) in a defs layer are turned into a pattern which can then be selected as the url fill or stroke of any shape.

Create marker Make marker - Selected shapes(s) in a defs layer are turned into a marker which can then be selected as a marker on any line or path. The start, mid, or end marker is selected in the Marker dialogue linked from the line or path's Shape dialogue.

Create clip path Make clipPath - Selected shapes(s) in a defs layer are turned into a clipPath which can then be selected from the 'Clipping, Masking & Opacity' dialogue linked from a shape's fill or stroke opacity property.

Create mask Make mask - Selected shapes(s) in a defs layer are turned into a mask which can then be selected from the 'Clipping, Masking & Opacity' dialogue linked from a shape's fill or stroke opacity property.

Gradients and Filters - Gold Users

Create linear gradient Create linear gradient - position the cursor in a defs drawing pane and drag in the direction of a linear gradient. An initial stop at each end of the stroke can be edited with the Select shapes tool and moved with the Select point tool. For objectBoundingBox drag across the whole defs drawing pane.

Create radial gradient Create radial gradient - position the cursor in a defs drawing pane and drag to the size of the radial gradient. To move the focus from the default centre, use the Shape dialogue and then the Select point tool. The initial stops at the centre and circumference of the radial can be edited with the Select shapes tool and moved with the Select point tool. For objectBoundingBox drag across the whole defs drawing pane.

Add gradient stop Add gradient stop - A new stop will be added to selected gradient definitions. Use the Select point tool to move the stop. Use the Select point tool and Shape dialogue to change the stop's properties.

Create filter Create filter - position the cursor in a defs drawing pane and drag to define the filter effects region. For objectBoundingBox drag across the whole defs drawing pane.
An initial feColorMatrix filter effect will be created which can be edited with the Shape dialogue. A yellow circle, red square and blue triangle shown in the filter effects region allow the effects of the filter to be seen.
Filters can be applied to selected shapes within the dialogue opened by clicking on the underlined 'Style' text in the bottom left of the screen.

Add filter effect Add filter effect - A new feColorMatrix filter effect will be added to selected filter definitions. Use the Shape dialogue to change the filter effect's properties.

Apply Transform - Gold Users

Apply Transform Apply Transform - Selected shapes are modified so they appear the same but any transform is removed, leaving the shapes with an origin in the top left corner. Basic shapes may be changed to paths as necessary.

Insert Point - Gold Users

Insert Point Insert Point - Selected shapes have points inserted. Basic shapes are converted to paths and paths have extra control points added. If a single point is selected with the Select point tool before inserting a point then an extra point is inserted before the selected point else an extra point is inserted before all points.