4.13. Editor panels

This tool is used to edit an image which shows a google map.

The map editor display a Google map dialog panel for searching a place and browsing the map.

Figure 4.1. Map editor panel

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

This editor filter and smooth a straight line.

The curve must be a path with only lineto commands.

The tool is displayed as a svg panel inside the document.

Figure 4.2. Filter path svg panel

The filter defines the minimum distance of a point to the vector between the prior and next points.

The filter is drawn on each point as a circle of radius equals to the distance.

The simplified curve is drawn in brown color.

The smooth option and it's slider allows to transform the curve in bicubic.

The value of the slider control the elasticity of the curve.

See also smooth path showcase for an interactive demonstration.

The offset attribute of a textPath defines the curvilinear abscissa of the text on the associated path .

The offset can be adjusted with the slider of the editor's svg panel, or entered directly into the field.

The tool is displayed as a svg panel inside the document.

Figure 4.3. TextPath offset svg panel

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

This tool is used to customize the gradient of a shape

Apply the transformation or close the panel without modification.

Customization by extension has the advantage of minimizing the volume and continue to benefit from changes made to the basic gradient.

Figure 4.4. Transform gradient svg panel

See also creating , using gradients showcases for interactive demonstrations.

This tool is used to customize the pattern of a shape

Apply the transformation or close the panel without modification.

Customization by extension has the advantage of minimizing the volume and continue to benefit from changes made to the basic pattern.

Figure 4.5. Transform pattern svg panel

See creating , using patterns showcases for interactive demonstrations.

This editor load an image file, then encode it's content as a dataURI to set the href attribute of the selected image.

You can select the image resolution to optimize the encoded size.

Figure 4.6. Image file load panel

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

Note

It's also possible to load a svg file by this way.

But in this case the most suitable method is to use the element svg included for the following reasons:

• The vector display renders the document with its original resolution and quality.

• The content of the included svg is editable.

The editor asks for confirmation to avoid confusion and to learn about the alternative use.

This editor load the HTTP URL referenced by the element, then encode it's content as a dataURI to set the href attribute of the selected image.

Figure 4.7. Image URL load panel

This editor allows you to edit all properties of the selected item which are supported by DRAW-SVG.

Properties are organized into tabs :

Each property is followed by an icon to edit its value or to delete it .

See also showcase using css styles

Table 4.3. Properties tab element panel

Tab element	Properties
	Element's attributes Tag, element type id, element id transform, the transformation matrix

Table 4.4. Properties tab stroke style panel

Tab stroke style

Properties

Element's stroke style properties Color, stroke color with color chooser button effect, scaling stroke (SVG 1.2) gradient, stroke gradient with customize and chooser tools buttons pattern, stroke pattern with customize and chooser tools buttons width, stroke width value and unit dash, stroke dash array offset, stroke dash offset stroke line cap (butt, round, square) stroke line join (miter, round, bevel) stroke opacity, float value between 0 and 1 stroke miter-limit

Table 4.5. Properties tab fill style panel

Tab fill style	Properties
	Element's fill style properties Color, fill color with color chooser button gradient, fill gradient with customize and chooser tools buttons pattern, fill pattern with customize and chooser tools buttons fill opacity, float value between 0 and 1 filter with customize tool fill rule

Table 4.6. Properties tab marker style panel

Tab marker style	Properties
	Element's marker style properties marker start with customize and chooser tools buttons marker mid with customize and chooser tools buttons marker end with customize and chooser tools buttons

Table 4.7. Properties tab geometry panel

Tab geometry	Properties
	Definition of the geometry of the element. For a path element, shows each command with arguments. See showcase edit geometry

Table 4.8. Properties CSS styles panel

Tab CSS	Properties
	Define CSS classes, move properties from inline location to classes. See showcase using css styles