Embedding Domain Semantics in SVG

Tyng-Ruey Chuang, Yi-Hong Chang

Institute of Information Science
Academia Sinica
Nankang, Taipei 115, Taiwan

{yhchang, trc}@iis.sinica.edu.tw
Phone: +886 2 2788-3799 ext. 1608, 1662
Fax: +886 2 2782-4814

February 2002

Extended Abstract

The extensibility of SVG [1] allows graphics elements to be combined with elements from other domains in SVG documents. For example, it has been shown that XHTML, MathML, and SVG can be combined into a single profile [2] so that XHTML documents can be authored and rendered with both MathML and SVG elements.

We show here several approaches to extending SVG so that domain semantics can be embedded into SVG. We are particularly interested in lightweight approaches where 1) graphics elements are simply augmented with domain data, and 2) the augmented documents are still valid (though extended) so they can be rendered by conventional SVG viewers (if the augmentation is ignored).

We also contemplate an introspective SVG API where certain geometry properties of graphic elements can be directly queried (instead of being computed by additional user scripts) and used in SVG applications.

I. Motivation

We have been developing Taiwan Social Map [3], a Web-based system where data from census and other socio-economical datasets is visualized with geographic data (such as a village/town boundary map) in SVG. Until now, census data (for example, local population size and density) is stored in, or computed by, ECMAScript and is displayed upon user interface events (for example, upon mouse movement). One drawback of this approach is that population data is not evident in the SVG document --- it is hidden in script --- and as a result is difficult to be extracted by other XML processors.

A better way is to output population data as new XML elements (or new attributes of existing elements), and have them embedded in the SVG map. We then need ways to associate SVG graphics elements (such as polygon which represents a village/town boundary) to population data. We would like to emphasis that the resulting documents are still SVG (hence can be rendered by conventional SVG viewers). We just want to augment SVG documents with domain-specific data. Of course, we could embed an SVG map in an enclosing XHTML document and use XHTML elements to annotate the population data (much as what has been described in [2]). But this is less attractive to us as we like to use domain-specific vocabulary, not XHTML vocabulary, for the annotation.

II. Adding Domain-specific Data to SVG Documents

We describe three ways to extend SVG to embed domain-specific data. The methods can also be combined together to achieve better effect. Each method is accompanied with a complete SVG document.

II.1 Extending Existing SVG Elements with New Attributes

Suppose that each village/town boundary is visualized with a SVG polygon element, and we need to associate each boundary with its size (the area it encloses), its length (the circumference), and its geometric center (centroid). We just extend the definition of SVG polygon with three new attributes! See below for an example.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY % m.geo.att.area " area CDATA #IMPLIED">
	<!ENTITY % m.geo.att.circumference " circumference CDATA #IMPLIED">
	<!ENTITY % m.geo.att.centroid " centroid CDATA #IMPLIED">
	<!ENTITY % m.geo.att.length " length CDATA #IMPLIED">	
	<!ATTLIST polygon
		%m.geo.att.area; 
		%m.geo.att.circumference; 
		%m.geo.att.centroid;>
]>

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon id="_10001001" points="10,10 10,90 90,90 10,90" area="6400" circumference="320"/>
</svg>

The advantage of this approach is that the relations between the SVG element and the embedded annotations are quite clear: They appear as the SVG's new attributes. The disadvantage, when compared with the following two methods, is that it does not allow structural annotations.

II.2 Extend the Content Models of Existing SVG Elements Using Namespace

As the example below shows, we extend the content model of the element type <svg> so that it can contain <canton> elements. The element type canton is from a namespace that is our domain-specific vocabulary. The content model of <canton> consists of all the necessary semantics elements: name, boundary, etc. The boundary, of course, is an SVG <polygon> element. The area and the circumference of the boundary, however, are not attributes of the polygon elements but two element types from the new namespace.

A drawback is that the resulting XML document is not a conventional SVG document and may not be rendered by SVG viewers (the polygon element is inside of a canton element which the viewers may not recognize). The major advantage is that one can use a whole new vocabulary for the domain of our interest. The relationship between graphics elements and their semantics elements is also clear.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ATTLIST svg
		xmlns:m CDATA #IMPLIED>
		
	<!ENTITY % SVG.svg.extra.content "| m:canton">
	
	<!ELEMENT m:canton (m:name*, m:statistic, m:boundary)>
	
	<!ATTLIST m:canton
		id ID #REQUIRED
		bndtype (village | county) #REQUIRED>
		
	<!ELEMENT m:name EMPTY>
	<!ATTLIST m:name
		lang (chinese | tonyonPinyin) "chinese"
		desc CDATA #REQUIRED>
		
	<!ELEMENT m:statistic (m:population)>
	
	<!ELEMENT m:population EMPTY>
	<!ATTLIST m:population
		count CDATA #REQUIRED>
		
	<!ELEMENT m:boundary (( g | path | polygon | polyline | rect | circle | ellipse | line)*, m:geometricInfo)>
	
	<!ENTITY % m.geo.att.area " area CDATA #IMPLIED">
	<!ENTITY % m.geo.att.circumference " circumference CDATA #IMPLIED">
	<!ENTITY % m.geo.att.centroid " centroid CDATA #IMPLIED">
	<!ENTITY % m.geo.att.length " length CDATA #IMPLIED">
	
	<!ELEMENT m:geometricInfo EMPTY>
	<!ATTLIST m:geometricInfo
		%m.geo.att.area; 
		%m.geo.att.circumference; 
		%m.geo.att.centroid;>

]>
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:m="http://example.tsm.iis.sinica.edu.tw">
	<m:canton id="_10001001" bndtype="village">
		<m:name lang="tonyonPinyin" desc="myvillage"/>
		<m:statistic>
			<m:population count="100"/>
		</m:statistic>
		<m:boundary>
			<polygon points="10,10 10,90 90,90 10,90"/>
			<m:geometricInfo area="6400" circumference="320"/>
		</m:boundary>
	</m:canton>
</svg>

II.3. Use Xlink to Associate SVG Elements and Domain-specific Elements

The idea is to put domain-specific elements inside of an SVG < def> element. An SVG polygon element representing a canton then has a xlink:href attribute that associates the polygon to the canton. Compared with the previous method, this method has the advantage the resulting document can be easily recognized by conventional SVG viewers and be rendered.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ATTLIST svg
	xmlns:m CDATA #IMPLIED>
	
	<!ENTITY % SVG.defs.extra.content "| m:canton">
	
	<!ELEMENT m:canton (m:name*, m:statistic, m:geometricInfo)>
	<!ATTLIST m:canton
		id ID #REQUIRED
		bndtype (village | county) #REQUIRED>
		
	<!ELEMENT m:name EMPTY>
	<!ATTLIST m:name
		lang (chinese | tonyonPinyin) "chinese"
		desc CDATA #REQUIRED>
		
	<!ELEMENT m:statistic (m:population)>
	
	<!ELEMENT m:population EMPTY>
	<!ATTLIST m:population
		count CDATA #REQUIRED>
		
	<!ELEMENT m:geometricInfo EMPTY>
	<!ATTLIST m:geometricInfo
		area CDATA #IMPLIED
		circumference CDATA #IMPLIED>
		
	<!ENTITY % m.XLink.attrib "xlink:type ( simple ) #FIXED 'simple'
     		xlink:href CDATA #REQUIRED
     		xlink:title CDATA #IMPLIED
     		xlink:actuate ( onRequest ) #FIXED 'onRequest'">
     		
	<!ATTLIST polygon
		%m.XLink.attrib;>
]>
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:m="http://example.tsm.iis.sinica.edu.tw" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<m:canton id="info_10001001" bndtype="village">
			<m:name lang="tonyonPinyin" desc="myvillage"/>
			<m:statistic>
				<m:population count="100"/>
			</m:statistic>
			<m:geometricInfo area="6400" circumference="320"/>
		</m:canton>
	</defs>
	<polygon id="_10001001" points="10,10 10,90 90,90 10,90" xlink:href="#info_10001001"/>
</svg>

II.4 A Combined Example

We just show here an example that combines the previous three methods. Enjoy!

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ATTLIST svg
	xmlns:m CDATA #IMPLIED>
	
	<!ENTITY % SVG.defs.extra.content "| m:canton">
	
	<!ELEMENT m:canton (m:name*, m:statistic)>
	<!ATTLIST m:canton
		id ID #REQUIRED
		bndtype (village | county) #REQUIRED>
		
	<!ELEMENT m:name EMPTY>
	<!ATTLIST m:name
		lang (chinese | tonyonPinyin) "chinese"
		desc CDATA #REQUIRED>
		
	<!ELEMENT m:statistic (m:population)>
	
	<!ELEMENT m:population EMPTY>
	<!ATTLIST m:population
		count CDATA #REQUIRED>
		
	<!ENTITY % m.XLink.attrib "xlink:type ( simple ) #FIXED 'simple'
     		xlink:href CDATA #REQUIRED
     		xlink:title CDATA #IMPLIED
     		xlink:actuate ( onRequest ) #FIXED 'onRequest'">
     		
	<!ENTITY % m.geo.att.area " area CDATA #IMPLIED">
	<!ENTITY % m.geo.att.circumference " circumference CDATA #IMPLIED">
	<!ENTITY % m.geo.att.centroid " centroid CDATA #IMPLIED">
	<!ENTITY % m.geo.att.length " length CDATA #IMPLIED">
	
	<!ATTLIST polygon
		%m.geo.att.area; 
		%m.geo.att.circumference; 
		%m.geo.att.centroid; 
		%m.XLink.attrib;>
		
	<!ATTLIST path
		%m.geo.att.area; 
		%m.geo.att.circumference; 
		%m.geo.att.centroid; 
		%m.geo.att.length; 
		%m.XLink.attrib;>
		
	<!ATTLIST polyline
		%m.geo.att.length; 
		%m.XLink.attrib;>
]>
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:m="http://example.tsm.iis.sinica.edu.tw" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<m:canton id="info_10001001" bndtype="village">
			<m:name lang="tonyonPinyin" desc="myvillage"/>
			<m:statistic>
				<m:population count="100"/>
			</m:statistic>
		</m:canton>
	</defs>
	<polygon id="_10001001" points="10,10 10,90 90,90 10,90" area="6400" circumference="320" xlink:href="#info_10001001"/>
</svg>

III. An Introspective API for SVG?

Let's look at the last example again. There, the polygon element is augmented in two ways: by adding two new attributes (about its area and circumference), and by using an xlink reference (to a canton element). The polygon is augmented in two ways to make a point: Every polygon has an area and a circumference (the two are the properties of a polygon shape), while not every polygon is associated with a canton.

Since area and circumference are well-defined properties of a polygon shape, why not let the SVG viewer compute them when it renders the polygon? The computed results are then accessible by the usual DOM API. The benefit is that one need not duplicate work that is best done by the SVG viewer: One need not to statically compute these results when the SVG document is being generated, or to do it dynamically using ECMAscript when the document is being viewed. Such an introspective API for SVG will help reduce many coding effort when generating dynamic SVG graphics.

IV. More to Come

A new Taiwan Social Map system that incorporates the above ideas is currently be developed. It will use GML (Geographic Makeup Language [4]) and DDI (Data Documentation Initiative [5] or similar vocabulary) alone with SVG. A social map is now an SVG document with embedded domain-rich semantics. The system is currently in the work and we will report our progress at the conference.

References

[1] Scalable Vector Graphics (SVG) 1.1 Specification: W3C Recommendation 14 January 2003, http://www.w3.org/TR/SVG11/

[2] "An XHTML + MathML + SVG Profile", M. Ishikawa editor, W3C Working Draft 9 August 2002, http://www.w3.org/TR/2002/WD-XHTMLplusMathMLplusSVG-20020809/

[3] Yi-Hong Chang and Tyng-Ruey Chuang. An XML-based Taiwan Social Map. http://tsm.iis.sinica.edu.tw

[4] Geography Markup Language (GML) 2.0, OpenGIS Implementation Specification, 20 February 2001, http://www.opengis.net/gml/01-029/GML2.html

[5] Data Documentation Initiative (DDI) , http://www.icpsr.umich.edu/DDI/