计算机科学技术系98级 任品.doc

Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)An In-depth Analysis of Scalable Vector Graphics计算机科学技术系98级 任品Abstract:A new two-dimensional vector graphics standard named Scalable Vector Graphics (SVG) 1 is emerging. It is based on the XML and vector graphics technology and developed by the W3C organization and other major industry players. It promises to bring the fast and rich-content graphics to the web while overcoming the shortcomings of traditional raster graphics. SVG introduces a lot of exciting features to the web graphics world, and can be seamlessly integrated into other existing web technologies. This paper will give an in-depth analysis to this new graphics standard, focusing on its features, industrial implementation status, the related research fields and the future work. At last we use a demo to demonstrate the discussed features. Keywords: SVG, XML, graphics standard, vector graphics, web-based graphics摘要：SVG（Scalable Vector Graphics）是一种新的二维矢量图形标准，它基于XML技术，由W3C组织负责开发制订。SVG能给网络应用带来快速高效，效果丰富的图形，同时克服了传统光栅图形的不足。SVG给网络图形应用领域引入了很多新的技术特性，还可以和其他现存的网络技术无缝集成应用。本文将重点分析SVG的技术特性，相关的关键应用实现和研究进展，并提出自己的观点，最后展示一个作者实现的SVG的应用实例。关键词：SVG，XML，图形标准，矢量图形，网络图形 1 Introduction to the Scalable Vector GraphicsOne of the ultimate goals for web technologies is to be able to provide the web users with a clear and effective communication environment. To achieve this goal, fast, scalable and rich-content graphics is indispensable. However, the traditional raster graphics such as GIF and JPEG can only meet some of the criteria. They are big, slow, and resolution-fixed. SVG is designed to improve this situation. With this new graphics format, the complex graphics layouts, sophisticated geometric objects, resolution-scalable artworks and highly interactive animations with a reasonable small file size are all possible for the web pages and other applications. The SVG format is based on the XML 2 technology. XML is the universal format for structured documents and data on the Web and regarded as the key to the next generation Web. SVG uses the XML grammar to define the scalable vector-based 2D graphics and can be used as a XML Namespace 3 in the web, therefore it is able to cooperate easily with other XML-based web technologies. Being a XML Namespace, a SVG document is a born XML document, so it can enjoy all advantages the XML documents have. For example, it is able to be easily edited by the plain text editors and dynamically generated by the server side script languages such as PERL and PHP. SVG is an open standard technology. It is developed by the W3C. The W3C (World Wide Web Consortium) is an organization to develop interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. To make SVG more practical and vendor neutral, major industry companies in this field are invited to develop this standard together, including Microsoft, Adobe, Canon, Kodak, IBM, Sun and so on. The W3C has just released SVG 1.0 Specification 4 as a W3C Recommendation in this September. An official Test Suite 5 has also been issued by the W3C. All the tests are designed to guarantee the implementation of features defined in the specification and the conformance of various implementations to one specific feature. 2 The features of SVG2.1 OverviewAs a graphics standard, SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects. SVG drawings can be interactive and dynamic, animation are defined and triggered either declaratively (to use the same mechanism as the SMIL 6) or via scripting.SVG is naturally ready for the web use. As a XML namespace, it is compatible with almost all the prevailing web technologies. Web graphics applications can benefit a lot from the small size of SVG files and the arresting expressiveness of SVG graphics. 2.2 Basic features SVG uses specific tags to define basic vector graphics objects such as rect, circle, ellipse, polyline, polygon and so on. Complex graphics that cannot be described by the basic shapes are defined as Path. There are two kinds of SVGs Path, lines and curves, while arcs and Bezier curves are the major means to define curves. SVG graphics are rendered into a finite rectangular region, which is called viewport. A negotiation process between the SVG document fragment and its parent determines the size of the SVG viewport. After establishing a viewport, a new viewport and user coordinate system is implicitly formed. A new user space can be established at any place within a SVG document by specifying a transformation matrix, including rotation, skewing, scaling, and translation. SVG uses a “Painters Model” for rendering. All the paint operations are processed successively. The first element in the SVG document getting painted first, subsequent element are painted on top of previously painted elements. Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing. The following two rendering properties color-interpolation and color-rendering provide information about the color space to apply the compositing operation. All SVG colors are specified in the sRGB color space. Additionally, SVG content can specify an alternate color specification using an ICC (International Color Consortium) 7 profile. If ICC-based colors are provided and the SVG user agent supports ICC color, then the ICC-based color takes precedence over the sRGB color specification. The ICC profile is a standard for documenting the color characteristics of input and output devices. Using this standard, it is possible for SVG content to be correctly transformed and viewed on different devices. SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. Styling properties can be assigned either using SVGs presentation attributes or using CSS 8. For each style property defined in SVG, there is a corresponding presentation attribute (XML attribute). To change the styling result, we can simply alter the value of the relevant presentation attributes. CSS is a widely implemented declarative language for assigning styling properties to HTML or XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many application of SVG. CSS rules can be neatly exploited in SVG document as external CSS style sheet, internal CSS style sheet or inline style. XSLT 9 is another useful tool for styling. XSLT defines how to transform XML content into something else, usually other XML. We can obtain totally different exterior styling results via applying proper XSL style sheets to one SVG document. 2.3 Rich-content graphicsThe text capability in SVG is powerful. Text can be rendered in a horizontal、vertical line or along a complex path. In SVG all the parameters for generating text can be declaratively specified, such as font family, font size, position, width etc. SVG also supports external font description files, which can be entirely embedded into a SVG document. SVG performs no automatic line breaking or word wrapping. Tag can be used to realize line breaking and layout arrangement. In SVG text in the graphics is searchable as plain text. This feature makes it much easier to search for specific graphics contents.SVG allows any painting operation limited to a sub-region of the viewport by clipping and masking. Clipping paths use any combination of paths, text and basic shapes to serve as the outline of a 1-bit mask, where everything on the inside of the outline is allowed to show through but everything on the outside is masked out. Masks are container elements, which can contain graphical elements, or other container elements that define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background. One key distinction between a clipping path and a mask is that clipping paths are hard masks whereas masks consist of an image where each pixel value indicates the degree of transparency and opacity. In a mask, each pixel value can range from fully transparent to fully opaque. The most exciting rich-content feature is Filter. A filter effect consists of a series of graphics operations that are applied to a given source graphics to produce a modified graphical result. The result of the filter effect is rendered to the target device instead of the original source graphic. When combined with the 2D power of SVG, filter effects can describe much of the common artwork on the Web in such a way that client-side generation and alteration can be performed easily. So far there are 19 filter primitives in the SVG specification 1.0. Each filter primitive performs a single fundamental graphical operation. Filter primitives are usually combined to achieve a complex filter effect. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA image. 2.4 Dynamic featuresBecause the Web is a dynamic media, SVG supports the ability to change vector graphics over time. SVG provides two major animation means: using SVGs animation elements or using SVG DOM.SVGs animation elements are developed in collaboration with W3Cs SMIL working group. The animation elements support the time-based modification to the SVG documents elements. They share the same timing and animation mechanisms with SMIL. The animation defines a mapping of time to values for the target attributes. This mapping accounts for all aspects of timing, as well as animation-specific semantics.Various SVG elements can be animated, such as color value, position, filter parameters etc. The Document Object Model (DOM) 10 is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. SVG offer a set of additional DOM interfaces (ECMAScript and Java bindings) to support efficient animation via scripting. All the SVG elements and their attributes can be accessed by using DOM, so it is less limited and more powerful than the animation elements.SVG graphics can also be highly interactive. SVG supports many UI (user interface) events and pointing events. It provides a quick and effective mechanism to process these events. Moving or clicking the mouse over any graphics elements is able to generate immediate feedback, such as highlighting, text tips, and real-time changes to the surrounding HTML text. Animations and scripts executions can also be triggered by this mechanism. With this interactive feature, SVG is capable in game making. Roid 11 made by Kevin Lindsey is a good start point. 2.5 Enhanced features for web useThe most important reason for developing SVG is to meet the needs in Web graphics. Benefiting from the introduction of vector graphics, SVG documents can be much smaller than the traditional raster graphics because it is unnecessary for them to record information of each pixel. Further more, SVG document is plain text, it can be easily compressed using GZIP 12 format. The rendering mechanism in SVG makes best use of the processing power at client-side. It uses the network bandwidth wisely and efficiently while easing the burden of the server-side.Being a XML namespace, SVG can readily cooperate with other XML-based technologies. For example, SVG uses existing standards XLink 13 and XPointer 14 to realize the hyperlink ability. Hyper links may be used to refer to other files, resources or some elements within a XML (including SVG) document. It is more convenient and powerful than the hyperlink ability supported by the current HTML. Metadata is structured data about data. It provides information about resources (document, data, graphics etc). In the computing industry, there are ongoing standardization efforts towards metadata with the goal of promoting industry interoperability and efficiency. SVG also supports metadata, which can be embedded into SVG documents to provide the information about the graphics contents to enable SVG to strongly support the automation, integration and reuse of data across various applications. 3 Implementation status 3.1 OverviewTo promote SVGs popularity, good industry implementations are the preconditions. All the implementations can be classified into four catalogs: viewing tools, authoring tools, developing tools, server-side generating and format converting tools. The detailed official list of implementations is on the W3Cs web site 15. This paper will select one or two representative implementations of each catalog for in-depth probe. 3.2 Viewing toolsThe most commonly used SVG viewing tool is the Adobes SVG Viewer 16. It is a plug-in that the web browsers use to render SVG. It works on the windows and Mac platforms. The latest version is 3.0 beta2. It not only supports almost all the SVG features listed in the specification, but also adds some new features such as mp3 sound. Just as Macromedias Flash 17 plug-in, the biggest problem of SVG viewer is that it is not very convenient for the end users to install the plug-in especially in order to gain the SVG viewing ability. Both the latest Internet Explorer and Netscape Navigator dont support SVG at this moment. That is the key point.Besides SVG Viewer, other SVG viewing tools are standalone applications. Common people prefer easiest way to view SVG, the way just like viewing other graphics, so these SVG viewing applications are not so competent as SVG Viewer in the business market. Most of them are just experimental prototypes for research purpose, such as IBMs SVGView. 18 3.3 Authoring toolsMany professional vector graphics authoring software are able to export graphics contents into SVG files. Because SVG is a vector graphics format itself, it is not too difficult for these tools to gain the exporting capability. Adobes Illustrator and Corels CorelDraw are examples in case.The current implementations of the exporting ability in the software are preliminary. For they must build the exporting ability onto the previous infrastructure, it is limited to fully exploit the expressive force of SVGs feature set. For instance, Illustrator can make many wonderful image-processing effects to the vector graphics, which can also be achieved by using SVG filters. When exporting to SVG files, Illustrator only simply saves the graphics with effect into a section of image data embedded into the SVG files, just because the two effect mechanisms are not corresponding. This compromise surely undermines the advantages of the exported SVG files. Another kind of SVG authoring tools is a standalone application wholly authoring SVG graphics. The most representative one is Jascs WebDraw 19, which was formerly known as Trajectory Pro. The WYSIWYG (What You See Is What You Get) visual editing of filters is a notable feature. It can edit the SVG source code directly for maximum control and flexibility with the automatic source code validation and error reporting. The drawback of WebDraw is its immaturity, for it is only in the preview stage. After all, it is a newly developed application without previous foundations.3.4 Developing tools In SVG world the most important developing tool is Batik 20, which is developed by Apache organization. It is a Java(tm) technology based toolkit for applications that intend to use images in the SVG format for various purposes, such as viewing, generation or manipulation. Batik is an open source project with the ambition to give developers a set of core modules, which can be used together, or individually to support specific SVG solutions. Example modules are SVG parsers, SVG generators and SVG DOM implementations. The current developer release version is batik-1_1rc2 in this September. Batik has implemented most of the static features of SVG specification, but hasnt done well enough in the dynamic features. Testing in the official test suites, Batik passed in 91 static tests (total 94), while only 5 in dynamic tests (total 32). One important reason for this imbalance status lies in Batiks system infrastructure. The Batik modules are classified into three types: application modules, core modules, and low-level modules. The application modules represent independent SVG application tools. The core modules offer interfaces to the application level, while transforming the SVG feature set to the low-level modules feature set. All rendering processes are done in the low-level module GVT (Graphic Vector Toolkit), which is an existing open source toolkit. The rendering mechanism in GVT doesnt support the dynamic changes to graphical objects. This drawback ultimately results in the limited processing power in dynamic features for the all batik applications.Nonetheless, Batik is very important because it provides the developers a versatile groundwork in nearly all the aspects of SVG. It is much easier for developers to design their applications basing on batik toolkits.3.5 Generating and converting toolsBecause SVG files are al