stylesheet translations of svg to vml · 2004-05-26 · introduction - motivation jpeg: 3001 b gif:...
TRANSCRIPT
![Page 1: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/1.jpg)
Stylesheet Translations of SVG to VML
Student:
Advisor:
Committee Members:
Julie Nabong
Dr. Chris Pollett
Dr. Agustin ArayaDr. Robert Chun
May 2004
![Page 2: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/2.jpg)
Topics� Introduction
� Motivation
� Objectives
� Requirements
� Approach
� Implementation Features
� Results
� Limitations
� Conclusion
� Demo
![Page 3: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/3.jpg)
Introduction - Motivation
gif: 3601 bjpeg: 3001 b bmp: 150,742 b
svg: 274 b
![Page 4: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/4.jpg)
Motivation (cont.)
� SVG
� smaller file size
� zoom – same quality
� text editor
� JPEG, GIF
� longer download
� zoom – lose quality
� Paint, Macromedia,…
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
����������������������������������
![Page 5: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/5.jpg)
Motivation (cont.)
� Scalable Vector Graphics
� W3C Recommendation
� Jan 2003
� two-dimensional graphics
� XML-based
![Page 6: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/6.jpg)
� SVG
� does not work in Netscape 6.01
� can be viewed in I.E., but
� inconvenience
� search viewer
� download ~ 2MB viewer
� install
Motivation (cont.)
![Page 7: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/7.jpg)
Motivation (cont.)
� Solution – transform SVG to VML
• works in I.E.
• no extra software needed
• text editor
• XML
• zoom – same quality
![Page 8: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/8.jpg)
Motivation (cont.)
� Vector Markup Language
� W3C Recommendation Candidate
� two-dimensional graphics
� XML-based
![Page 9: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/9.jpg)
Project Objectives
� develop software
� accepts SVG document input
� outputs document with VML
� goal:
� eliminate need for plug-in
� display SVG transparently
![Page 10: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/10.jpg)
Requirements
1. an SVG document – with supported tags
2. an XSLT stylesheet – translator.xsl
3. an HTML document – display.html
a. loads SVG and stylesheet
b. has transform method
c. displays result
4. browser - I.E. 6.0
![Page 11: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/11.jpg)
Approach
� World Wide Web Consortium (W3C)
� W3C Recommendations
HTML4.01 XSLT
XML
![Page 12: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/12.jpg)
XSLT
� eXtensible Stylesheet Language
Transformation
� W3C Recommendation, Nov 1999
� XML-based
� Goal: transform XML documents
![Page 13: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/13.jpg)
Approach (cont.)
XML
text
XML
XSLT
![Page 14: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/14.jpg)
Approach (cont.)
SVG
XSLT
XSLT Processor
browser
VML
web document
![Page 15: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/15.jpg)
Approach (cont.)
SVG
browser
XMLParser
svg
circle line text
![Page 16: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/16.jpg)
Approach (cont.)
XSLT File: Stylesheet
template
template
template
template template
template
template
template
template
<..................JavaScript………..>
![Page 17: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/17.jpg)
Approach (cont.)
svg
circle line text
XSLT
VML
instruction
instruction
instruction
VML
output
![Page 18: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/18.jpg)
Implementation Features
1. Direct mapping
2. No mapping
3. Scripting
<rect> <v:rect>
5. Events
<g> <xsl:if
function getPoints(svgpoints) {... return points; }
<OBJECT …>
4. Gradients
![Page 19: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/19.jpg)
SVG
<rect>…</rect>
XSLT
<v:rect>….</v:rect>
output
…
…
Implementation Features –1. Direct mapping
![Page 20: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/20.jpg)
� Transformation of <rect> Element
Implementation Features –1. Direct mapping (cont.)
SVG VML
Stylesheet
![Page 21: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/21.jpg)
Implementation Features –2. No mapping
SVG
<g…>
<rect../>
<circle../>
<polyline…/>
</g>
<g..>
</g..>
![Page 22: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/22.jpg)
Implementation Features –2. No mapping (cont.)
<g …><rect…/><circle…/><polyline…/>
</g>
template
1. check if parent is ‘g’2. if yes, get info3. if no, get rect’s info4. render image
XSLT
SVG
![Page 23: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/23.jpg)
� Transformation of <g> Element
Implementation Features –2. No mapping (cont.)
Stylesheet
SVG VML
![Page 24: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/24.jpg)
Implementation Features –3. Scripting
<path…>
…points…
</path>
SVG
<…..JavaScript….>
XSLT
output
<v:curve…>
![Page 25: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/25.jpg)
Implementation Features –3. Scripting (cont.)
Stylesheet
� Transformation of <path> Element
SVG VML
![Page 26: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/26.jpg)
Implementation Features –4. Gradients
� Gradient – smooth transition of one color to another
linear radial
examples:
![Page 27: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/27.jpg)
Implementation Features –4. Gradients (cont.)
Stylesheet
SVG circle to VML oval = OK, but…
SVG radial gradient VML radial gradient
![Page 28: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/28.jpg)
Implementation Features –4. Gradients (cont.)
Stylesheet
SVG rectangle to VML rectangle = not OK
SVG radial gradient VML radial gradient
![Page 29: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/29.jpg)
Implementation Features –4. Gradients (cont.)
Stylesheet
SVG VML
Solution
![Page 30: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/30.jpg)
Implementation Features –5. Events
XSLT
output
event
<svg> <svg>event
<script>
output
event
![Page 31: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/31.jpg)
� Stylesheet
� 23 templates
� JavaScript
� 1,430 lines
Results
![Page 32: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/32.jpg)
Results (cont.)
� Experiment Data
601200
501150
350100
16050
7010
Translation Time in MillisecondsNum of Elements
![Page 33: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/33.jpg)
Results (cont.)
� Experiment ChartTranslation Time in Milliseconds
0
100
200
300
400
500
600
700
10 50 100 150 200
Number of Elements (circles, ellipses, rectangles)
Milli
seco
nds
![Page 34: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/34.jpg)
Result (cont.)
� Transformation Snapshot
![Page 35: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/35.jpg)
Results (cont.)
� project transforms SVG documents with
the following elements:� geometric shapes
� gradient fills
� lines
� scripts
� events
� etc.
![Page 36: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/36.jpg)
Limitations
� no zooming on mouse click
� no dashed lines and arrows
� no shadows on images
� some SVG elements not supported
![Page 37: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/37.jpg)
Conclusion
1. need XML Path Language to use XSLT
2. XSLT
a. unique language
b. hard to debug
3. second transformation
4. need XML DOM
5. DOM2 Events not supported in I.E. 6.0
Points Learned:
![Page 38: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/38.jpg)
References
Ryan, J. "Transforming Flat Files to XML Using SAX and XSLT."http://www.developer.com/xml/article.php/2108031
[R04]
Introduction to Vector Markup Language. http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/. MSDN 1998.
[MSDN98]
Map2SVG. http://www.gis-news.de/svg/map2svg.htm[M04]
Lee. W. M. "Transforming XML into WML." http://www.wirelessdevnet.com/channels/wap/training/xslt_wml.html
[L04]
Holman, G. Definitive XSLT and XPath. Prentice Hall. Upper Saddle River, NJ. 2002[H02]
GraPL. http://www.grapl.com/desktop/index.html[G04]
W3C Document Object Model. http://www.w3.org/DOM/[DOM04]
Bondre, P. XSLT – Efficient Programming Techniques. http://www.xml.org/xml/xslt_efficient_programming_techniques.pdf
[B03]
Adobe Graphics Server. http://www.adobe.com/products/server/graphics/main.html[AGS]
![Page 39: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/39.jpg)
References (cont.)
XSL Transformations (XSLT). http://www.w3.org/TR/xslt[XSLT99]
XML Path Language. http://www.w3.org/TR/xpath[XML99]
XML Data Source Object. http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/ontransformnode_event.asp
[XDSO]
XML DOM. http://www.devguru.com/Technologies/xmldom/quickref/node_transformNode.html[X03]
W3Schools. http://www.w3schools.com[W04]
Watt A, Lilley C., Ayers, D., George, R., Wenz, C., Hauser T., Lindsey K., Gustavsson, N. SVG Unleashed. Sams Publishing. Indianapolis, Indiana. 2003
[W03]
Vector Markup Language (VML). http://www.w3.org/TR/NOTE-VML[VML98]
Scalable Vector Graphics (SVG) 1.1 Specification. http://www.w3.org/TR/SVG/[SVG03]
Schemasoft. http://www.schemasoft.com/mathml/index.htm[S04]
![Page 40: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/40.jpg)
Demo
![Page 41: Stylesheet Translations of SVG to VML · 2004-05-26 · Introduction - Motivation jpeg: 3001 b gif: 3601 b bmp: 150,742 b svg: 274 b](https://reader033.vdocuments.mx/reader033/viewer/2022042804/5f51c7c915bda3339d38baff/html5/thumbnails/41.jpg)
Thank You For Coming!
� Questions