drawsvg iconDRAWSVG user's manual
PreviousNextContentsPDFdrawsvg

4.13. Editor panels

4.13.1. Map editor dialog panel
4.13.2. Filter path svg panel
4.13.3. TextPath offset svg panel
4.13.4. Transform gradient svg panel
4.13.5. Transform pattern svg panel
4.13.6. Image file load panel
4.13.7. Image url load panel
4.13.8. Properties dialog panel

4.13.1. Map editor dialog panel

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

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

4.13.2. Filter path svg panel

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

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.

4.13.3. TextPath offset svg panel

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

TextPath offset svg panel

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

4.13.4. Transform gradient svg panel

This tool is used to customize the gradient of a shape

  • To prevent modification of the shared gradient definition, make a copy or an extension of the gradient,

  • Then define the transformation with the rotation angle and the scale factor

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

Transform gradient svg panel

See also creating , using gradients showcases for interactive demonstrations.

4.13.5. Transform pattern svg panel

This tool is used to customize the pattern of a shape

  • To prevent modification of the shared pattern definition, make a copy or an extension of the pattern,

  • Then define the transformation with the rotation angle and the scale factor

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

Transform pattern svg panel

See creating , using patterns showcases for interactive demonstrations.

4.13.6. Image file load panel

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

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.

4.13.7. Image url load panel

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

Image URL load panel

Note

It's also possible to view a svg URL by this way.

For the same reasons detailed previously in image file load , the most suitable method is to use the element svg included.

The URL is downloaded via a proxy for safety reasons. The URL must be accessible from the server.

4.13.8. Properties dialog panel

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

Properties are organized into tabs :

  • Element

  • Stroke style

  • Fill style

  • Marker style

  • Geometry

  • CSS styles

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 elementProperties

Element's attributes

  • Tag, element type

  • id, element id

  • transform, the transformation matrix


Table 4.4. Properties tab stroke style panel

Tab stroke styleProperties

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 styleProperties

Element's fill style properties


Table 4.6. Properties tab marker style panel

Tab marker styleProperties

Element's marker style properties


Table 4.7. Properties tab geometry panel

Tab geometryProperties

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 CSSProperties

Define CSS classes, move properties from inline location to classes.

See showcase using css styles