Enterprise Studio supports the following subset of elements, presentation attributes, and transform functions of the SVG standard for creating custom symbols. Other SVG tags and attributes will usually be ignored, but it is advised to remove those from the symbol definition.


On this page:


SVG elements

Element

Heading

Attributes

<circle>

Defines a circle

cx="the x-axis center of the circle".

cy="the y-axis center of the circle".

r="The circle's radius". Required.


+ presentation attributes: Color, FillStroke, Graphics.

<ellipse>

Defines an ellipse

cx="the x-axis center of the ellipse".

cy="the y-axis center of the ellipse".

rx="the length of the ellipse's radius along the x-axis". Required.

ry="the length of the ellipse's radius along the y-axis". Required.


+ presentation attributes: Color, FillStroke, Graphics.

<g>

Used to group together elements

id="the name of the group".

fill="the fill color for the group".

opacity="the opacity for the group".


+ presentation attributes: All.

<line>

Defines a line

x1="the x start point of the line".

y1="the y start point of the line".

x2="the x end point of the line".

y2="the y end point of the line".


+ presentation attributes: Color, FillStroke, Graphics, Markers.

<path>

Defines a path

d="a set of commands which define the path".

pathLength="If present, the path will be scaled so that the computed path length of the points equals this value".

transform="a list of transformations".


+ presentation attributes: Color, FillStroke, Graphics, Markers.

<polygon>

Defines a graphic that contains at least three sides

points="the points of the polygon. The total number of points must be even". Required.

fill-rule="part of the FillStroke presentation attributes".


+ presentation attributes: Color, FillStroke, Graphics, Markers.

<polyline>

Defines any shape that consists of only straight lines

points="the points on the polyline". Required.


+ presentation attributes: Color, FillStroke, Graphics, Markers.

<rect>

Defines a rectangle

x="the x-axis top-left corner of the rectangle".

y="the y-axis top-left corner of the rectangle".

width="the width of the rectangle". Required.

height="the height of the rectangle" Required.

rx="the x-axis radius". Ignored in Enterprise Studio.

ry="the y-axis radius". Ignored in Enterprise Studio.


+ presentation attributes: Color, FillStroke, Graphics.

<text>

Defines a text

Although supported by Enterprise Studio, this element should be avoided because symbols that contain <text> do not scale well in HoriZZon.

x="the x-axis position. 0 is default".

y="the y-axis position. 0 is default".

dx, dy, rotate, textLength, lengthAdjust: Ignored.

Elements inside the <text> are ignored.


+ presentation attributes: Color, FillStroke, Graphics, FontSpecification.

SVG presentation attributes

In addition to the attributes already defined with the SVG elements above, Enterprise Studio supports the following attributes for styling the SVG elements.

Attribute

Description

Allowed values

fill

Defines the content to be painted within the geometric area of a shape, or the outlines of text glyphs.

  • none , to indicate that the area should not be painted; left transparent.
  • Any recognized CSS color value, e.g. blue or the hex-code #0000ff.

fill-opacity

Defines the maximum opacity of the fill paint.

A number in the range 0.0–1.0.

fill-rule

Indicates how the interior fill-region area should be calculated for a shape with criss-crossing lines.

Either nonzero or evenodd.

font-family

Specifies the typeface family to use. Only applicable to <text>-elements.

Any available typeface name. Only use font families that are available in Windows, Linux and MacOS.

font-size

Sets the size of text, by defining the height of a single line of text (before line-spacing). Only applicable to <text>-elements.

A unitless number that will be interpreted as a length in user coordinates.

font-style

Indicates whether italic type should be used. Only applicable to <text>-elements.

One of normal or  italic .

font-weight

Indicates which thickness of the strokes should be used for the text. Only applicable to <text>-elements.

One of normal or  bold .

stroke

Defines the color of the border line to be painted around around the shape or path.

  • none , to indicate that no border line should be painted.
  • Any recognized CSS color value, e.g. blue or the hex-code #0000ff.

stroke-dasharray

Describes the pattern of dash length and gaps used to generate the stroke.

  • none (default = straight line).
  • A list of non-negative numbers (SVG user units), separated by whitespace.

stroke-linecap

Describes the added stroke-region shape that extends from every open-ended path segment and every stroke dash.

One of butt  (no extra cap shape),  round  (semi-circular caps), or  square (square caps, extending half the stroke width beyond the official end of the path or dash).

stroke-linejoin

Describes the shape used to fill in the outside corners of stroke regions.

One of miter (extend the strokes until they meet in a point), round (connect with an arc), or bevel (connect the strokes with a single straight line).

stroke-miterlimit

Limits how far mitered line-join corners can extend beyond the official dimensions of the shape, as a multiple of the stroke-width.

A number greater than or equal to 1. Default = 4.

stroke-opacity

Sets the maximum opacity for the color used in the stroke region.

A number in the range 0.0–1.0.

stroke-width

Sets the width of the stroke region, perpendicular to the edge of the shape and centered over it.

A non-negative number (of SVG user units).

style

A list of CSS style declarations that should apply to this element. Any of the other presentation style attributes listed in this table is allowed as property-name.

  • Format is a list of property-name: property-value; pairs.
  • The final ; in a list is optional.
  • Whitespace is optional before and after property names and values.

transform

Transformations to apply to this element (and therefore its children).

A list of transformation functions as defined in the next table below.

SVG transform functions

The following transformation functions are supported for the symbol definitions.

Transform function

Description

matrix(a b c d e f)

Complex transformation based on the specified matrix parameters. (newX, newY) = ((a*x + c*y + e), (b*x + d*y + f)).

rotate(a [x y])

Rotates the shape by a degrees around the point (x, y). The point can be omitted.

scale(x [y])

Scales the shape by a factor x in the horizontal direction and by a factor y in the vertical direction. If y is not provided, it is assumed to be equal to x. Also scales the stroke width of the shape.

skewX(a)

Skews the x-coordinates by a degrees along the y-axis.

skewY(a)

Skews the y-coordinates by a degrees along the x-axis.

translate(x [y])

Move the shape by x and y. y may be omitted and will default to 0.