11.3. The Shape Description
Prev Chapter 11. Custom Shape Module Next

11.3. The Shape Description

The Scalable Vector Graphics format is used to describe the shape. That is why the separate namespace is used for that part of the file.

11.3.1. Style attribute

Each of the SVG drawing elements understands the style attribute. The attribute should be of the form:


          
<svg:whatever style="name1: value1; name2: value2; ... name42: value42"/>
          
        

Currently only the following style attributes are understood:

  • stroke-width - The width of the line, relative to the user specified width.
  • stroke-linecap - The line cap style. One of butt, round, square, projecting (a synonym for square), or default.
  • stroke-linejoin - The line join style. One of miter, round, bevel or default.
  • stroke-pattern - The dash pattern. One of none, dashed, dash-dot, dash-dot-dot, dotted or default.
  • stroke-dashlength - The length of the dashes in the dash pattern, in relation to the user selected value (default is a synonym for 1.0).
  • stroke - The stroke colour. You can use one of the symbolic names foreground, fg, default, background, bg inverse, text or none, or use a hex colour value of the form #rrggbb.
  • fill - The fill colour. The same values as for stroke are used, except that the meaning of default and inverse are exchanged. By default, elements are not filled, so to get the default fill, use "fill: default"

[Tip]

So to draw a rectangle with a hairline stroke, the following would do the trick:


              
<svg:rect style="stroke-width: 0" x="..." y="..." width="..." 
  height="..."/>
              
            

Ordinates x and y grow as in Dia.

11.3.2. Recognised drawing elements

The recognised drawing elements are:

  • <svg:g>

    This is the group element. You can place other drawing elements inside it. The contents of the style attribute on a group element will propagate to the contained elements (unless they override it).

  • <svg:line x1="..." y1="..." x2="..." y2="..."/>

    This element is a line.

  • <svg:polyline points="...."/>

    This is a polyline. That is, a number of connected line segments. The points attribute holds the coordinates of the end points for the line segments. The coordinates are separated by white space or commas. The suggested format is "x1,y1 x2,y2 x3,y3 ...".

  • <svg:polygon points="...."/>

    This is a polygon. The points argument has the same format as the polyline.

  • <svg:rect x1="..." y1="..." width="..." height="..."/>

    This is a rectangle. The upper left corner is (x1,y1), and the lower right corner is (x1+width,y1+height).

  • <svg:image x1="..." y1="..." width="..." height="..." xlink:href="..." />

    This is an external image. The upper left corner is (x1,y1), and the lower right corner is (x1+width,y1+height). Their are two forms of links supported, an absolute filename of the form "file:///home/user/image.png" or a relative one without the "file://" prefix like in "image.png". The latter form is preferred because it is installation independent. The filename is relative to the shape file placement. In the above example PNG and shape need to be in the same directory. Inlined image data is also supported with xlink:href="data:image/png;base64,..."

  • <svg:circle cx="..." cy="..." r="..."/>

    This is a circle with centre (cx,cy) and radius r.

  • <svg:ellipse cx="..." cy="..." rx="..." ry="..."/>

    This is a ellipse with centre (cx, cy) and radius rx in the x direction and ry in the y direction.

  • <svg:path d="...."/>

    This is the most complicated drawing element. It describes a path made up of line segments and bezier curves. It currently does not support the elliptic arc or quadratic bezier curves. The d string is made up of a number of commands of the form "x arg1 arg2 ..." where x is a character code identifying the command, and the arguments are numbers separated by white space or commas. Each command has an absolute and relative variant. The absolute one are spelled with an upper case letter. The relative ones are spelled with a lower case letter, and use the end point of the previous command as the origin.

    The supported commands are:

    • M x,y - Move cursor
    • L x,y - Draw a line to (x,y)
    • H x - Draw a horizontal line to x
    • V y - Draw a vertical line to y
    • C x1,y1 x2,y2, x3,y3 - Draw a bezier curve to (x3,y3) with (x1,y1) and (x2,y2) as control points. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow.
    • S x1,y1 x2,y2 - Same as above, but draw a `smooth' bezier. That is, infer the first control point from the previous bezier. S (uppercase) indicates that absolute coordinates will follow; s (lowercase) indicates that relative coordinates will follow.
    • A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ - Draw an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation. The center is automatically calculated. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn. A (uppercase) indicates that absolute coordinates will follow; a (lowercase) indicates that relative coordinates will follow.
    • Z - Close the path.

    If the path is closed with z or Z, then it can be filled. Otherwise, it will just be drawn.

  • <svg:text x="..." y="..." style="...">...</svg:text>

    A text in the shape. The text has to be enclosed in the tags

    The parameters are:

    • x,y - The text position

    • style - Text formatting options

      The following style options are supported:

      • font-size - font size in pt

Prev Up Next
11.2. Shapes Home 11.4. Shapes in Shapes aka. Subshapes