Constraint Scalable Vector Graphics, Accessibility and the Semantic Web
Regina M. Mathis
Graduate School of Computer and Information Sciences
Nova Southeastern University
[email protected]
Abstract
Graphics can represent concepts in a way that is easily
understood. Metadata can be utilized to enable users to
gain information related to the graphic and its content.
For the visually impaired, the ability to access the
information depicted in graphics would be an important
step towards web usability.
Constraint Scalable Vector Graphics (CSVG) is an
extension to SVG originally developed to provide increased
flexibility in describing diagrams.
CSVG provides
increased capability in the form of semantic zooming,
differential scaling and semantic preservation.
A research project is proposed to produce a global
ontology for CSVG written in Ontology Web Language
(OWL). OWL facilitates a greater degree of machine
understanding, greater expressivity and greater reasoning
capabilities than many other Semantic languages. The
CSVG ontology will enable graphics to be annotated in
varying levels of abstraction thereby allowing the graphic
to be reused in other contexts.
1. Introduction.
Using the World Wide Web of today, searching for a
graphic pertaining to a particular subject domain is a
difficult task. The current Web is primarily composed of
Web pages with information displayed in natural language
text and graphics. This information is geared towards
human viewing and use. Machines are merely used to
display the information either on screen or in printed format
[9]. As a result, a typical search for a graphic related to
specific subject matter will produce hundreds of thousands
of web resources. The reason that the number of hits
produced is excessive is that current search engines do not
understand the content of today’s Web pages. These hit
lists are produced using Meta tags, or keywords, to
categorize web resources. The search engine has no
understanding of the content of the web page [9].
The Semantic Web is earmarked to be the next
generation World Wide Web. Here the Web, and Web
resources, through the use of semantic markup, will
become understandable to machines. The theory behind the
Semantic Web is to add markup to the Web resource so that
the meaning of the content can be captured and then
encoded in a form that a machine can understand. This will
give machines the ability to locate, organize and integrate
available information. To support this capability, the
representation of Web resources must evolve to a more
detailed and structured format [9].
Graphics are a type of web resource. For sighted users,
graphics can represent concepts in a way that is easily
understood. Currently, most graphics are not accessible to
visually impaired users. By applying semantic markup to
graphics, powerful semantic search engines will be able to
pinpoint graphics relating to specific domains quickly and
efficiently.
Metadata enables semantic search engines to
understand the content and to infer relationships between
the content and specific domains. Metadata can also relate
specific graphics to application domains. The power of
metadata can be utilized to enable visually impaired users
to gain information related to the graphic and its content.
For the visually impaired, the ability to access the
information depicted in graphics would be an important
step towards web usability.
Scalable Vector Graphics (SVG) is an eXtensible
Markup Language (XML) based technology used to
describe two-dimensional graphics. Recently it has been
receiving notable attention due to its ability to fully scale
images without loss of resolution, provide file sizes that are
independent of the resolution, represent text as text strings
allowing the graphic to be fully searched for content, and
its support for a rich set of geometrical primitives.
Constraint Scalable Vector Graphics (CSVG) is an
extension to SVG originally developed to provide increased
flexibility in describing diagrams.
CSVG provides
increased capability in the form of semantic zooming,
differential scaling, and semantic preservation.
Currently there is a Resource Description Framework
Schema (RDFS) that was developed to annotate SVG. This
schema describes objects from an architectural viewpoint.
The schema, however, does not provide the flexibility to
annotate complex diagrams and has been found to be
inefficient and tedious [4]. The schema does not allow the
intentions of the author to be fully captured. Using the
current schema, annotations will reflect the architectural
structure in the form of the sequence of operations used to
create the diagram, but not the meaning behind the objects’
structure within the diagram itself [4].
The goal of this research project is to produce a global
ontology for CSVG written in Ontology Web Language
(OWL). OWL was chosen because it facilitates a greater
degree of machine understanding, greater expressivity, and
greater reasoning capabilities than many of the other
Semantic languages. The OWL specification is entitled
OWL Web Ontology Language because OWL is the
W3C’s current choice for defining structured, Web-based
ontologies. OWL adds additional vocabulary and increased
formal semantics making it semantically stronger than
Resource Description Framework (RDF), RDFS, Ontology
Inference Layer (OIL), Defense Advanced Research
Projects Agency’s Agent Markup Language (DAML) and
DAML+OIL.
The CSVG ontology will not only reflect the
architectural structure of the graphic but also the intended
meaning in its use. It will enable the graphic to be
annotated in varying levels of abstraction thereby allowing
the graphic to be reused in other contexts.
Unified Modeling Language (UML) will be used to
model the CSVG ontology written in OWL. UML will be
studied for effectiveness in modeling graphic ontologies
that are written in OWL. This is an important concept for
two reasons.
First, OWL is the W3C’s current
recommendation for developing ontologies, which will
enable advanced artificial intelligence based services.
Second, UML is an important foundational tool in software
engineering from which the Semantic Web will be
constructed.
2. Motivation
Development of a global ontology for CSVG is
significant for many reasons.
Graphics are used
extensively in the modern world. SVG has promised to
dramatically improve graphics on the web and is quickly
becoming a major factor in the creation of two-dimensional
graphics. In addition, because it is text based, SVG is
being used to create complete websites. An SVG graphic
contains instructions for rendering an image that are
independent of the viewing resolution. A graphic that is
shown at a higher resolution will display greater detail.
SVG files are more compact than raster images, easier to
process and analyze, make full use of Document Object
Model, and integrate well with HTML and Cascading Style
Sheets (CSS) [1].
Although graphics created using SVG scale nicely to
arbitrary resolutions and sizes there are some limitations.
SVG does allow flexibility in uniformly scaling an entire
graphic but there is little support for changes in the layout
design. These limitations include: screen resolution, size
and font preferences, scaling only parts of the graphic,
interactive exploration, and animation [1].
CSVG, which is an extension to SVG, was introduced
by Badros et al. (2001) [1]. CSVG was originally
developed to support greater flexibility when describing
diagrams. Using CSVG, the positions of objects within a
graphic are specified relative to other objects in the graphic
instead of absolute positions. As an example, a box could
be placed inside of a circle without exact positions. The
browser can then layout the graphic according to the
viewing conditions and can size the graphic as the browser
window size changes. The authors also add support for
alternate layouts, interaction, and declarative animation.
This extension is modular in its design, ensuring upward
compatibility with SVG’s original format.
CSVG allows for semantic zooming, differential scaling,
and semantic preservation manipulations.
Semantic
zooming is zooming that preserves the semantic
presentation but changes its appearance [1]. This is useful
in allowing the user to interactively select parts of the
diagram to examine in greater detail, while hiding the detail
of the non-selected parts. This changes the diagram layout
dynamically while preserving connections and efficiently
utilizing the screen space.
Differential Scaling enables the user to enlarge a part of
a diagram while simultaneously reducing the size of the
other parts of the diagram [1].
The result would be that
the parts not enlarged become smaller in size to
accommodate the area that is enlarged. The areas of
interest can then be viewed in greater detail while
preserving the relationships amongst all parts. This
involves scaling different areas of the diagram to different
degrees. Text in diagrams is an example. A visually
impaired user may want to reduce the size of the overall
diagram but increase the size of the text labels.
Semantic preserving manipulations give users the ability
to change the layout of the objects in the diagram
interactively, while preserving the logical structure or
semantic meaning [1].
By creating OWL ontology for CSVG, semantic search
engines will be able to locate CSVG graphics related to
specific domains. This is useful not only for visually
impaired users, but for users with a variety of impairments
and handicaps. Consider a person in a wheel chair that
wants to go on vacation. Having the graphics annotated in
OWL allows the person to locate various hotels in their
preferred vacation spot using semantic search engines. The
user can then examine the floor plans of the hotels to
determine the width of the hallways, whether there are
wheel chair ramps, where the elevators, fire exits and
public rest rooms are located and whether they are wheel
chair accessible. The user can further examine the guest
rooms to determine if the bathrooms have accessibility
bars, the height of the toilets, tubs, etc. If the graphic has
areas that are not fully explorative, the semantic markup
will give the user further information related to the graphic,
such as door dimensions, interior descriptions and other
useful information.
The exercise of developing CSVG ontology using UML
may contribute towards the knowledge of developing
ontologies of other multi-media products and systems.
Graphic ontologies require representation of both static and
dynamic characteristics. The lessons learned through this
process may prove to be applicable to other products and
systems, such as Synchronized Multimedia Integration
Language (SMIL) 2.0.
3. Literature Review
Fredj and Duce (2003) [4] built on the work of [1] by
defining a higher-level diagram description language that
captures the structure and the semantics of a diagram and
enables the generation of accessible presentations in
different formats such as speech, text and graphics. Their
project was called Graphical Structure Semantic Markup
Languages (GraSSML) and created three levels of
decomposition: presentation, structure, and semantics. The
presentation level uses SVG with added constructs from
CSVG. This work is promising; however it pertains
primarily to diagrams. Using OWL ontology to markup
CSVG graphics provides the flexibility to capture all
aspects of the CSVG graphic including, but not limited, to
diagrams.
Mong and Brailsford (2003) [11] performed some
experiments on using SVG as a Web rendering technology.
This allows a complete Web site to be created using SVG
as opposed to Hypertext Markup Language (HTML) and
CSS. Their findings were positive when converting both
structured and unstructured Portable Document Format’s
(PDF) into SVG. The negative aspects were related to the
fact that browsers, by default, use a rendering model that is
based on HTML/CSS. Because Adobe is a major supporter
of SVG, it is possible that future browsers will use SVG as
their default rendering model.
Gašević, Djurić, Devedžić, and Damjanović (2004) [8]
presented an automatic generation of UML to OWL. The
authors’ solution was based on using a Model Driven
Architecture (MDA) for ontology development with the
Ontology UML Profile (OUP). The technique presented
implemented an eXtensible Stylesheet Language
Transformation (XSLT) which translated the XML
Metadata Interchange (XMI) representation of a UML
profile into OWL.
Wang, Chan, and Hamilton (2002) [18] studied the
relationship between knowledge engineering and software
engineering in an effort to design knowledge-based
systems. The authors used UML as an ontology modeling
language and then proposed the Ontology-Domain-System
approach which combines the ontology model, the domain
model, and a system model. The result was that the authors
were able to use a UML-based ontology model to create a
system model.
4. Project Summary
The first step is to create the data model. SVG and
CSVG language constructs will be studied and the data
model will be constructed in UML. Poseidon for UML will
be used because it is a UML tool that supports XML
Metadata Interchange (XMI). XMI is a MDA XML based
standard for modeling metadata and for sharing models [7].
The next step is to use eXtensible Stylesheet Language
Transformation (XSLT) to transform the XMI documents
into OWL. XSLT is a language used to transform XML
documents into other XML documents [17]. The XSLT
processor will be used to transform the document into
OWL. XSLT contains a set of rules that match XMI
constructs, which can then be translated into equivalent
OWL primitives [7]. This resultant OWL document can
then be imported into an ontology development tool such as
Protégé if further refinements are necessary. The complete
process is depicted in Figure 1.
Figure 1. Proposed approach for CSVG data
model creation thru OWL ontology.
Figure 2. An example CSVG graphic in portrait layout.
Figure 3. The same graphic displayed with larger text. The result of the larger text is a different layout;
however the semantics of the graphic are preserved.
Figure 4. UML class diagram for a portion of the code shown above.
5. Concrete Example
As an example, consider the CSVG diagram shown in
Figure 2. A visually impaired user may want the text
labels to be shown in a larger font. In addition, this user
may have their monitor set to a lower resolution
producing a smaller viewing space. This example shows
that the graphic can respond to user interaction which
would result in dynamic layout transformation while
preserving the semantics of the diagram. Figure 3 shows
the same diagram as displayed on the user’s monitor.
A portion of the code to create the diagram in CSVG is
as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg
11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0
1200 400"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<desc>Example rect02 - rounded
rectangles</desc>
<!-- Show outline of canvas using 'rect'
element -->
<rect x="100" y="100" width="400"
height="200" rx="50"
fill="lightblue" stroke="black"
stroke-width="4" />
<!-- the "Graduate School of Computer and
Information Sciences" node -->
<rect class="node" id="r" x="100" y="100"
width="400" height="200" rx="50"
fill="lightblue" stroke="black"
stroke-width="4" cursor="pointer"
onmouseover="on('hover')"
onmouseout="off('hover')"
onmousedown="toggle('o')">
<c:constraint attributeName="width"
value="$nodeWidth"/>
<c:constraint attributeName="strokewidth" value="1 + $hover * 2"/>
</rect>
<text class="node" id="t" x="220" y="99"
font-size="18">
<c:constraint attributeName="x"
value="20 + $nodeWidth div 2"/>
<c:constraint attributeName="y"
value="90 + c:height(c:bbox(.)) div 2"/>
Graduate School of Computer and
Information Sciences
</text>
<line id="l" x1="40" y1="110" x2="40"
y2="330">
<c:constraint attributeName="y2"
value="id('r2')/@y + 20"/>
<c:constraint
attributeName="visibility" value="c:if($o,
'visible', 'hidden')"/>
</line>
</svg>
The resulting UML class diagram is shown in Figure 4.
The resulting UML class diagram is exported to XMI. An
XSLT processor takes the resulting XMI document as
input and produces the OWL description shown in Figure
5.
6. Issues and Concerns.
There are several issues of concern. First, the XMI
document structure will contain the full description of the
UML model, making it cumbersome and inefficient to
work with.
Another problem is that Ontology UML Profile (OUP)
may use more than one UML construct to model a single
OWL element. This complicates the transformation
because each UML construct reflects a different process
type. Typical UML tools will only draw UML models.
They will not verify that the OUP ontology is complete
[7]. To alleviate this obstacle, XSLT will be used to
verify the XMI documents.
Lastly, XSLT must differentiate between classes that
are defined in other classes and classes that can be
referenced using their ID. To remedy this, Gašević et al.
(2004) used odm.anonymous tagged values to aid in this
process.
<owl:Class rdf:ID="ConstraintDescriptor">
<owl:equivalentClass?
<owl:Class>
<owl:unionOf
rdf
parseType="Collection">
<owl:Class
rdf:about="#rule"/>
<owl:Class
rdf:about="#strength"/>
</owl:unionOf>
</owl:Class>
</owl.equivalentClass>
</owl:Class>
<owl:Class rdf:ID-"RectRule">
<rdfs:subClassOf
rdf:resource="#ConstraintDescriptor"/>
</owl:Class>
<owl:Class rdf:ID"rectA">
<rdfs:subClassOf
rdf:resource="#ConstraintDescriptor"/>
<owl:equivalentClass>
<owl:Class>
<owl:oneOf
rdf:parseType="Collection">
<ConstraintAttr
rdf:about="#rule"/>
<ConstraintAttr
rdf:about="#strength"/>
</owl:oneOf>
</owl:Class>
</owl:equivalentClass>
</owl:Class>
Figure 5. The resulting OWL description.
7. Conclusions and Future Work.
IEEE International Conference on Advanced
Technologies (ICALT'04), August 2004, 714 - 716.
The advances gained by widespread fruition of the
Semantic Web will benefit all types of users. Through the
use of semantic markup, not only will machines be able to
understand Web content, but users with impairments will
now have access to the meaning and content of graphics.
Adding semantic markup to CSVG graphics will enable
the graphics to be interactively modified in ways best
suited for users.
The focus of this research project is to create a global
ontology for CSVG graphics written in OWL. The CSVG
ontology will allow the intended meaning of the graphic
to be captured and annotated in varying levels of
abstraction. This will allow the graphic to be reused in
other contexts.
Graphic ontologies require representation of both static
and dynamic characteristics. UML will be used to model
the CSVG ontology because UML can represent both
these static and dynamic properties and it is an important
foundational tool in software engineering.
The
effectiveness of modeling graphical ontologies in UML
will be studied and may contribute towards the knowledge
of developing ontologies of other multi-media products
and systems.
[8] Holman, G. K. (2000, August 16). In What is XSLT? ().
Retrieved November 1, 2004, from O'Reilly XML.com Web
Site: http://www.xml.com/pub/a/2000/08/holman/
8. References
[1] Badros, G. J., Tirtowidjojo, J. J., Marriott, K., Meyer, B.,
Portnoy, W., & Borning, A. (2001). A Constraint Extension to
Scalable Vector Graphics. Proceedings of the 10th International
Conference on World Wide Web, April 2001, 489 - 498.
[2] Bederson, B. B., Grosjean, J., & Meyer, J. (2004). Toolkit
Design for Interactive Structured Graphics. IEEE Transactions
on Software Engineering, 30(8), 535-546.
[3] Foley, J. D., van Dam, A., Feiner, S. K., Hughes, J. F., &
Phillips, R. L. (1997). Introduction to Computer Graphics (Rev.
ed.). Boston: Addison-Wesley.
[4] Fredj, Z. B., & Duce, D. A. (2003). Schematic Diagrams,
XML and Accessibility. Theory and Practice of Computer
Graphics 2003, June 2003, 49 - 55.
[5]Froumentin, M. (2003). Advances in W3C Web Graphics
Standards. Proceedings of the SIGGRAPH 2003 Conference on
Web Graphics, in conjunction with the 30th Annual Conference
on Computer Graphics and Interactive Techniques, July 2003, 1.
[6] Gašević, D., Djurić, D., Devedžić, V., & Damjanović, V.
(2004). Converting UML to OWL Ontologies. Proceedings of
the 13th International World Wide Web Conference on
Alternate Track Papers and Posters, May 2004, 488 - 489.
[7] Gašević, D., Jovanović, J., & Devedži, V. (2004). Enhancing
Learning Object Content on the Semantic Web. Proceedings of
Learning
[9] Mathis, R. M., & Caughey, L. (2005). A Metadata Model for
Electronic Images. Proceedings of the 38th Hawaii International
Conference on System Sciences (HICSS- 38), January 2005, .
[10] Miller, E. (2004). The W3C's Semantic Web Activity: An
Update. IEEE Intelligent Systems, May/June 2004, 95 - 97.
[11] Mong, J. C., & Brailsford, D. F. (2003). Using SVG as the
Rendering Model for Structured and Graphically Complex Web
Material. Proceedings of the 2003 ACM Symposium on
Document Engineering, November 2003, 88-91.
[12] Rutledge, L. (2001). Multimedia Standards: Building
Blocks of the Web. IEEE Multimedia, July 2001, 13 - 15.
Seeman, L. (2004). The Semantic Web, Web Accessibility, and
Device Independence. Proceedings of the International CrossDisciplinary Workshop on Web Accessibility, May 2004, 67-73.
[13] Tokuda, H., Hagino, T., Murai, J., & Sone, Y. (2004).
Cyber Infrastructure and Governance of Next Decades.
Proceedings of the 2004 International Symposium on
Applications and the Internet Workshops (SAINTW'04),
January 2004, 1-6.
[14] van Ossenbruggen, J., Geurts, J., Cornelissen, F., Hardman,
L., & Rutledge, L. (2001). Towards Second and Third
Generation Web-Based Multimedia. Proceedings of the Tenth
International Conference on World Wide Web, April 2001, 479488.
[15] van Ossenbruggen, J., Geurts, J., Hardman, L., & Rutledge,
L. (2003). Towards a Multimedia Formatting Vocabulary.
Proceedings of the Twelfth International Conference on World
Wide Web, May 2003, 384-393.
[16] van Ossenbruggen, J., Nack, F., & Hardman, L. (2004).
That Obscure Object of Desire: Multimedia Metadata on the
Web, Part 1. IEEE Multimedia, October 2004, 38 - 48.
[17] W3C - XSL. (1999, November 16).
In XSL
Transformations (XSLT) Version 1.0 (). Retrieved November 1,
2004, from World Wide Web Consortium Web Site:
http://www.w3.org/TR/xslt
[18] Wang, X., Chan, C. W., & Hamilton, H. J. (2002). Design
of Knowledge-Based Systems with the Ontology-DomainSystem Approach. Proceedings of the 14th International
Conference on Software Engineering and Knowledge
Engineering, July 2002, 233 - 236.