Using XSLT and XPath to Generate SVG

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
lt?xml version"1.0"?gt ltsvg width"100"
height"100"gt ltline x1"0" y1"0" x2"300"
y2"300" style"strokeredfillred"/gt lt/svggt
"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
lt?xml version"1.0"?gt ltsvg width"100"
height"100"gt ltrect x"100" y"50"
width"300" height"200" style"strokeredfillre
d"/gt lt/svggt
"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
lt?xml version"1.0"?gt ltsvg width"100"
height"100"gt ltrect x"100" y"50"
width"300" height"200" style"strokeredfillre
d"/gt lttext x"175" y"150" style"font-family
Arial, sans-serif font-size14
font-weightbold fillblue"gt This is
text in a box lt/textgt lt/svggt
"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
  ltembedgt element. For example

ltHTMLgt ltHEADgt ltTITLEgtDemonstrate SVG
in HTMLlt/TITLEgt lt/HEADgt ltBODYgt
ltH1gtSVG in HTML - Wow!lt/H1gt ltembed
src"text.svg" width"500" height"500"
type"image/svgxml"/gt lt/BODYgt lt/HTMLgt
8
Embedding SVG in HTML
text.svg
ltHTMLgt
ltembed src"text.svg" /gt
lt/HTMLgt
9
animation

• You can animate text by embedding an ltanimategt
  element within a lttextgt element

lt?xml version"1.0"?gt ltsvg width"300"
height"100"gt ltrect x"0" y"50" width"300"
height"200" style"strokeredfillnone"/gt
lttext x"0" y"150" style"font-family Arial,
sans-serif font-size14 font-weightbold
fillblue"gt ltanimate attributeName"x"
begin"1s" dur"30s" from"-120" to"300"
repeatCount"indefinite"/gt This is text
in a box lt/textgt lt/svggt
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 lttextgt element, text and font properties
  and the current text position can be adjusted by
  embedding a lttspangt element within the lttextgt
  element
• tspan is used to extend the definition of your
  lttextgt element

11
Creating a Scrolling Window
lt?xml version"1.0"?gt ltsvg width"300"
height"50"gt ltrect x"0" y"0" width"300"
height"50" style"strokeredfillnone"/gt
lttextgt lttspan x"0" y"50"
style"font-family Arial, sans-serif
font-size14 font-weightbold fillblue"gt
ltanimate attributeName"y" begin"1s"
dur"15s" from"50" to"-20" repeatCount"indefini
te"/gt This is text in a box
lt/tspangt lttspan x"0" dy"2em"
style"font-size10 font-familyArial,
sans-serif"gt And this is more text
lt/tspangt lt/textgt lt/svggt
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 lttextgt
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
ltxsltemplate match"/"gt ltHTMLgt
-- create HTML table, populate with Name and
home Phone data -- ltembed
src"FitnessCenter.svg" width"350" height"100"
type"image/svgxml"/gt lt/HTMLgt
ltsaxonoutput href"FitnessCenter.svg"gt
ltsvg width"350" height"100"gt
ltrect x"0" y"0" width"350" height"100"
style"fillDDDDDD strokeblack
stroke-width2"/gt lttextgt
lttspan x"5" y"100"
style"font-size14 font-familyArial,
sans-serif stroke990066 fill990066"gt
ltanimate attributeName"y"
begin"1s" dur"30s" from"100" to"-152"
repeatCount"indefinite"/gt
Members Favorite Color
lt/tspangt ltxslfor-each
select"/FitnessCenter/Member"gt
lttspan x"5" dy"2em" style"font-size10
font-familyArial, sans-serif"gt
ltxslvalue-of select"Name"/gt
lt/tspangt
lttspan x"5" dy"1em" style"font-size10
font-familyArial, sans-serif"gt
ltxslvalue-of select"FavoriteColor"/gt
lt/tspangt
lt/xslfor-eachgt lt/textgt
lt/svggt lt/saxonoutputgt
lt/xsltemplategt
(see svg-example02)
14
You can create your image using Adobe
Illustrator and then export as SVG!