SVG: An XML Standard for Vector Graphics

SVG: An XML Standard for Vector Graphics

SVG is an XML-based vector graphics language for describing two-dimensional graph-ics. It builds on well-established vector graphics concepts that are also implemented in other popular vector formats, including Encapsulated Postscript (EPS) and Windows Meta File (WMF). However, SVG differs from other vector graphics formats in that it is solidly based in XML standards. Aside from enabling the use of XML tools and tech-nologies with SVG, this gives SVG the unique advantage of being particularly well suited for visualizing XML data. There are three basic types of graphic objects in the SVG language: vector graphic shapes (including lines, curves and shapes), images, and text. These objects may be grouped, styled, and transformed. SVG graphics can be dynamic, such as incorporating animation and interactivity, thus enabling them to change in response to user input. Being an XML-based language, an SVG vector graphics dia-gram is generally represented for visualization as a Document Object Model (DOM), although it may be processed using other methods, such as Simple API for XML (SAX). This DOM may be manipulated with scripting to change its presentation and make

it interactive. Conversely, SVG elements may trap user input events, including onmouseover and onclick events, and then make scripting callbacks in response to the se events. SVG graphics may be embedded in Web pages to create dynamic, interactive vector graphic visualizations for Web applications, and they may also be printed in documents formatted with XSL-formatted objects.

The SVG Standard

The SVG standard is overseen by the W3C (www.w3.org). The first draft of the specifica-tion was released in February 1999. The latest W3C recommendation for the SVG 1.0 specification was released September 2001. The MIME content type for SVG is image/svg+xml. SVG has wide industry support, both in terms of its development and the provision of tools, APIs, and content. It is based on well-established, proven vector graphics techniques but differs from its predecessors in that it is both well formed and valid XML. The XML DTD may be found at the W3C. A key area in which SVG is being applied is in Web pages, where it is rendered in a Web browser using a plug-in, the most popular of which is currently the Adobe SVG Viewer (www.adobe.com).

XML Technologies Related to SVG

Aside from simply providing another vector graphics format, SVG brings significant power to vector graphics in that it is an XML-based language. This enables users to leverage other XML standards in delivering and enhancing SVG vector graphics. This section briefly outlines various key XML technologies and how SVG relates to them:

Document Type Definition (DTD). SVG is valid XML and therefore has its own DTD that may be used to validate SVG documents. XML documents may be trans-formed into SVG for vector graphics visualizations. These XML documents may be validated with their own DTDs to ensure their validity prior to transformation into SVG.

   eXtensible Markup Language (XML). XML documents may contain content and data that may be transformed into SVG vector graphics visualizations.

   eXtensible Stylesheet Language Transformations (XSLT). XSL documents may be used to transform XML documents containing data into SVG documents that con-tain vector graphics visualizations of the XML data. This usage pattern is similar to the use of XSL in adding presentation information to XML for the generation of XHTML Web pages, except in the case of SVG, where the output of the transfor-mation is an SVG document rather than an XHTML document.

   eXtensible Hypertext Markup Language (XHTML). SVG documents may be embedded in XHTML to deliver Web pages with dynamic and interactive vector graphics.

   Cascading Style Sheets (CSS). SVG vector graphics may incorporate styles, such as colors and fonts. It is often necessary to have consistent SVG styles across mul-tiple SVG vector graphics—for example, on a business Web site with a well-defined look and feel for marketing its brand. To do this in a manageable way, it is desirable to consolidate style information in a central place referenced by all the SVG diagrams. CSS may be used to consolidate style information that may then be referenced from and incorporated into SVG vector graphics diagrams.

   ECMAScript and JavaScript. SVG vector graphics may be dynamic and interactive. To define dynamic and interactive behavior of SVG diagrams, it is necessary to

provide executable logic. This is conveniently done in the form of scripts (ECMAScript and JavaScript) that are associated with the SVG vector graphics diagrams.

   XSL Formatting Objects (XSL-FO). In addition to XSLT, the other component of XSL is XSL-FO, which adds precise formatting information to XML documents (for example, for printing). These diagrams may incorporate embedded SVG vector graphics diagrams.

   Synchronized Multimedia Integration Language (SMIL). Pronounced smile, this XML language enables simple authoring of interactive audiovisual presentations that may incorporate SVG vector graphics diagrams.