4.12. Editors

Edit size

Edit position and size of the element by two control points.

See also draw rectangle showcase for an interactive demonstration of how to draw a rectangle.

Edit circle

Edit ellipse

Edit map

Edit the map location. Display the Google map dialog panel for searching a place and browsing the map.

See also draw map showcase for an interactive demonstration of how to insert and edit a Google Map in your SVG drawing..

Edit line

Move each point of the line.

See also draw line showcase for an interactive demonstration of how to draw a line.

Insert points

Insert point.

A blue dot is drawn in the middle of each segment. Move the points to be inserted.

Delete points

Delete point.

A red dot is drawn on each point. Click the points to be deleted.

Move points

Move each point of the selected element.

Edit circle arc

Edit the geometry of a circle arc by three control points.

A circle arc is a path with an elliptical arc curve commands

Edit path

Move each point and tangent point of the path.

Filter points

Filter the points of a geometric element (polyline, polygon or path) by removing unnecessary points.

The filter is defined by a corridor of a given radius to fix the points of the chord and delete those whose distance to the chord is less than the radius. The curve segments of the path elements are replaced by straight line segments

See filter points showcase.

Display the filter points panel near the selected element.

Smooth vertices

Smoothing the vertices of a polyline, polygon or path.

Smoothing goes through the points of the curve with arc of 4 types (cubic, cubic smooth, quadratic, quadratic smooth). It is advisable to first remove redundant points using the filter points function.

Polylines and polygons are replaced by paths.

See smooth vertices showcase.

Display the svg Smooth vertices panel near the curve.

Close path

Close a path. Add a closepath command to the path.

Edit text

Edit text.

This function interacts directly with the drawn text. Click on the text to insert characters by typing on the keyboard. Use the icons to move cursor or delete characters.

See also draw simple text , multiline text , text editor showcases for an interactive demonstration of how to draw and edit a text.

Edit textPath offset

Edit the offset attribute of a textPath .

Display the svg textPath offset panel near the text.

See also drawing text on a path showcase for an interactive demonstration.

Translate xy

Translate xy coordinates of elements.

This editor does not set the transform attribute.

Transform

Apply a transform matrix to elements.

The transformation matrix is defined using eight control points and four half moons rotation.

Copy

Duplicate elements.

Load image file

Load an image file, then encode it's content as a dataURI to set the href attribute of the image with the image file load dialog panel.

Download image from the WEB

Search for an image on the WEB using keywords with the image search WEB dialog panel.

Then encode it's content as a dataURI to set the href attribute of the selected image element with the WEB image load dialog panel.

Load image URL

Load the HTTP URL referenced by the image, then encode it's content as a dataURI to set the href attribute of the image with the image url load dialog panel.

Load svg

Set the content of the included svg by loading a svg document from a file, a HTTP URL or from the FreeSVG gallery.

The editor uses the same dialog than open document .

Add textPath

Add a textPath on the selected path.

See also drawing text on a path showcase for an interactive demonstration.

Edit properties

Select group

Group elements

Create a group and move selected items inside the group.

You can assign style properties to the group. Rendering a member of the group is made with the values of style properties set on the element or its group. To force the rendering with the group's style, we must unset the properties on group elements.

Ungroup elements

Delete the selected group and move all its children to the group's parent item.

Transform gradient

Customize the gradient of the selected shape by copying or extension and transformation of it.

see transform gradient svg panel

See also creating , using gradients showcases for interactive demonstrations.

Transform pattern

Customize the pattern of the selected shape by copying or extension and transformation of it.

see transform pattern svg panel

See also creating , using patterns showcases for interactive demonstrations.

Delete