This note presents an experiment that has been carried out in early 1998 to design and implement a markup language for representing simple 2D vector graphics on the Web. The language presented here allows schematic drawings to be seamlessly integrated in HTML documents. It's an XML application and most style properties in graphics are handled by CSS.
The experiment consists in both a language called GraphML and its implementation in Amaya. Pages including graphics represented in GraphML can thus be rendered and authored in a comprehensive interactive environment, what allows an in-depth evaluation of the proposed technology.
Web authors have currently two ways to include graphics in their Web pages. They can either use an image format or a vector graphics format. Image formats such as PNG, JPEG or GIF are well suited to photographs and paintings, but when it comes to vector graphics, they pose some problems:
The most popular image formats are well supported by browsers, but some others and most vector graphics formats (CGM for instance) are only availble through plug-ins, which also pose some problems:
For these reasons, it seems appropriate to look at other ways to embed structured graphics in Web documents. Graphics considered here are simple schematic 2D drawings for which there is a strong need on the Web. Standards for 3D virtual reality (VRML) and for complex technical drawings (CGM) already exist and are well recognized, but there is a lack in the domain of simple drawings that many authors use to illustrate or explain a point in a report. Most word processors offer tools for drawing such graphics, but there is no common format that provides for interoperability.
An experiment has been done in Amaya to explore the advantages of integrating seamlessly vector graphics in HTML documents and to design a new format for 2D graphics. For this experiment, MathML has been taken as an example, as the problems of integrating drawings and mathematical expressions in documents have much in common. Hence the name of this experimental format, GraphML, which is an XML application, like MathML.
The experiment is carried out in several phases:
Amaya has been chosen for this experiment, as it has been designed as a framework for experimenting with new Web technologies. Its kernel provides for some graphics primitives and an XML parser is available.
XML is the language for representing structured data on the Web. It was an easy choice to select XML as the basis for GraphML. An experiment with GraphML was an opportunity to extend Amaya's capabilities in the XML domain. Amaya already supports MathML, and the GraphML experiment allowed us to consider the issue of integrating several XML objects (graphics and mathematical expressions) in the same document, as suggested in the Note about Name Spaces in XML.
CSS is a language for associating style with HTML pages. As graphics objects are intended to be embedded in HTML documents, it was interesting to try using CSS for expressing style in graphics. There is another style language under development at W3C, XSL, which is specifically designed for XML, but in early 1998, XSL is not mature enough.
The drawings considered here are constituted of a set of basic objects assembled in a structure. Basic objects are:
images (icons, photographs, etc.),
short pieces of text.
All these objects are 2-dimensional, but they may overlap. Some primitives represent closed objects (circles, rectangles, polygons, etc.) that can be filled with a color, an image or a pattern. Strokes have different aspects, regarding their color, thickness and style (solid or dashed). Links to any web resource should be available on all objects. Structure allows simple objects to be grouped to form more complex objects that are handled as a whole.
In a drawing, geometry can be considered from two points of view:
The first approach is best suited to graphics created with easy-to-use editors: the user creates objects with a menu or a palette and, using the mouse, she specifies their position and size. The coordinates are then simply saved in the graphics format. Displaying a drawing represented that way is also an easy task. This simple, easy to implement approach must clearly be considered, but it does not correspond to the way many Web authors write documents. A lot of HTML files are produced with text editors and directly composed in the final format. Specifying the coordinates of all objects does not work in this context, where the constraint approach is more appropriate.
Constraints are interesting even when an authoring tool is used, as this approach provides for more flexibility in the resulting drawing. Font change, for instance, can be accommodated by reformatting automatically the whole drawing, taking into account the new character size. The author can also change globally distance between objects or relative size of objects with less pain.
As both approaches have advantages, both are used in GraphML. Experience will allow to decide if both must be kept for a final format or if a single approach is enough.
Whatever the approach, the issue of affine transformations should be considered, as it also allows for flexibility. An author may specify a drawing and then use it again in different contexts after some geometric transformations: translation, scaling or rotation. Though all affine transformations can play an important role in structured graphics, only the translation has been chosen in the initial experiment, for implementation reasons.
In defining the structure for GraphML, a lazy approach has been taken. Whenever a feature was already available in some other W3C specification, it has been excluded from GraphML and a provision has been made to allow GraphML to use or include this external feature.
The following graphic primitives have been included in GraphML:
<line>: a straight line joining two
points
<rect>
<roundrect>: a rectangle
with rounded corners
<circle>
<oval>: a circle stretched horizontally
or vertically
<polyline>: a sequence of lines
<polygon>: a closed Polyline
<spline>: an open curve
<closedspline>
In addition to these graphical primitives, some other objects are needed to implement the model presented above:
<text> : some text that can be located
anywhere in a drawing, like the graphic primitives
<label>: some text displayed within a
closed primitive: rectangle, rounded rectangle, circle, oval, polygon, or
closed spline
<group>: a set of objects: graphical
primitives or objects of type Text, Math, Group (Groups can contain Groups).
The Group allows the objects it contains to be manipulated as a single object.
Objects Text and Label contain one or several HTML elements that would be valid children of a DIV element in an HTML document. A single character string is thus accepted, as well as any sequence of elements such as headings, paragraphs, preformatted, lists or tables. Mathematical expressions in MathML can also be included in these HTML fragments.
This use of HTML in elements Text and Label avoids to define additional elements in GraphML to represent images and hypertext links, as they are offered by HTML. In addition, images (possibly with maps) can be used in GraphML drawings.
As mathematical expressions can be included in HTML, such expressions can also be included in the Text and Label elements of a drawing.
There are several ways to consider the contents of elements presented above. For GraphML, only HTML and MathML elements are considered valid contents. Coordinates, background colors, fill patterns are considered as attributes or properties of a primitive rather than its contents. For example, in the following drawing:
| A label in a rectangle |
the yellow background is a style property of the rectangle, and its coordinates and size are attributes. Only the character string "A label in a rectangle" constitutes the content of element Label, which is itself the content of element Rectangle. In GraphML, this is written:
<rect position="0, 5" style="background-color: #FFFF00">
<label>
A label in a rectangle
</label>
</rect>
Attributes are used in GraphML to specify the geometric properties of objects,
as well as their style. As far as possible, style information is represented
in CSS, using the style attribute, whenever the corresponding
property is available in CSS. Attributes are used only when CSS cannot make
it.
Geometric properties fall in two categories (see the two approaches presented above), constraints and absolute parameters.
Attributes representing absolute geometric parameters (size and position) are:
position: the x and y coordinates of the top
left corner of the rectangle surrounding the object. Coordinates are relative
to the top left corner of the drawing: all coordinates are then positive.
A unit can be specified for each coordinate: mm, cm, in, pt, em, etc. The default unit is the typographical point (pt).
The two coordinates in a pair are separated by a comma and optional spaces.
If the position attribute is missing and no constraints are
present, a position of "0, 0" is assumed.
width: width of the rectangle surrounding the object. Same units
as coordinates.
height: height of the rectangle surrounding the object. Same
units as coordinates.
Attributes representing geometric onstraints are:
align (left, center, right): defines the horizontal position of
the object relatively to its parent element.
valign (top, middle or bottom): defines the vertical position of
the object relatively to its parent element.
direction (right, left, down top), hspace,
vspace: for a Group element these attributes specify how the
child elements are laid out relatively to each other:
direction="right" specifies that the child elements are
horizontally aligned left to right, with a distance of hspace
between two successive elements. If hspace is missing, a zero
distance is assumed.
direction="left" specifies that the child elements are
horizontally aligned right to left, with a distance of hspace
between two successive elements.
direction="down" specifies that the child elements are vertically
aligned top to bottom, with a distance of vspace between two
successive elements.
direction="up" specifies that the child elements are vertically
aligned bottom to top, with a distance of vspace between two
successive elements.
The position and size of each object can be specified either absolutely or by constraints. In case of conflict, only the absolute value is considered.
Some objects are not completely defined by their type, size and position: the
shape of a polyline, a polygon, a spline and a closed spline are specified by
the points attribute:
points: list of x, y coordinates (like
position) specifying the control points of the object.
Lines are considered as a special case of polyline. Their shape is defined by
a points attribute that defines the two end points of the
line.
If no position is specified (either absolutely or by a constraint), a position
"0, 0", is assumed and the points attribute defines the control
points in an absolute way. If a position is specified (absolutely or by a
constraint), the coordinates of control points are relative to that
position.
As the content of elements Label and Text is HTML, any CSS property can be used within these elements, with the style attribute. If some style sheets are embedded or linked to the document, they obviously apply to these HTML fragments.
CSS properties are also used for specifying the style of graphic objects, for instance their color or background.
For width and height, it seems more appropriate to use attributes rather than style properties, as these parameters specify the element itself, not its style.
Some style properties useful for GraphML are not available in CSS. They have been added to GraphML in the form of attributes, but they could be considered as possible extensions for a future version of CSS. These attributes are:
arrowhead (none, start, end, both): indicates if an arrow head
must be drawn at either end of an open shape: line, polyline, spline.
linestyle (solid, dashed, dotted): indicates how the shape must
be drawn (or should we use the border-style property from CSS?).
linewidth (an integer): indicates the width, in typographical
points, of the pen to be used for drawing the shape (or should we use the
border-width property from CSS?).
The example below shows a drawing that uses only absolute position and sizes. As soon as Amaya handles constraints, another example will be provided.
<h1>An example</h1>
<p>
This is a GraphML drawing:</p>
<xmlgraphics>
<rect position="5, 20" width="95" height="60"
style="background-color:#FFC0C0; color: #0000FF">
<label>
A nice pink rectangle
</label>
</rect>
<roundrect position="110, 10" width="150" height="120"
style="background-color: yellow; color: red">
<label>
A rectangle with
<ul>
<li><em>rounded</em> corners
<li>a yellow background
<li>red <strong>HTML</strong> text and border
</ul>
</label>
</roundrect>
<oval position="270, 5" width="100" height="80" style="color: blue">
<label style="text-align: center">
A transparent oval drawn in blue
<math>
<msqrt>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>1</mn>
</mrow>
</msqrt>
</math>
</label>
</oval>
<circle position="0, 120" width="120"/>
<line points="100,80 60,180" arrowhead="end"/>
<polyline arrowhead="start" points="160,180 170,150 220,150 210,180"/>
<polygon points="230,200 240,150 320,150 310,200"
style="background-color: #C0FFC0">
<label>
A green polygon
</label>
</polygon>
<spline points="160,250 170,220 220,220 210,250" arrowhead="both"
style="color: red"/>
<closedspline points="230,270 240,220 270,220 320,220 310,270"
style="background-color: #C0C0FF">
<label style="text-align: center">
A blue closed curve
</label>
</closedspline>
<text position="340, 200" width="80" style="text-align: right">
Some text with a <a href="#target">link</a>
<span style="color: red">within</span> the Graphics
</text>
<math position="280, 90">
<msqrt>
<mfrac>
<mn>1</mn>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>1</mn>
</mrow>
</mfrac>
</msqrt>
</math>
<group position="380, 20">
<text position="5, 45" width="100">
This group contains two overlapping rectangles and this text
</text>
<rect position="26, 11" width="50" height="30"
style="background-color: black"/>
<rect position="20, 5" width="50" height="30"
style="background-color: red"/>
</group>
</xmlgraphics>
The above example shows three different kinds of structure: text in HTML,
drawings in GraphML and mathematical expressions in MathML. Amaya allows text
(HTML) to embed mathematical expressions (MathML) and drawings (GraphML). For
that purpose, two tags have been added to HTML: <math> and
<xmlgraphics>. The first one comes from the MathML
specification.
Amaya also allows drawings (GraphML) to embed mathematics (MathML) and text
(HTML). For mathematics, GraphML uses the same tag as HTML:
<math>. For text, two tags are used, depending on the context:
<label> for text surrounded by a graphic shape, and
<text> in other cases (see above).
Obviously, HTML text in a drawing can embed mathematics and graphics.
In the above example, four different languages are used: HTML, GraphML, CSS and MathML. To support all these languages, Amaya uses three parsers:
The HTML parser is very specific, as it tries to parse real life's HTML pages. Although HTML is formally an SGML application, Amaya does not use an SGML parser to process HTML files. It uses an ad hoc parser that accepts many errors and recovers by restructuring ill-structured documents.
Amaya's XML parser is used for both MathML and GraphML, as both are XML applications. It could also be used for other XML objects embedded in HTML documents, as it has been designed as a multi-DTD parser.
To allow structures to be nested, the HTML and XML parsers can call each other and the XML parser can call itself with different DTDs (for example, when a mathematical expression in embedded in a drawing).
(To be provided).