Chris Pollett > Students >

    ( Print View )







    [CS 297 Report-PDF]

    [CS 298 Proposal]

    [CS 298 Final Demo]

    [CS 298 Presentation-PDF]

    [CS 298 Report-PDF]


CS298 Proposal

Stylesheet Translations of SVG to VML

Julie Nabong ( )

Advisor: Dr. Chris Pollett

Committee Members:
Dr. Agustin Araya, Dept. of Computer Science, SJSU
Dr. Robert Chun, Dept. of Computer Science, SJSU


The most common forms of graphics on the Web today are JPEG and GIF. In addition to these formats, two XML-based graphic types are available as open standards: SVG and VML. SVG and VML are vector graphic formats. These formats offer benefits such as fast Web download time, zoomable images, and searchable texts. Because these vector graphics are scalable, these images can be viewed in different screen sizes, such as PC displays and handheld devices. SVG and VML implementations are gaining popularity in Internet cartography and zoomable charts. SVG images can be viewed by downloading a plug-in, whereas VML images are rendered in Microsoft's Internet Explorer browser versions 5.0 and higher. Although SVG may be considered a more mature format over VML, it is unlikely it will be supported natively by Microsoft anytime soon. In this master's project, SVG images will be transformed into VML images contained in an HTML document that can be viewed without a plug-in. SVG images will be manipulated through the Document Object Model API and transformed into VML images using JavaScript, XSLT, and XPath. This project will address the issue of gradient discrepancies between the two formats and try to get the speed of the translation as close to that of the plug-in based solution as possible.

CS297 Results

  • Created an SVG image and a similar VML image. Used JavaScript, XMLDOM, and three stylesheets to transform an XML file into three HTML files containing different VML shapes.
  • Used JavaScript and XMLDOM to perform double transformation on an XML file to render VML shapes. The result of the first transformation was an XML file that was stored into memory then used for the second transformation. The result was a set of VML shapes resulting from XSLT calculations.
  • Experimented with the performance of JavaScript codes using matrix multiplication and drawing of VML shapes.
  • Transformed a simple SVG rectangle into a VML rectangle using a stylesheet.

Proposed Schedule

Week 1-2: Jan 29-Feb 6Study SVG DOM and interfaces for the SVG basic shapes.
Week 3: Feb 9-13Study the SVG tags and attributes that will be supported by the translator.
Week 4: Feb 16-20Study VML elements and attributes that will be used in the translator.
Week 5-6: Feb 23 - Mar 5Study SVG and VML color and shading techniques.
Week 7-8: Mar 8-19Implement and test the translator.
Week 9: Mar 22-26Enhance the translator.
Week 10: Apr 5-9Finalize the translator.
Week 11-12: Apr 12-23Start writing the report. Submit draft to the committee.
Week 13: Apr 26-30Finalize the report.
Week 14: May 3-7Prepare oral presentation.
Week 15-16: May 10-18Finish oral presentation. Oral defense.

Key Deliverables:

  • Software
    • An SVG stylesheet translator that supports these SVG tags: <circle>,<ellipse>,<font>,<g>,<line>, <linearGradient>,<path>,<polygon>,<polyline>, <radialGradient>,<rect>,<script>, <svg>,and< text>. The translator will be implemented using JavaScript and SVG DOM to load the source SVG document and render the result in an HTML document using XSLT.
  • Report
    • Description of the translation and CS298 Final Report.

Innovations and Challenges

  • SVG has its own SVG-specific interfaces to manipulate the SVG document. In this project, the translator will extract SVG elements and attributes using SVG DOM and JavaScript.
  • Map SVG features to available VML resources. Storing these features as efficiently and accurately as possible is a challenge, since XSLT does not allow modifications of values in data structures. As one of the results of 297 deliverables shown, the gradients in the two formats appeared differently. An additional challenge is to try to make SVG gradients appear the same in VML.
  • Finally, optimize the size and speed of the translation so it can be as close as possible to the plug-in based solution.


[G01] Danny Goodman. JavaScript Examples Bible. Hungry Minds, Inc. 2001.

[H01] Elliotte Rusty Harold. XML Bible (2nd Ed). John Wiley & Sons. 2001.

[H02] G. Ken Holman. Definitive XSLT and XPath. Prentice Hall PTR. 2002.

[HR01] Elliotte Rusty Harold. XML Bible. Hungry Minds, Inc. 2001.

[K01] Michael Kay. XSLT. 2nd Edition. Wrox Press Ltd. 2001.

[VML98] Introduction to Vector Markup Language. MSDN 1998.

[W03] Andrew Watt, et. al. SVG Unleashed. Sams Publishing. 2003.

[W3C99] XML Path Language (XPath).

[W3C01] SVG Document Object Model (DOM).