PGML
by Lisa Rein
June 22, 1998
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.