SVG syntax description

The following SVG description may be used by the designers, willing to specialize in the field of SVG graphics design. For the PROMOTIC system common designers this knowledge is not essential because these users can use either the preset images in the PROMOTIC system (in the \Promotic\PmVXXYY\Resource\Img folder) or create the images by means of SVG editors.

The SVG structure is similar to the HTML format but using specific graphic elements. The syntax allows optional entry methods: spaces or comma can be used as separators, the tag properties can be entered as parameters or CSS styles.
The following syntax is used for the examples described below:

- the tag properties are entered as parameters

- the space is used as a separator

- the period is used as the decimal separator

- the colors are defined in hexadecimal

1. SVG structure and vector shapes

The following graphic objects are defined in SVG:

- rectangle: Rectangle (the cornes may be rounded). It is defined by "x", "y", "width", "height" attributes. The cornes can be rounded by using the "rx" and "ry" attributes.

- circle: The circle centered in "cx", "cy" and using the "r" radius.

- ellipse: The ellipse centered in "cx", "cy" and using two radiuses "rx" and "ry".

- line: Line simple. The line is defined by two coordinate pairs "x", "y".

- polyline: Line fractional (with open outline), parameters are entered into "points" attribute.

- polygon: Polygon. Closed vector object with arbitrary point count, entered into "points" attribute.

- path: Common area (path). The paths for common drawing are defined in the "d" attribute by means of the following letter (small or CAPITAL independently):

m = moveto (set current position, without line drawing)

l = lineto (draws the stroke)

c = curveto (draws the cubic Bezier curve)

q = quadratic Bézier

a = arc (elliptical sector)

z = closepath (closes the current vector area)

Basic shapes example:

There are the SVG validation tags located at the beginning, followed by the <svg> tag, which specifies the display size parameters and more. The <g> tag groups the objects and allows to enter the common properties of immersed objects.
The following tags: <circle>, <rect>, <path>, <polygon>, <line> set the basic shape of the object. The position and size is set by the syntax defined in the W3C specification. The fill parameter = color of the drawed area, stroke = color of the border line and stroke-width = the border line width. Object

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100" height="100" version="1" svg xmlns="http://www.w3.org/2000/svg">

<g>

<circle cx="18" cy="19" r="11" fill="#ffff00" stroke="#000000" stroke-width="1"/>

<rect x="38" y="7" width="12" height="46" fill="#0000ff" stroke="#000000" stroke-width="0"/>

<path d="M65 10 L55 27 L75 27" fill="#00ff00" stroke="#000000" stroke-width="1"/>

<polygon points="7,50 15,85 30,78 25,64" fill="#ff0000" stroke="#000000" stroke-width="0"/>

<line x1="38" y1="79" x2="73" y2="44" fill="none" stroke="#000000" stroke-width="3"/>

<path d="M45 84 C60 94 74 68 85 84" fill="none" stroke="#000000" stroke-width="1"/>

</g>

</svg>

2. Gradient

Cylindrical container example:

In the fill attribute of the <rect> tag the reference is used to the drawing method defined in the id="grLinearV" section. It is immersed in the <defs> tag.
The parameters of the <linearGradient> tag in this section are used for setting the coordinates, color gradient direction and drawing methods. The <stop> tags set the position, color and transparency of the color gradient.
The radial gradient used in the <path> tag is used accordingly.

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="250" height="500">

<defs>

<radialGradient id="grRadial" cx="50%" cy="50%" r="50%" spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" stop-color="#fafafa" stop-opacity="1"/>

<stop offset="100%" stop-color="#808080" stop-opacity="1"/>

</radialGradient>

    <linearGradient id="grLinearV" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" stop-color="#808080" stop-opacity="1"/>

<stop offset="50%" stop-color="#fafafa" stop-opacity="1"/>

<stop offset="100%" stop-color="#808080" stop-opacity="1"/>

</linearGradient>

</defs>

<g stroke="#000000" stroke-width="0">

<rect fill="url(#grLinearV)"

x="0" y="50" width="250" height="400"/>

<path fill="url(#grRadial)"

d="M0,50 A125,50 0 1,1 250,50 M250,100 L250,100"/>

<path fill="url(#grRadial)"

d="M0,450 A125,50 0 1,0 250,450 M250,400 L250,400"/>

</g>

</svg>

3. Transformations

Turning lever example:

Both <rect> objects display the lever created in the horizontal position. These are grouped in the <g> tag, which is using a transformation in the parameter, rotating the object by 90° with the center in set coordinates. Lever1

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100" height="100">

<g transform="rotate(90 8 8)">

<rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>

<rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>

</g>

<circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>

</svg>

Shifting the lever example:

All objects displaying the lever are grouped in the <g> tag. A transformation is used here, that is shifting the Y-axis coordinates by the desired value. Lever2

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100" height="100">

<g transform="translate(0 84)">

<rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>

<rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>

<circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>

</g>

</svg>

The example of lever shifting and turning:

Both transformation types combined. Lever3

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100" height="100">

<g transform="translate(0 84)">

<g transform="rotate(270 8 8)">

<rect fill="#c0c0c0" stroke="#000000" stroke-width="1" x="8" y="6" width="62" height="4"/>

<rect fill="#0000ff" stroke="#000000" stroke-width="0" x="70" y="4" width="30" height="8"/>

</g>

<circle fill="#0000ff" stroke="#000000" stroke-width="0" cx="8" cy="8" r="8"/>

</g>

</svg>

See SVG tutorial: http://www.w3schools.com/svg/default.asp

Promotic

SVG syntax description

1. SVG structure and vector shapes

Basic shapes example:

2. Gradient

Cylindrical container example:

3. Transformations

Turning lever example:

Shifting the lever example:

The example of lever shifting and turning:

See also: