1. 1 Using XSLT and XPath to Generate SVG Roger L. Costello XML Technologies

2. 2 What is SVG? SVG = Scalable Vector Graphics With SVG a graphic is described using lines and circles and boxes. An SVG tool reads the description and draws the graphic –Adobe has a free plugin to Netscape and IE at http://www.adobe.com/svg/ Contrast a vector graphic with a bitmapped graphic (e.g., JPEG, GIF): in a bitmapped graphic each pixel is given a color –Obviously bitmapped graphics are much bigger!

3. 3 Line "Create an SVG graphic. Allot a width and height of 100% of the screen. The graphic has a single line that starts at (0, 0) and ends at (300, 300). Draw the line in red." (see svg-example01)

4. 4 x, y Axis x-axis y-axis (0, 0) The x-axis increases to the left. The y-axis increases as we go down the screen.

5. 5 Rectangle "Draw a rectangle starting at (100, 50), with a width of 300 and a height of 200. The border is red and it is to be filled with red."

6. 6 text <text x="175" y="150" style="font-family: Arial, sans-serif; font-size:14; font-weight:bold; fill:blue"> This is text in a box "Draw a rectangle, then draw text. Note that the text is to start at the coordinates (175, 150), which is inside the rectangle. The text is: This is text in a box." (see svg-example01)

7. 7 Embedding SVG in HTML If you want to embed an SVG graphic in an HTML document then you point to it using an HTML element. For example: Demonstrate SVG in HTML SVG in HTML - Wow!

8. 8 Embedding SVG in HTML text.svg

9. 9 animation You can animate text by embedding an element within a element This is text in a box The attributeName specifies what aspect of the text is to be animated. In this example we want to animate the value of the x-coordinate of the text. We want animation to start 1 second after display. A full cycle is to take 30 seconds. The x-coordinate value should range from a value of -120 to 300 over the 30 seconds. Once a cycle is done it should be repeated indefinitely.

10. 10 tspan Within a element, text and font properties and the current text position can be adjusted by embedding a element within the element tspan is used to extend the definition of your element

11. 11 Creating a Scrolling Window This is text in a box And this is more text With the first tspan I indicate that I want the text "This is text in a box" animated - to move across the screen over a 15 second duration. The second tspan extends the definition of the element to indicate that we also want the text "And this is more text" output at the same x-coordinate, but the y-coordinate should have a delta (dy) of 2em (in other words, this second text should be under the first).

12. 12 FitnessCenter Report with Scrolling Name/FavoriteColor Data Problem: create an XSL-enhanced HTML document which has all the Name and home Phone data in an HTML table, and all the Name and FavoriteColor data in a scrolling SVG box XSL Processor FitnessCenter.xml FitnessCenter.xsl FitnessCenter.html FitnessCenter.svg

13. 13 -- create HTML table, populate with Name and home Phone data -- Members Favorite Color (see svg-example02)

14. 14 You can create your image using Adobe Illustrator and then export as SVG!