Promotic
WikipediaLinkedInYoutubeTwitterFacebook

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 users this knowledge is not essential. These users can use the preset images of the PROMOTIC system (located in the /Pm/Resource/Img folder) or create the images using SVG editors.
 
The SVG structure is similar to HTML format, but using specific graphic elements. The syntaxe enables optional entry methods: space or comma can be used as separators, the tag attributes can be entered as parameters or CSS styles.

The following syntax is used for the examples described below:

- the tag attributes are entered as parameters
- the space is used as a separator
- the period is used as the decimal separator
- the colors are defined hexadecimaly
 

1. SVG structure and vector shapes

The folowing graphic shapes 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: Simple line. The line is defined by two coordinate pairs "x", "y".
- polyline: Fractional line (with open outline) parameters are enterd 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 using 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 examples:
There are the SVG validation tags located at the beginning, followed by the <svg> tag, which sets the display size parameters and more. The <g> tag groups the objects and anables entering the common attributes of immersed objects.

The following tags: <circle>, <rect>, <path>, <polygon>, <line> set the basic shape of the object. The position and dimension is set by the syntax defined in the W3C specification. The fill parameter sets the color of the drawed area, stroke sets the color of the border line and stroke-width sets the border line width.

<?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 into 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 into the <g> tag, which is using a transformation in the parameter, rotating the object by 90° with the center in set coordinates.
<?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.
<?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>
An example of lever shifting and turning:
Both transfotmation types combined.
<?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: www.w3schools.com/svg/default.asp
See also:
Navigation:
 
- SVG
 
- SVG description
 
 
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice