PGML

June 22, 1998

Lisa Rein

PGML uses an XML syntax to describe complex graphical data structures using the PostScript language primitives. The result is a tagged image format that can be read and rendered by the browsers, most likely using a plug-in or similar visual rendering component.

PGML is initially significant because it will enable the conversion of PostScript and PDF documents into XML. However, Adobe insists that it did not merely design PGML around its existing product line, but rather that it is a derivative of 15 years of graphics experience with the needs of professional graphic artists. "We incorporated our graphics knowledge into the PGML specification," said Jon Ferraiolo, a senior computer scientist at Adobe. "We think this is totally valid, as Adobe has more graphics expertise than any other company."

Also, many of the Adobe-only features of its current products were left out of PGML because Adobe felt they wouldn't be applicable to a standard. Likewise, PGML has many features that are not in any existing Adobe products, such as transparency, extensibility (paint servers, object servers, etc.) and animation.

In PGML, text strings are specified as standard XML character data within an element, using "x" and "y" attributes to define the starting point of the text fragment once it was rendered in the browser. For example, the following will cause the string "Precision Graphics" to be drawn:

<text x="100" y="150">Precision Graphics</text>

A Simple Rectangle

The <rectangle> element specifies the attributes x and y to define the starting point of the specified text fragment once it is rendered in the browser. WIDTH and HEIGHT attributes determine the size of the rectangle. The FILLCOLOR attribute is used to fill the rectangle with the color green.

Here's an example of an instruction to draw a green rectangle:

<rectangle fillcolor="green"

  x="100" y="100" width="500" height="500"/>

If several drawing elements share similar attributes, they can be collected together using a <group> element. A <group> element can contain other <group> elements nested within it, to an arbitrary depth. Any drawing element that is not contained within a <group> is treated as if it was in its own group.

For example:

... <pgml> <group fillcolor="red"> <rectangle x="100"
        y="100" width="100" height="100" /> <rectangle
        x="300" y="100" width="100" height="100" />
        </group> <group fillcolor="blue"> <rectangle x="100"
        y="300" width="100" height="100" /> <rectangle
        x="300" y="300" width="100" height="100" />
        </group> </pgml>

A group of drawing elements, as well as individual objects, can be given a name. Named groups are needed for several purposes such as animation and re-usable objects. The following example organizes the drawing elements into two groups and assigns a name to each group:

... <pgml> <group name="OBJECT1"> <rectangle x="100"
        y="100" width="100" height="100" /> </group>
        <group name="OBJECT2"> <circle cx="150" cy="300"
        r="25" /> </group> </pgml>

The initial coordinate system is defined by attributes on the <pgml> element. These attributes provide an initial mapping of the PGML coordinate system onto the rectangular viewport into which the graphics are to be drawn (this viewport was defined within the HTML file). The boundingbox defines the initial user coordinate system (user space) and the initial clipping path. The first two values represent the x and y user coordinates of the top/left corner of the drawing that should be displayed to the user. The last two values represent the width and height of the drawing in user coordinates. The initial user coordinate system is defined with the Y-axis pointing down.

The following example illustrates the boundingbox attribute:

<pgml boundingbox="0 0 100 100">

In the example above, the drawing has a top/left corner of (0,0) and a width and height of 100.

Inside a PGML document, the coordinate system can be changed by specifying a transformation matrix. Transformation matrices in PGML work just as they do in PDF. Transformations alter coordinate systems, not the objects themselves. A transformation matrix in PGML specifies the transformation from the transformed (new) coordinate system to the untransformed (old) coordinate system. All coordinates used after the transformation are specified in the transformed coordinate system.

Transformations are specified via the concat attribute that can be used with most PGML elements. The value of the concat attribute is a sequence of six numbers separated by spaces. This represents an arbitrary 2x3 matrix in the form of six values: a b c d e f. The given matrix is concatenated with the current transformation matrix to produce a new transformation matrix.

For example, the following matrix flips the coordinate system so that the origin is at the lower left and the Y-axis points up. It then draws a rectangle at the lower left of the viewport:

<pgml boundingbox="0 0 100 100"> <group concat="1 0 0 -1 0
        100"> <rectangle x="0" y="0" width="25"
        height="25"/> </group> </pgml>

PGML will probably not be generated by hand very often, no more so than PostScript was. It is more likely to be implemented as an export format within Adobe's own product line (e.g., Photoshop and Illustrator). Adobe has also pledged to make PDF/PostScript-to-PGML converters, plug-ins, ActiveX controls and other components available for download on its Web site. Having this kind of functionality "built-in" will undoubtedly simplify the creation and manipulation of PGML graphics on the Web.

Graphics programs, such as Photoshop, could pump out PGML to be cut and pasted into Web pages along with the actual graphic itself. The bitmapped image might be used by today's browser, while the PGML information is there for browsers of the future. In addition, indexing engines today might be able to make use of the text that is specified as part of the PGML format.