Shapes & images

Beyond text and tables, pdg gives you a handful of drawing primitives. They are deliberately simple — and because they are ordinary elements, they sit inside <vertical>, <horizontal>, and <stack> like everything else.

Rectangles

<rect> is a filled rectangle with a width, height, and fill. It is your colour block, divider band, and progress bar.

<vertical gap="8px">
  <rect width="240px" height="40px" fill="#c4341f" />
  <horizontal gap="6px">
    <rect width="40px" height="40px" fill="#1b1a17" />
    <rect width="40px" height="40px" fill="#9a2615" />
    <rect width="40px" height="40px" fill="#ddd5c4" />
  </horizontal>
</vertical>

For a rounded or bordered rectangle, reach for <box> or style: attributes — <rect> is the plain solid fill.

Circles and ellipses

<circle> takes a radius for a circle, or width and height for an ellipse. Give it a fill, a stroke + stroke-width, or both.

<horizontal gap="14px" cross="center">
  <circle radius="20px" fill="#c4341f" />
  <circle radius="20px" stroke="#1b1a17" stroke-width="3px" />
  <circle width="60px" height="30px" fill="#9a2615" />
</horizontal>

A circle plus a stacked number is a tidy status badge:

<stack>
  <circle radius="22px" fill="#1b1a17" />
  <text size="18" bold="true" color="#faf6ed" align="center"
        style:width="44px" style:height="44px"
        style:valign="center">7</text>
</stack>

Lines and dividers

<line> draws a rule. Left to itself it stretches to fill the space it is offered — perfect as a divider between sections. Control it with direction (horizontal or vertical), length, stroke-width, stroke, and a dash pattern.

<vertical gap="10px">
  <text size="14" bold="true">Above the line</text>
  <line stroke-width="1px" stroke="#ddd5c4" />
  <text size="12">A full-width divider, drawn by a bare line.</text>
  <line direction="horizontal" length="80px" stroke-width="1.5px"
        stroke="#c4341f" dash="4px" />
  <text size="12">A short, dashed, red rule above me.</text>
</vertical>

A vertical line makes a neat separator inside a row:

<horizontal gap="14px" cross="center">
  <text size="13">Left</text>
  <line direction="vertical" length="28px" stroke-width="1px" stroke="#847d6c" />
  <text size="13">Right</text>
</horizontal>

Images

<image> places a bitmap from a src — a path relative to the document, or a URL. Set width and/or height to size it; give just one and the other scales to keep the aspect ratio; give neither and it draws at its natural size.

<image src="logo.png" width="120px" />

This snippet is shown without a live preview because it points at a file that only exists in your own project. Drop a real image path in the playground to see it render. An image is treated as indivisible — if it does not fit the remaining height on a page, the whole image moves to the next one.

Combine an image with the layout tools from earlier and you have a figure with a caption, or a logo locked to the corner of a header. Speaking of headers — that is exactly where we are headed: documents that span many pages.