1 / 14

Using XSLT and XPath to Generate SVG

Using XSLT and XPath to Generate SVG. Roger L. Costello XML Technologies. 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

annice
Download Presentation

Using XSLT and XPath to Generate SVG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. Line <?xml version="1.0"?> <svg width="100%" height="100%"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:red;fill:red"/> </svg> "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. x, y Axis (0, 0) x-axis y-axis The x-axis increases to the left. The y-axis increases as we go down the screen.

  5. Rectangle <?xml version="1.0"?> <svg width="100%" height="100%"> <rect x="100" y="50" width="300" height="200" style="stroke:red;fill:red"/> </svg> "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. text <?xml version="1.0"?> <svg width="100%" height="100%"> <rect x="100" y="50" width="300" height="200" style="stroke:red;fill:red"/> <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 </text> </svg> "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. Embedding SVG in HTML • If you want to embed an SVG graphic in an HTML document then you point to it using an HTML <embed> element. For example: <HTML> <HEAD> <TITLE>Demonstrate SVG in HTML</TITLE> </HEAD> <BODY> <H1>SVG in HTML - Wow!</H1> <embed src="text.svg" width="500" height="500" type="image/svg+xml"/> </BODY> </HTML>

  8. Embedding SVG in HTML text.svg <HTML> <embed src="text.svg" …/> </HTML>

  9. animation • You can animate text by embedding an <animate> element within a <text> element <?xml version="1.0"?> <svg width="300" height="100%"> <rect x="0" y="50" width="300" height="200" style="stroke:red;fill:none"/> <text x="0" y="150" style="font-family: Arial, sans-serif; font-size:14; font-weight:bold; fill:blue"> <animate attributeName="x" begin="1s" dur="30s" from="-120" to="300" repeatCount="indefinite"/> This is text in a box </text> </svg> 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. tspan • Within a <text> element, text and font properties and the current text position can be adjusted by embedding a <tspan> element within the <text> element • tspan is used to extend the definition of your <text> element

  11. Creating a Scrolling Window <?xml version="1.0"?> <svg width="300" height="50"> <rect x="0" y="0" width="300" height="50" style="stroke:red;fill:none"/> <text> <tspan x="0" y="50" style="font-family: Arial, sans-serif; font-size:14; font-weight:bold; fill:blue"> <animate attributeName="y" begin="1s" dur="15s" from="50" to="-20" repeatCount="indefinite"/> This is text in a box </tspan> <tspan x="0" dy="2em" style="font-size:10; font-family:Arial, sans-serif;"> And this is more text </tspan> </text> </svg> 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 <text> 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. 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 FitnessCenter.html XSL Processor FitnessCenter.xml FitnessCenter.svg FitnessCenter.xsl

  13. <xsl:template match="/"> <HTML> -- create HTML table, populate with Name and home Phone data -- <embed src="FitnessCenter.svg" width="350" height="100" type="image/svg+xml"/> </HTML> <saxon:output href="FitnessCenter.svg"> <svg width="350" height="100"> <rect x="0" y="0" width="350" height="100" style="fill:#DDDDDD; stroke:black; stroke-width:2;"/> <text> <tspan x="5" y="100" style="font-size:14; font-family:Arial, sans-serif; stroke:#990066; fill:#990066"> <animate attributeName="y" begin="1s" dur="30s" from="100" to="-152" repeatCount="indefinite"/> Members Favorite Color </tspan> <xsl:for-each select="/FitnessCenter/Member"> <tspan x="5" dy="2em" style="font-size:10; font-family:Arial, sans-serif;"> <xsl:value-of select="Name"/> </tspan> <tspan x="5" dy="1em" style="font-size:10; font-family:Arial, sans-serif;"> <xsl:value-of select="FavoriteColor"/> </tspan> </xsl:for-each> </text> </svg> </saxon:output> </xsl:template> (see svg-example02)

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

More Related