Chapter 6. Style properties

Table of Contents

6.1. Stroke style properties
6.2. Fill style properties
6.3. Text style properties
6.4. Marker style properties
6.5. Style panels
6.5.1. Color chooser svg panel
6.5.2. Gradient dialog panel
6.5.3. Marker dialog panel
6.5.4. Pattern dialog panel
6.5.5. Filter dialog panel

This chapter describes the style properties supported by Draw SVG.

Style properties are classified into four categories (stroke, fill, text, markers) with a dedicated menu.

Each menu shows the rendering properties with an illustration.

6.1. Stroke style properties

These properties are applicable to all geometric shapes as well as text.

Table 6.1. Stroke style properties

Stroke style menuPropertyDescription

transparent, color, scaling, width, dash, opacity

transparentControls the appearance of lines, visible or transparent. Sets the stroke property to none (stroke="none").

http://www.w3.org/TR/SVG/painting.html#StrokeProperty
colorLine solid color. Sets the stroke property with a color (stroke="color").

The color can be selected from the basic palette, entered in the text field, or set with the color chooser svg panel available from its icon .

http://www.w3.org/TR/SVG/painting.html#StrokeProperty
scalingControls the appearance of the line thickness.

If this option is enabled, the drawing of line thicknesses is sensitive to changes in the view as defined in the SVG1.1.

Off, "vector-effect" SVG1.2 property is set to "non-scaling-stroke". Drawing the line thickness is constant regardless of the zoom level.

http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
width

Sets the line thickness with his unit.

  • xy The line width is defined in the svg coordinate space

  • css units

    px, pt, pc, in, cm, mm

http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty
dashSpecifies the pattern of dashes.

A list of lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty
opacityLine opacity between 0 (transparent) and 1 (solid).

http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty

gradient, cap, join

gradient

Gradient applied to the fill line in place of the solid color. Sets the stroke property with a gradient id (stroke="url(#MyGradient)").

The gradient can be customized with the gradient definition tool .

The gradient can be selected from the drawn list or with the chooser tool .

http://www.w3.org/TR/SVG/pservers.html#Gradients

capDefines how the ends of an line is rendered.

http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty
joinDefines how the join between two lines in a shape is rendered.

http://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty

pattern

pattern

Pattern applied to the fill line in place of the solid color. Sets the stroke property with a pattern id (stroke="url(#MyPattern)").

The pattern can be customized with the pattern definition tool .

The pattern can be selected from the drawn list or with the chooser tool .

http://www.w3.org/TR/SVG/pservers.html#Patterns