SVG shape display properties

There are two fundamental drawing operations for every SVG shape: how the edge of a shape is outlined (stroke) and how the interior of a shape is rendered (fill).

Stroke Characteristics

The stroke characteristics define the outline of a shape. A shape's outline is drawn after its interior is filled, and can have the following characteristics:

Attribute Description
stroke The stroke color.
stroke-width Width of stroke. It must be given as user coordinates. It is centered along the abstract grid lines.
stroke-opacity A number ranging from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 is 100% opaque.
stroke-dasharray A series of numbers that indicate the length of dashes and gaps used to draw a line. These numbers are in the current user coordinates only.

Note  By default, the outline is drawn with a butt line cap style and a miter line join style. FileMaker Pro uses an internal default miter limit of 10 instead of the default value of 4 defined by the SVG standard.

Fill Characteristics

The following attributes control the way in which a shape is filled:

Attribute Description
fill The fill color.
fill-opacity A number ranging from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 is 100% opaque.

Note  Although the SVG standard supports additional fill rules, FileMaker Pro supports only the "nonzero" fill rule, the SVG standard's default fill rule.

These display properties can be specified using CSS2 styles for the fill, stroke-width, and stroke attributes.

Examples:

Copy 
<!-- Regular XML style -->
<rect x="20" y="20" width="60" height="30" fill="red" stroke="blue" stroke-width="3" />
Copy 
<!-- CCS2 style, which is more compact -->
<rect x="20" y="20" width="60" height="30" style="fill:red;stroke:blue;stroke-width:3" />

Specifying Colors

Solid colors can be specified in the following ways:

  • none to indicate that no outline is to be drawn or that the shape is not to be filled.

  • A color keyword name, such as aliceblue, antiquewhite, cyan, lightgray. Refer to the W3C SVG standard for a complete list of color names.

  • Hexadecimal digits of the form #rrggbb. Each pair of values describes the individual red, green, and blue color components.

  • Hexadecimal digits of the form #rgb. This is a shorthand for the previous method—the digits are replicated so that #rgb is equivalent to #rrggbb.

  • The macro rgb(r, g, b). Each color component value ranges from 0 to 255 or 0% to 100%.

  • Two different syntaxes can be used to define the display properties of the stroke and the fill operations.