XInformatics I400 and I590 SVG Scalable Vector Graphics

X-Informatics: I-400 and I-590 SVG: Scalable Vector Graphics Spring Semester 2002 MW 6: 00 pm – 7: 15 pm Indiana Time Geoffrey Fox and Bryan Carpenter PTLIU Laboratory for Community Grids Informatics, (Computer Science , Physics) Indiana University Bloomington IN 47404 gcf@indiana. edu 11/26/2020 svgspring 02 1

Motivations • We discuss SVG—Scalable Vector Graphics—as an example XML application that is likely to be widely adopted. – As a representative application, SVG has the advantage that examples can be presented in a very concrete way—just view them with a browser. • It also provides practice with the concepts of XML style sheets, discussed previously: – SVG uses Cascading Style Sheets extensively. – Transforming general XML data to SVG, for presentation purposes, is a very natural application for XSLT. 11/26/2020 svgspring 02 2

What is SVG? • SVG is an XML-based document format defined by W 3 C for describing graphics, including graphics in Web pages. • It has some important features in common with HTML (and XHTML): – Web pages may be authored using SVG, provided the browser has an SVG “plugin” installed. HTML Web pages may include embedded SVG graphics. – SVG makes extensive use of Cascading Style Sheets (or CSSlike) style declarations. – SVG documents can be made interactive by including ECMAscript (Javascript). • But SVG concentrates on drawing lines and shapes, applying special effects to images, animating graphics, and so on. – SVG text formatting facilities are basic and/or inconvenient. 11/26/2020 svgspring 02 3

Installing an SVG Viewer • Log on to your PC as administrator, if necessary. • Go to http: //www. adobe. com/svg, and follow the link to download Adobe SVG Viewer 3. 0 • Click on the svgview. exe link for your preferred language. – Run the executable “from it’s current location”, and agree to terms. • Your browser should now be able to view SVG files and Web pages that include SVG graphics. 11/26/2020 svgspring 02 4

Examples • Simple SVG pages can be written “by hand”—we will give many small examples. • At the Adobe site, you can see some sophisticated examples by following the inspirations menu. • Complex SVG graphics would normally be generated indirectly by suitable drawing tools (or programming libraries) – Adobe Illustrator can produce SVG output – You can download a 30 -day evaluation copy of Jasc Webdraw from http: //www. jasc. com/products/webdraw/ if you desire. 11/26/2020 svgspring 02 5

A Complex SVG Example 11/26/2020 svgspring 02 6

Remarks • You can find this example at the Adobe SVG page • This is an example of an interactive SVG document: when one clicks on a floor, from the outside view of the building, the corresponding floor plan is displayed. • Clicking on an individual room causes occupancy information to be displayed. • The Adobe site includes several other interactive examples, and additional links to examples at other sites. 11/26/2020 svgspring 02 7

A Simple Example • We borrow a motivating example from the O’Reilly book on SVG (bibliographic details later). • As the book says, the example isn’t beautiful, but it can be used to illustrate several of the basic features of SVG. . . 11/26/2020 svgspring 02 8

The file cat. svg <? xml version="1. 0"? > <!DOCTYPE svg PUBLIC "-//W 3 C/DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG-20010904/DTD/svg 10. dtd"> <svg width="140" height="170"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none; "/> <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933; "/> <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933; "/> <g id="whiskers"> <line x 1="75" y 1="95" x 2="135" y 2="85" style="stroke: black; "/> <line x 1="75" y 1="95" x 2="135" y 2="105" style="stroke: black; "/> </g> <use xlink: href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> <polyline points="108, 62 90, 10 70, 45 50, 10 32, 62" style="stroke: black; fill: none; "/> <!-- ears --> <polyline points="35, 110 45, 120 95, 120 105, 110" style="stroke: black; fill: none; "/> <!-- mouth --> </svg> 11/26/2020 svgspring 02 9

Remarks • The root document element is called svg. • Details of the nested elements are not immediately obvious, but the general organization should be fairly self-explanatory: – The first large (r=50) circle element is the cat’s face. – The two small (r=5) circle elements are its eyes. – The g element with id whiskers is a group containing two line elements. These are the two whiskers on the right side of the cat’s face. – The use element repeats these whiskers on the left side of the cat’s face, after doing a suitable reflection (defined by the transform attribute). – The ears and mouth are represented by polyline elements. • Note the use of CSS style attributes to define the presentation details—line color (stroke), and fill color for the circles. 11/26/2020 svgspring 02 10

SVG is Scalable 11/26/2020 svgspring 02 11

Remarks • The vector graphics of SVG are distinguished from the raster graphics of GIF, JPG, etc. • Because an SVG file is essentially a recipe for computing the pixel values (rather than a literal representation of those pixel values, as in raster graphics), the image can be rendered to pixels with any desired resolution. – The resolution can be changed (and the image can be transformed in many other ways) on demand. 11/26/2020 svgspring 02 12

Lecture Plan • • Overview of SVG, describing briefly: – Format of SVG document – Coordinates – Drawing shapes; paths – Text – Grouping and reuse and giving examples of more advanced features like – Transformations – Filters – Animations Work through an example using XSLT to produce a graphic display of XML data, by transforming to SVG. – Will take examples from the O’Reilly book. 11/26/2020 svgspring 02 13

References • SVG Essentials, J. David Eisenberg, O’Reilly, 2002. Fairly technical but very useful. • “Scalable Vector Graphics ”, http: //www. w 3. org/TR/SVG/ • (Inside XML, Chapter 19, discusses VML, a precursor to SVG that is no longer a W 3 C proposal. ) 11/26/2020 svgspring 02 14

Elements of SVG 11/26/2020 svgspring 02 15

What is in SVG? • At the most basic level SVG is a system for representing twodimensional vector graphics—drawing shapes out of lines, filling them with color, and so on. – As a special case these “shapes” include letters, i. e. text. • It also includes sophisticated facilities for including and processing image data, allowing application of the kind of filters you may be familiar with from tools like Adobe Illustrator, Paint Shop Pro, etc. • Because the shapes and transformations are all numerically parametrized in the SVG source file, many simple animations can be achieved in a “declarative” way – by specifying how parameters are to vary over time. • More complex animations, and interactivity, are supported through scripting—this is very similar to, and completely interoperable with, use of Java. Script in HTML pages. 11/26/2020 svgspring 02 16

The SVG Document • The root document element is called svg. – In fact svg elements may be nested, but we will not need this facility. • A standalone SVG document will normally start with a document type definition: <? xml version="1. 0"? > <!DOCTYPE svg PUBLIC "-//W 3 C/DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG-20010904/DTD/svg 10. dtd"> <svg width=“w" height=“h">. . . </svg> – w and h are lengths: the simplest thing is to give simple numeric values, representing numbers of pixels. Units are also allowed, e. g. width=“ 3 in”. – Currently the W 3 C site gives only a DTD for SVG, not a schema. 11/26/2020 svgspring 02 17

Coordinates • Shapes are defined in terms of points, and points are defined in terms of their coordinates. – x coordinates are horizontal, left to right on the display. – y coordinates are vertical, top to bottom on the display. • E. g. : <svg width=“ 80" height=“ 60">. . . </svg> 0 10 20 y 30 40 0 x 10 20 30 40 50 60 70 80 P 50 60 11/26/2020 svgspring 02 • Point P has coordinates x=30, y=20. • By default coordinates are in pixels. • Can change the user coordinates by adding a view. Box attribute to the svg element. 18

Simple Lines • The simplest primitive for drawing anything is the line element. – Essential attributes x 1, y 1, x 2, y 2 define the coordinates of the starting point and the ending point. – In general there must be a CSS style declaration in effect for the property stroke, which defines the color of lines. – For now we use inline style attributes (this is quite common with SVG). 0 10 20 y 30 40 x 0 10 20 30 40 50 60 70 80 <line x 1=“ 10” y 1=“ 10” x 2=“ 70” y 2=“ 55” style=“stroke: green; ”/> 50 60 11/26/2020 svgspring 02 19

Viewing the SVG File • Place the XML: <? xml version="1. 0"? > <!DOCTYPE svg PUBLIC "-//W 3 C/DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG-20010904/DTD/svg 10. dtd"> <svg width="80" height="60"> <line x 1="10" y 1="10" x 2="70" y 2="55" style="stroke: green; “/> </svg> in a file called line. svg (for example). • Assuming you have installed an SVG viewer, point your browser at this file (double-clicking the file from a file browser may work). • You should see a short, green, slanted line. 11/26/2020 svgspring 02 20

Style Declarations • We give inline style attributes in the examples. • For large examples, at least some of the style declarations will probably move into internal or external stylesheets. • An internal stylesheet appears in the body of a style element, nested within the svg element. • An external stylesheet is introduced by an xml-stylesheet processing directive, exactly as seen in the CSS lecture. 11/26/2020 svgspring 02 21

Effects of Various stroke Declarations style="stroke: green; stroke-width: 10; " style="stroke: green; stroke-width: 10; stroke-opacity: 0. 25; " 11/26/2020 style="stroke: green; stroke-width: 10; stroke-dasharray: 10, 5; " style="stroke: #990000; stroke-width: 10; " svgspring 02 22

Color and Opacity • Where attributes represent colors (as in the stroke attribute), the color can be written symbolically (red, green, black, etc), or it can be written as a numeric code in various formats. – The commonest such format is as a six-digit hexadecimal number, #rrggbb, where rr is the red component, gg the green, bb the blue. – Each two-digit component stands for a value between 0 and 255, representing the level of saturation in this primary color. – #ff 0000 should be pure red. • Besides color, every object has an opacity associated with it. – This can be thought of as a fraction of total opacity: an object with opacity 1. 0 is completely opaque; an object with opacity 0. 0 is completely transparent (invisible). – Opacity is often treated like a fictitious 4 th component of color (the alpha channel), yielding 32 bits of “color” information. 11/26/2020 svgspring 02 23

Rectangles • Rectangles can be drawn using the rect element, e. g. : <rect x="10" y="10" width="60" height="45" style="stroke: green; stroke-width: 10; fill: red; “/> • The attributes x, y define the coordinates of the top left-hand corner of the rectangle. • Not surprisingly, the attributes width and height define the width and height of the rectangle. • The example illustrates one new CSS property relevant to shapes: the fill property defines the color with which the shape is filled. There is also fill-opacity. • The outline can be avoided by eliminating the stroke declarations; the shape can be left empty by eliminating the fill declaration. 11/26/2020 svgspring 02 24

Circles and Ellipses • Circles and ellipses are now fairly obvious, e. g. : <svg width="150" height="150"> <circle cx="30" cy="30" r="20" style="stroke: green; stroke-width: 10; fill: none; "/> <ellipse cx="80" cy="80" rx="35" ry="15" style="stroke: none; fill: red; "/> </svg> • Attributes cx, cy are position of center. • For circle, r is radius; for ellipse rx, ry are two radii. • Note use of none in style declarations. This ensures that no fill declaration is in effect for the circle, or stroke declaration in effect for the ellipse. 11/26/2020 svgspring 02 25

Polylines • A concise way of writing several joined lines, e. g. (from the O’Reilly book): <svg width="150" height="150"> <polyline points="5, 20 20, 20 25, 10 35, 30 45, 10 55, 30 65, 10 75, 30 80, 20 95, 20" style="stroke: blue; stroke-width: 5; fill: none; "/> </svg> • The attribute points represents a series of points that are to be “joined up”. • Choice of commas versus spaces in points (and many similar attributes in SVG) is up to you: SVG treats both separators the same. • If a fill declaration is in effect for a polyline, SVG fills the area defined by joining the last point back to the first. 11/26/2020 svgspring 02 26

Paths 11/26/2020 svgspring 02 27

Paths • The path element is useful for drawing complex SVG figures. It is much more complex than any of the elements we have seen so far. The path element is often seen in machine-generated SVG. • A path can be thought of a generalization of the polyline element, where the individual segments may be various kinds of curve. They can also be jumps (i. e. the line may be broken). – Each intermediate point in the path may be preceded by a “command” defining how it is joined to the previous segment. • A simple example: <path d=“M 5, 20 L 20, 20 L 25, 10 L 35, 30 L 45, 10 L 55, 30 L 65, 10 L 75, 30 L 80, 20 L 95, 20” style=“. . . ”/> This exactly reproduces the effect of the polyline example on the previous slide, but now points are preceded by explicit moveto (M) and lineto (L) commands. 11/26/2020 svgspring 02 28

A Very Complex Path • This is taken from one of the running examples in the developer tutorial at the Adobe site. 11/26/2020 svgspring 02 29

Commands on Paths • So in the previous example, the cryptic string d=“M 5, 20 L 20, 20 L 25, 10. . . ” is interpreted as: 1. 2. 3. 4. • Move to point 5, 20. Draw a Line from the current position (i. e. 5, 20) to 20, 20. Draw a Line from the current position (now 20, 20) to 25, 10. . There are several additional “commands” that can appear in paths: – – – – 11/26/2020 H: draw a horizontal line V: draw a vertical line A: draw and arc Q: draw a quadratic Bézier curve T: a continued quadratic Bézier curve C: draw a cubic Bézier curve S: a continued cubic Bézier curve svgspring 02 30

Curved Paths • The last 5 commands are for drawing curves. The most useful of these are the commands for drawing so-called Bézier curves. • We certainly do not need to understand the mathematics of these curves to use them, but it is helpful to look intuitively at how they work. – Some knowledge of these curves is useful, even if you plan to use drawing tools to generate your SVG curves. • In particular you probably need to have some idea of what a control point (or control arm) is. 11/26/2020 svgspring 02 31

Quadratic Bezier Curve • • • Quadratic Bezier Curves are less useful than their cubic cousins, but it is easiest to describe them first. The curve is defined by three points: the start-point and the end -point (as for a straight line), plus a third control point, which sets the curvature of the line. Finding the curve. . . Informally: 1. Draw a (possibly skewed) “A” shape, with the control point at the top of the A. The end-points are at the feet of the A. 2. The curve connects the feet of the A, touching the cross-bar of the A at its mid-point. More formally: 1. Connect the end-points to the control point by two straight lines. 2. Draw the mid-points on these two lines. 3. Connect together these mid-points by a third line. The mid-point of this line touches the curve. 11/26/2020 svgspring 02 32

Construction of Quadratic Bézier Control Point, C Mid-point of this line touches the Bézier curve joining A and B Mid-point of line AC Start Point, A End Point, B 11/26/2020 svgspring 02 33

A path Element with a Curve • Here is a path element containing a quadratic Bezier <svg width=“ 500" height=“ 500"> <path d="M 30, 350 Q 200, 50 450, 400” style="stroke: red; stroke-width: 1; fill: none; ”> </svg> – There are two points (pairs of coordinates) after the Q command. The first is the control point; the second is the end point of the curve. 11/26/2020 svgspring 02 34

Aside: Continuing the Construction Control Point, C New End Point New Control Point By repeatedly subdividing, can construct the whole curve (“divide and conquer” approach) Start Point, A End Point, B 11/26/2020 svgspring 02 35

Aside: Construction of the Whole Curve 11/26/2020 svgspring 02 36

The Cubic Bezier Curve • This is a generalization of the quadratic Bezier that uses two control points. • The “A” shape used to generate the quadratic Bezier is replaced by a more complex “bridge” shape. • Again the construction is by drawing lines connecting the endpoints with the control points, then introducing further lines by connecting the mid-points of the lines first drawn. 11/26/2020 svgspring 02 37

Construction of Cubic Bézier Control Point, C Mid-point of line CD Midpoint Control Point, D Midpoint Mid-point of line AC Mid-point of this line touches the cubic Bézier curve joining A and B Mid-point of line AD Start Point, A End Point, B 11/26/2020 svgspring 02 38

Flexibility of Cubic Bézier Control Point, C End Point, B Start Point, A This is actually much more flexible than the quadratic case, because the two “control arms” can point in completely different directions. Control Point, D 11/26/2020 svgspring 02 39

Example Cubic Bézier Curves 11/26/2020 svgspring 02 40

Cubic Curves in path Elements • Here is a path element containing a cubic Bezier <svg width=“ 500" height=“ 500"> <path d="M 30, 350 C 100, 25 450, 150” style="stroke: red; stroke-width: 1; fill: none; ”> </svg> • There are three points (pairs of coordinates) after the C command. The first is the first control point; the second is the second control point; the third is the end point of the curve. 11/26/2020 svgspring 02 41

Connecting Bezier Curves Together • There are three cases: • Cusp, there is no relation between the control arm from the end of the first curve and from the beginning of the next. • Asymmetric: the control arms are lined up, but different lengths • Symmetric: the control arms are lined up and the same length—we say the first control point of the second curve is the reflection of the second control point of the first curve. 11/26/2020 svgspring 02 42

Connected Curves in path Elements • To represent the cusp or asymmetric kind of join, simply put consecutive C commands in the d attribute. • More often one wants the smooth, symmetric form of connection between curved segments. • There is a special command for representing such a continuation: the S command should appear after a C (or earlier S) command, for example: <svg width=“ 500" height=“ 500"> <path d="M 30 350 C 100 25 450 450 150 S 50 50 250” style="stroke: red; stroke-width: 1; fill: none; ”> </svg> • There are only two points (pairs of coordinates) after the S command. Although it represents a cubic Bezier segment, the first control point can be inferred by reflection of the second control point of the preceding segment— we don’t have to give it explicitly. So the arguments of S are the just the second control point and the end point of the curve. 11/26/2020 svgspring 02 43

Path with S-connected curves 11/26/2020 svgspring 02 44

Path Miscellany • To close a path, put the z command at the end of the d attribute. This draws a straight line from the end of the path back to its beginning. • All the commands seen so far have variants spelled with lower-case letters. These are equivalent to the upper case versions, but they take relative coordinates. – All end-points and control-points in the command are specified by giving the difference between their coordinates and the coordinates of the start point. – Thus you will often see negative numbers appearing in the relative versions of the commands. • There are various shorthand conventions that allow you to omit the command letters when they can be guessed. • There are some other interesting features of paths, e. g. the option to put markers at the defining points. Unfortunately we cannot cover everything here. 11/26/2020 svgspring 02 45

More Features: Text, Groups and Reuse, Transformations 11/26/2020 svgspring 02 46

The text element • As the name suggests, the text element introduces some written text into the graphic. • One should specify the positioning of the text in the graphic with x and y attributes. The body of the text element contains the message to be displayed, e. g. : <text x=“ 20” y=“ 120” style=“font-size: 100 pt”>Hello World</text> • Characters are treated on much the same footing as other shapes, (and recognize similar style properties). An individual shape is called a glyph. A font associates specific glyphs with characters. • text elements, naturally, recognize style properties like fontfamily, font-size, font-weight, etc, that are familiar from CSS. 11/26/2020 svgspring 02 47

Style Parameters for Text <svg width="500" height="500"> <text x="20" y="220" style="font-size: 40 pt; ">Hello World</text> <text x="20" y="120“ style="font-size: 40 pt; stroke: black; stroke-width: 5; "> Hello World </text> <text x="20" y="120“ style="font-size: 40 pt; stroke: black; stroke-width: 2; fill: none; "> Hello World </text> </svg> 11/26/2020 svgspring 02 48

Groups • The g element groups a set of objects together. This can be useful for several reasons, for example: – We may refer back to the group of of objects later. In particular the whole group of objects can be repeated later in the graphic by a single use element (discussed next). – A transformation can be applied to the group as a whole (discussed later). – A set of style declarations (e. g. color declarations) can be applied to the group as a whole. You don’t need to repeat the style properties in every contained element. • We already saw one example of a group—the cat’s whiskers: <g id="whiskers"> <line x 1="75" y 1="95" x 2="135" y 2="85" style="stroke: black; "/> <line x 1="75" y 1="95" x 2="135" y 2="105" style="stroke: black; "/> </g> 11/26/2020 svgspring 02 49

The use Element • Complex graphics often have repeated elements (which may themselves consist of several objects grouped together). • If you put the repeated (set of) object(s) into a g element, and label it with an id attribute, then the pattern can be repeated by a use element, e. g. : <use xlink: href="#whiskers" x="100" y="0"/> <use xlink: href="#whiskers" x="0" y="100"/> <use xlink: href="#whiskers" x="100" y="100"/> use: 100, 0 Original use: 0, 100 11/26/2020 use: 100, 100 svgspring 02 50

The defs Element • Instead of having the “original” of whiskers appear in the graphic display, it is usually more convenient to put any g element that defines a reusable group in the defs element. – The defs element should be a direct child of the svg element. – It collects together definitions that apply to the whole graphic. • Objects “drawn” in the defs elements don’t actually appear in the display until they are referred to later by a use element. – The defs element is also a natural place for internal stylesheets (style elements). 11/26/2020 svgspring 02 51

Transformations • The attribute transform can be applied to many different kinds of element. • It applies a “transformation” to the object. The most important transformations are: – Moving the object as a whole. – Scaling the object. – Rotating the object. (You can also “skew” an object. ) – In themselves these do not imply moving pictures or animation: they just mean the object was originally defined in one position or orientation (say), but you want it actually displayed in a different position or orientation. – We will see later that there are ways to specify time-varying transformations. These yield some quite effective animations, e. g. spinning objects. 11/26/2020 svgspring 02 52

Example Transformations • The attribute transform=“translate(50, 50)” would cause the object to be displayed 50 units to the right and 50 units below the place it would have appeared without the transform attribute. These shifts may be negative. – “translate” is physics terminology for “move”. • The attribute transform=“rotate(45)” would cause the object to be displayed rotated by 45 degrees clockwise. • The attribute transform=“scale(2, 3)” would cause all x coordinates to be multiplied by 2, and all y coordinates to be multiplied by 3, prior to display. 11/26/2020 svgspring 02 53

Transforming Text • Here is a complete example of those transformations: <text x="20" y="50" transform="rotate(20)">Hello World</text> <text x="20" y="100" transform="scale(2, 1)">Hello World</text> <text x="20" y="200" transform="translate(100, -20)">Hello World</text> 11/26/2020 svgspring 02 54

Filters 11/26/2020 svgspring 02 55

Filters • • The transformations discussed previously allow you to change the coordinates of points in the graphic before plotting it. Filters work differently: they apply some “effect” to the image created by plotting the figure, just before it is actually displayed. So, roughly speaking, the sequence is: 1. Compute the original points defining the shapes and paths. 2. Apply any specified transformations to the coordinates of these points. 3. Plot the figure 4. Apply any specified filters to the resulting picture. 5. Display the final picture. Filters allow you to simulate various “three-dimensional” or “photographic” effects while rendering the graphic. 11/26/2020 svgspring 02 56

Creating a Shadow • The filter fe. Gaussian. Blur does what it says: it blurs an image by a specified amount. • We define a filter using a filter element, then reference it in a style declaration. <filter id="drop-shadow"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="3"/> </filter> <text x="20" y="120" style="font-size: 40 pt; filter: url(#drop-shadow); "> Hello World </text> 11/26/2020 svgspring 02 57

Remarks • Filters are considered an aspect of the presentation rather than the content of an SVG document. Hence they naturally appear in CSS style declarations. – The cryptic notation url(#name) is the conventional way CSS has of referring to content defined “elsewhere” (even when that elsewhere is in the same document). • The fe. Gaussian. Blur element specifies that it takes input from Source. Alpha. – What this means is that we are applying the blur operation to the “alpha-channel”—or pattern of opaqueness—of the original image. This is natural if we are attempting to produce a shadow. – Actually it is a fairly common trick in filters that only care about the “shape” of an image to use the alpha channel. 11/26/2020 svgspring 02 58

Chaining Filters • A shadow should be offset from the position of the original object. We can achieve this effect by applying the fe. Offset filter to the output of the blurring filter: <filter id="drop-shadow" width="2" height="2"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="3" result="blur"/> <fe. Offset in="blur" dx="10" dy="10"/> </filter> 11/26/2020 svgspring 02 59

Remarks • The result of the first filter is given the name blur. The modified image is fed into the second filter. • Although similar in effect to the translate transformation, fe. Offset is implemented quite differently—it is applied to pixels of an image rather than geometric points. • Here we specified a width and height for the filter. This defines an increased filter effects region (as a fraction of the size of the original) to avoid undesirable clipping of the shadow. – Our filter is yielding pixels quite far from their original position, and the SVG default for this clipping region isn’t large enough. 11/26/2020 svgspring 02 60

Aside: The Filter Effects Region • Filters like fe. Gaussian. Blur and fe. Offset generally set pixels some distance from the corresponding pixels in the input image. So the filter effects region (FER) may be larger than the input image. • By default SVG adds a border whose width is 10% of the original. • If this isn’t large enough to contain your effects, you can change it by specifying the attributes x, y, width, height on the filter element. These define the FER. – Arguably, this is an unfortunate parametrization of the FER. By default x, y, width, height are in relative units, whereas common non-local filters have footprint sizes defined in absolute units. – You can specify absolute units (through the filter. Units attribute), but then you have a dependency on the absolute width and height of the image, which is unnatural for a presentation property. – It would be better if the width of upper and lower borders could be specified separately, in absolute units? 11/26/2020 svgspring 02 61

Merging Filter Results • Finally we want to put the original object back in front of its shadow. We can do this by adding an fe. Merge element to our filter: <filter id="drop-shadow" width="2" height="2"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="3" result="blur"/> <fe. Offset in="blur" dx="10" dy="10" result="offset. Blur"/> <fe. Merge. Node in="offset. Blur"/> <fe. Merge. Node in="Source. Graphic"/> </fe. Merge> </filter> 11/26/2020 svgspring 02 62

Remarks • We named the output of the offset filter offset. Blur, and fed this into one node of the merge operation. • The other node takes Source. Graphic as its input (c. f. Source. Alpha used earlier). Source. Graphic denotes the complete original image. • The second component of the merge behaves as if it is drawn on top of the first, which is what we want here. • The result is an attractive 3 D effect, achieved entirely at the presentation level (in style declarations). • In fact this is only scratches the surface (so to speak) of effects that can be achieved with filters. By using filters like fe. Diffuse. Lighting or fe. Specular. Lighting, for example, one can achieve the effect of elaborately embossed, reflective shapes. 11/26/2020 svgspring 02 63

A Complex Filter <filter id="My. Filter" filter. Units="user. Space. On. Use"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="2" result="blur"/> <fe. Offset in="blur" dx="4" dy="4" result="offset. Blurred. Alpha"/> <fe. Specular. Lighting in="blur" surface. Scale="5" specular. Constant="0. 9" specular. Exponent="20" light. Color="white" result="specular. Out"> <fe. Distant. Light azimuth="135" elevation="30"/> </fe. Specular. Lighting> <fe. Composite in="specular. Out" in 2="Source. Alpha" operator="in" result="specular. Out"/> <fe. Composite in="Source. Graphic" in 2="specular. Out" operator="arithmetic” k 1="0" k 2="1" k 3="1" k 4="0" result="lit. Paint"/> <fe. Merge. Node in="offset. Blurred. Alpha"/> <fe. Merge. Node in="lit. Paint"/> </fe. Merge> </filter> <text x="20" y="120" style="font-size: 40 pt; stroke: red; stroke-width: 5; fill: red; filter: url(#My. Filter); "> Hello World </text> 11/26/2020 svgspring 02 64

Applying fe. Specular. Lighting • My. Filter is a slightly adapted version (reduced value of std. Deviation) of a filter from the Adobe developer’s tutorial pages (copyright Adobe Systems). • Our example yields an image: • The original example from the Adobe site: – The same filter applied to a general shape, defined by a path element (and using an artistic font for the text “SVG”). 11/26/2020 svgspring 02 65

Remarks • The fe. Specular. Lighting element is a filter yielding the highlights some light source would create on a reflective object (you may use fe. Diffuse. Lighting to give more gentle shading). – Here the vertical elevation of a point on the illuminated object (the in attribute) is equated with the density (at that point) of a blurred version of the original image. This trick gives the appearance of a smooth, curved embossing. – The fe. Specular. Lighting has many adjustable parameters defined by attributes and nested elements. Feel free to experiment with changing them. . . • The fe. Composite element is a kind of generalization of the fe. Merge element, and again has many options: – For example, the operator=“in” element clips the highlights generated by the specular lighting, so they lie within the bounds of the original image. – The operator=“arithmetic” element then numerically adds the color components of the highlights to those of the original image. • The blurred version of the image plays a dual role here. It is also used to generate a shadow, as in our previous example. 11/26/2020 svgspring 02 66

Filters: Summary • Filters liven up otherwise mundane vector graphics, for example by adding subtle 3 D lighting effects. – They are essential to obtaining a professional “graphic design” appearance. • SVG treats filters as purely stylistic features, rather than structural properties of a graphic. – This can be seen as a recurrence of an important theme underlying the whole field of XML-based documents: separation of content from presentation. • Creating a sophisticated SVG filter from scratch may need quite detailed knowledge of the physical models and algorithms underlying computer graphics. • But, because filters are factored out from the structural features of the image, reusing (perhaps adapting) a filter that an expert has designed is very easy. 11/26/2020 svgspring 02 67

Animation 11/26/2020 svgspring 02 68

Animation • SVG has built in features for generating animated graphics. – This does not mean you can practically create Shrek as an SVG graphic! – It does mean you can easily create images with a limited set of moving parts, changing colors, and so on. • The SVG animation features are based on the W 3 C’s Synchronized Multimedia Integration Language (SMIL), another XML-based specification. – Typically you choose some attribute (of some SVG element) having a simple value like a color, a coordinate, etc. – You specify the starting value and the ending value for this attribute. – You also specify the time the animation should begin and the time it should end. – That’s it. 11/26/2020 svgspring 02 69

A Shrinking Rectangle • This example is taken from the O’Reilly book: <rect x="10" y="10" width="200" height="20" style="stroke: black; stroke-width: 2; fill: none; "> <animate attribute. Name="width" attribute. Type="XML" from="200" to="20" begin="0 s" dur="5 s" fill="freeze"/> </rect> 0 s 2. 5 s 5 s 11/26/2020 svgspring 02 70

Remarks • To specify that attributes associated with a particular element will change over time, animate (and related) elements are typically placed inside the body of the affected element. – The attribute. Name on animate specifies which attribute of the affected element is being changed. – The type can be XML, as here, or CSS. The latter means that it is a CSS property (e. g. font-size, fill) that is to change. – The attributes from and to specify the initial and final value of the changed attribute. – The attributes begin and dur specify the time interval over which the change occurs. – The attribute fill="freeze" means that after the animation interval the graphic remains in the to state (rather than reverting to the original state) 11/26/2020 svgspring 02 71

Animating More Properties • Another example from the O’Reilly book: <rect x="10" y="10" width="200" height="20" style="stroke: black; fill: green; fill-opacity: 0. 25; "> <animate attribute. Name="width" attribute. Type="XML" from="20" to="250" begin="0 s" dur="8 s" fill="freeze"/> <animate attribute. Name="height" attribute. Type="XML" from="20" to="200" begin="0 s" dur="8 s" fill="freeze"/> <animate attribute. Name="fill-opacity" attribute. Type="CSS" from="0. 25" to="1" begin="0 s" dur="3 s" fill="freeze"/> <animate attribute. Name="fill-opacity" attribute. Type="CSS" from="1" to="0. 25" begin="3 s" dur="3 s" fill="freeze"/> </rect> 11/26/2020 svgspring 02 72

Animating Multiple Objects • And another: <rect x="10" y="10" width="200" height="20" style="stroke: black; fill: #cfc; "> <animate attribute. Name="width" attribute. Type="XML" from="20" to="120" begin="0 s" dur="8 s" fill="freeze"/> <animate attribute. Name="height" attribute. Type="XML" from="20" to="120" begin="0 s" dur="8 s" fill="freeze"/> </rect> <circle cx="70" cy="70" r="20" style="stroke: black; fill: #ccf; "> <animate attribute. Name="r" attribute. Type="XML" from="20" to="50" begin="2 s" dur="4 s" fill="freeze"/> </circle> 11/26/2020 svgspring 02 73

Time and Synchronization • Time can be measured in various sensible units, e. g. h (hours), min (minutes), s (seconds), ms (milliseconds). • Start of one (sub-)animation can be synchronized to the end of another: <circle cx="60" cy="60" r="30” style="stroke: grey; fill: #f 9 f; "> <animate id="c 1" attribute. Name="r" attribute. Type="XML" from="30" to="10" begin="0 s" dur="4 s" fill="freeze"/> </circle> <circle cx="120" cy="60" r="10” style="stroke: grey; fill: #9 f 9; "> <animate attribute. Name="r" attribute. Type="XML" from="10" to="30" begin="c 1. end" dur="4 s" fill="freeze"/> </circle> 11/26/2020 svgspring 02 74

More Complex Synchronization • Can also synchronize start of one animation to start of another: begin="c 1. end” and we can use positive offsets in either case, e. g. : begin="c 1. end+1 s” means “begin 1 second after animation c 1 ends”, and begin="c 1. start+1 s” means “begin 1 second after animation c 1 starts”. • Can force the end of an animation at a particular time by explicitly specifying an end property, e. g. : <animate attribute. Name=“width” attribute. Type=“XML” begin=“ 6 s” dur=“ 12 s” end=“other. Anim. end” from=. . . > – This overrides waiting for the interval dur to complete. Motion up to moment end still controlled by the dur interval— animation just stops abruptly if end comes before dur is up. – Useful for freeze-frame effects. 11/26/2020 svgspring 02 75

Repeated Animation • Specify the attribute repeat. Count (a number) or repeat. Dur (a time interval) on an animation element to define some number of repetitions, or some period of repetition. • If either is specified with value “indefinite”, the animation repeats “forever”. 11/26/2020 svgspring 02 76

Discontinous Change • Not all properties are numeric values like coordinate values or sizes, which can change “continuously”. • For properties that have an “all-or-nothing” nature, one can use the set element to change their value at a particular moment: <circle cx="60" cy="60" r="30” style="stroke: grey; fill: #ff 9; "> <animate attribute. Name="r" attribute. Type="XML" from="30" to="0" begin="0 s" dur="4 s" fill="freeze"/> </circle> <text-anchor="middle" x="60" y="60" style="visibility: hidden; "> <set attribute. Name="visibility" attribute. Type="CSS" to="visible" begin="4. 5 s" dur="1 s" fill="freeze"/> All gone! </text> – The text appears (the visibility property is set to visible) just after the circle has shrunk to nothing. 11/26/2020 svgspring 02 77

Animating Color • Likewise color is not a simple number. The special animate. Color element should be used to animate color properties, e. g. : <circle cx="60" cy="60" r="30" style="stroke: gray; fill: #ff 9; stroke-width: 10; "> <animate. Color attribute. Name="fill" from="#ff 9" to="red" begin="2 s" dur="4 s" repeat. Count="indefinite"/> <animate. Color attribute. Name="stroke" from="grey" to="blue" begin="2 s" dur="4 s" repeat. Count="indefinite"/> </circle> 11/26/2020 svgspring 02 78

Animating Transforms • To animate a transformation, use the animate. Transform element, e. g. : <text-anchor="middle" x="120" y="120" transform="rotate(0, 120)" style="font-size: 20; "> <animate. Transform attribute. Name="transform" attribute. Type="XML" type="rotate" from="0 120" to="360 120" begin="0 s" dur="1 s" repeat. Count="indefinite"/> I'm. . . feeling. . . dizzy! </text> – Here we used the general form of the rotate transform, which takes an angle argument, plus the coordinates of the point to rotate about (the center of rotation). 11/26/2020 svgspring 02 79

Animating Along a Path • To move an arbitrary object along an arbitrary path, use the animate. Motion element, e. g. : <path d="M 50, 125 C 100, 25 150, 225 200, 125 S 250, 225 350, 125" style="fill: none; stroke: blue; "/> <text-anchor="middle" x="0" y="0"> <animate. Motion path="M 50, 125 C 100, 25 150, 225 200, 125 S 250, 225 350, 125" begin="0 s" dur="4 s" rotate="auto" repeat. Count="indefinite"/> I'm feeling seasick! </text> – The path attribute defines the path the object moves along. We also drew the path explicitly with the preceding path element. This is a flourish unrelated to the animation of the text element. – Setting rotate=“auto” causes the animated object (the text) to rotate tangent to the curve as it follows it. 11/26/2020 svgspring 02 80

SVG: What We Left Out • SVG is quite large. It also packs a lot of functionality. • We gave a flavor of some of the most interesting parts, but had to leave out many features, e. g. : – Color gradients, tiling, including external images, clipping and masking, various interesting filters, interfacing to HTML, . . . Also, could not give complete detail on the features we did discuss. • Notably did not discuss use of scripting to make interactive pages. That would require familiarity with Java. Script. – See the O’Reilly book for a more complete treatment. • The next lecture will discuss automatic generation of SVG pages from XML data, using XSLT. 11/26/2020 svgspring 02 81

Special Topic: SVG and XSLT 11/26/2020 svgspring 02 82

A Larger Example • The example discussed in this lecture brings together two powerful XML technologies discussed at length in earlier lectures: XSLT and SVG. – The example is lifted wholesale from the very good book on SVG by Eisenburg. • It shows how to take a “data-centric” XML instance, and convert it to “document-centric” XML (SVG) instance for graphical display. Conversion is done entirely through XSLT. • Although we won’t be using any of the specialized technologies associated with Web Services (SOAP, WSDL, etc), the example includes some features reminiscent of those services. The raw XML data is obtained by querying an online meteorological site. – So the example provides a fairly natural segue between the XML presentation technologies and Web Services technologies. 11/26/2020 svgspring 02 83

The Source Data • The site: http: //zowie. metnet. navy. mil/~spawar/JMV-TNG/XML/OMF. html Defines an XML format called Weather Observation Markup Format (OMF). – As the name suggests, this data format describes weather observation reports. – The meterological details are fairly technical, but the reports include information useful to ordinary mortals, like temperature, wind-speed, and so on. • A Web form at the same site: http: //zowie. metnet. navy. mil/cgi-bin/oleg/get-obs allows you to retrieve reports in OMF format, by specifying latitude and longitude or “call IDs”, of weather stations. 11/26/2020 svgspring 02 84

How Raw OMF Data Looks Station Call ID and Name <!DOCTYPE Reports SYSTEM "OMF. dtd"> <Reports TStamp="1017242870"> <SYN Title='METAR' TStamp='1017237180' Lat. Lon='39. 150 , -86. 616' BId='724375’ SName='KBMG, BLOOMINGTON/MONROE' Elev='258'> <SYID>KBMG 271353 Z</SYID> <SYCODE>RMK AO 2 SLP 259 T 00001011</SYCODE> <SYG T='0. 0' TD='-1. 0' AS='1025. 1‘ Temperature Vis='14490' Ceiling='INF‘ Wind='280, 2' Clouds='00///'> 28004 KT 9 SM CLR 00/M 01 A 3027 </SYG> </SYN> Visibility Wind Direction and Speed </Reports> 11/26/2020 svgspring 02 85

How We Want the Data Displayed 11/26/2020 svgspring 02 86

Beginnings of a Style Sheet <xsl: stylesheet version="1. 0" xmlns: xsl="http: //www. w 3. org/1999/XSL/Transform" xmlns: xlink="http: //www. w 3. org/1999/xlink"> <xsl: output method="xml" indent="yes" doctype-public="-//W 3 C//DTD SVG 1. 0//EN" doctype-system= "http: //www. w 3. org/TR/2001/REC-SVG-20010904/DTD/svg 10. dtd"/> <xsl: template match="Reports"> <svg width="350" height="200" view. Box="0 0 350 200"> <defs> <path id="wind-line" d="M 40 40 h 25“ style="stroke: black; fill: none; "/> </defs> <xsl: apply-templates select="SYN[1]"/> </svg> </xsl: template>. . . More template rules. . . </xsl: stylesheet> 11/26/2020 svgspring 02 87

Remarks • We use the XSLT namespace, naturally. – At one point we will also use the XLink namespace; strict processors require us to declare this. • The first template matches the top level Reports element of the OMF source. It generates the top-level svg element of the result. – This includes a defs element containing one object that will be used later (for illustration only). – Convention here is XSLT is in yellow, emitted SVG elements are in green. • Note we only apply templates recursively to the first nested SYN element. We use the XPath subscripting notation (select="SYN[1]”) to specify that further templates are only applied to this element. – Our output format can’t display multiple data sets very easily. 11/26/2020 svgspring 02 88

Matching the SYN element <xsl: template match="SYN"> <text x="10" y="20" style="font-size: 10 pt; "> <xsl: value-of select="@SName"/> </text> <xsl: apply-templates select="SYG"/> </xsl: template> • This generates a text element containing the Station call ID and name (the content of the SName attribute), then dispatches templates for the nested elements. 11/26/2020 svgspring 02 89

Matching the SYG element <xsl: template match="SYG"> <xsl: call-template name="draw-thermometer"> <xsl: with-param name="t" select="@T"/> </xsl: call-template> <xsl: call-template name="draw-wind"> <xsl: with-param name="w" select="@Wind"/> </xsl: call-template> <xsl: call-template name="draw-visibility"> <xsl: with-param name="v" select="@Vis"/> </xsl: call-template> </xsl: template> 11/26/2020 svgspring 02 90

Remarks • This illustrates a new technique, not covered in the earlier lectures on XSLT. • Nearly all the work in creating the array is associated with processing the SYG element of the source document. • This would lead to a very lengthy template rule, if we couldn’t break up the work. • To get round this kind of problem XSLT allows you to define template rules that are “called” explicitly from other rules, rather than being invoked implicitly by a match. – This is a software engineering mechanism as much as anything. The extra templates are equivalent to functions (procedures, subroutines, methods, . . . ) in programming languages. • When a template is called directly like this, you can specify arguments using the with-param element. 11/26/2020 svgspring 02 91

Drawing the Thermometer <xsl: template name="draw-thermometer"> <xsl: param name="t">0</xsl: param> <xsl: variable name="height" select="50 -$t"/> <xsl: variable name="tint"> <xsl: choose> <xsl: when test="$t > 0">red</xsl: when> <xsl: otherwise>blue</xsl: otherwise> </xsl: choose> </xsl: variable> <g id="thermometer" transform="translate(10, 40)"> <path d="M 25 {$height} 25 90 A 10 10 0 1 0 35 90 L 35 {$height} Z" style="stroke: none; fill: {$tint}; "/> <path d="M 25 0 25 90 A 10 10 0 1 0 35 90 L 35 0 Z" style="stroke: black; fill: none; "/>. . . Draw Text Around Thermometer </g> </xsl: template> 11/26/2020 svgspring 02 92

Remarks (XSLT) • This template illustrates several new features of XSLT, notably the initialization and handling of “variables”. – Values of XSLT variables can only be initialized once in any given template instantiation (in the element that “declares” the variable). – There is no concept of changing the state of a variable later by assignment. This is similar to many “declarative” programming languages, especially the pure functional languages. – The xsl: choose, xsl: when, xsl: otherwise nest is a verbose way of representing what is called a conditional expression in programming languages. – The value of a variable is accessed in an XPath expression by prefixing $ to the variable name. This is similar to many scripting languages. • Recall that in XSLT the value of an XPath expression can be included in an attribute value by surrounding it with {}s. 11/26/2020 svgspring 02 93

Remarks (SVG) • If (for example) the parameter t has value 6, then height=44 and tint=“red”. The path: <path d="M 25 {$height} 25 90 A 10 10 0 1 0 35 90 L 35 {$height} Z" style="stroke: none; fill: {$tint}; "/> displays as: • The fixed path: <path d="M 25 0 25 90 A 10 10 0 1 0 35 90 L 35 0 Z" style="stroke: black; fill: none; "/> displays as: • Note the A command on a path draws an arc—a section of a circle or ellipse. 11/26/2020 svgspring 02 94

Text Around Thermomenter <g id="thermometer-text" style="font-size: 8 pt; font-family: sans-serif; "> <text x="20" y="95" style="text-anchor: end">-40</text> <text x="20" y="55" style="text-anchor: end">0</text> <text x="20" y="5" style="text-anchor: end">50</text> <text x="10" y="110" style="text-anchor: end">C</text> <text x="40" y="95">-40</text> <text x="40" y="55">32</text> <text x="40" y="5">120</text> <text x="50" y="110">F</text> <text x="30" y="130" style="text-anchor: middle">Temp. </text> <text x="30" y="145" style="text-anchor: middle"> <xsl: value-of select="$t"/> / <xsl: value-of select="round($t div 5 * 9 + 32)"/> </text> </g> 11/26/2020 svgspring 02 95

Drawing Wind-speed Compass <xsl: template name="draw-wind"> <xsl: param name="w">0</xsl: param> <xsl: variable name="dir" select="substring-before($w, ', ')"/> <xsl: variable name="speed" select="substring-after($w, ', ')"/>. . . Compute dir 1 and dir 2 <g id="compass" transform="translate(110, 70)" style="font-size: 8 pt; font-family: sans-serif; "> <circle cx="40" cy="40" r="30" style="stroke: black; fill: none; "/> <path d="M 40 10 L 40 14 M 70 40 L 66 40 M 40 70 L 40 66 M 10 40 L 14 40" style="stroke: black; fill: none; "/>. . . Draw Compass Needle <text x="40" y="8" style="text-anchor: middle">N</text> <text x="73" y="44">E</text> <text x="40" y="80" style="text-anchor: middle">S</text> <text x="8" y="44" style="text-anchor: end">W</text> <text x="40" y="100" style="text-anchor: middle">Wind (m/sec)</text> <text x="40" y="115" style="text-anchor: middle"> <xsl: value-of select="$speed"/> </text> </g> </xsl: template> 11/26/2020 svgspring 02 96

Remarks • In OMF the value of the Wind attribute is divided into a direction (degrees from North) and a wind-speed in meters/second. These are separated by a comma. • They are extracted and placed in variables dir and speed using the XPath string-processing functions substring-before() and substring-after(). – There is a further complication in OMF because dir can be a hyphen-separated range of directions: “dir 1 -dir 2”. The code on the next slides extracts the upper and lower bounds, and draws the compass needle. • The path element on the preceding slide is a broken path representing the gradations on the compas. 11/26/2020 svgspring 02 97

Compute dir 1 and dir 2 <xsl: variable name="dir 1"> <xsl: choose> <xsl: when test="contains($dir, '-')"> <xsl: value-of select="number(substring-before($dir, '-'))-90"/> </xsl: when> <xsl: otherwise> <xsl: value-of select="number($dir)-90"/> </xsl: otherwise> </xsl: choose> </xsl: variable> <xsl: variable name="dir 2"> <xsl: choose> <xsl: when test="contains($dir, '-')"> <xsl: value-of select="number(substring-after($dir, '-'))-90"/> </xsl: when> <xsl: otherwise> <xsl: value-of select="number($dir)-90"/> </xsl: otherwise> </xsl: choose> </xsl: variable> • Subtract 90 degrees because North is vertical (see plotting on next slide). 11/26/2020 svgspring 02 98

Draw Compass Needle <use transform="rotate({$dir 1}, 40)" xlink: href="#wind-line"> <xsl: if test="$dir 1 != $dir 2"> <xsl: attribute name="stroke-dasharray">3 3</xsl: attribute> </xsl: if> </use> <use transform="rotate({$dir 2}, 40)" xlink: href="#wind-line"> <xsl: if test="$dir 1 != $dir 2"> <xsl: attribute name="stroke-dasharray">3 3</xsl: attribute> </xsl: if> </use> • If dir is a range (dir 1 and dir 2 are different) the needle is drawn as a pair of dashed lines. Otherwise the same line is just drawn twice. • A rotate transformation is used to rotate the horizontal line wind-line defined in the defs section. 11/26/2020 svgspring 02 99

Drawing Visibility <xsl: template name="draw-visibility"> <xsl: param name="v">0</xsl: param> <xsl: variable name="width"> <xsl: choose> <xsl: when test="$v = 'INF'">100</xsl: when> <xsl: when test="$v > 40000">100</xsl: when> <xsl: otherwise> <xsl: value-of select="$v * 100. 0 div 40000. 0"/> </xsl: otherwise> </xsl: choose> </xsl: variable> <g id="visbar" transform="translate(220, 110)” style="font-size: 8 pt; text-anchor: middle; "> <rect x="0" y="0" width="{$width}" height="20” style="stroke: none; fill: green; "/> <rect x="0" y="0" width="100" height="20” style="stroke: black; fill: none; "/> <path d="M 25 20 L 25 25 M 50 20 L 50 25 M 75 20 L 75 25” style="stroke: black; fill: none; "/> <text x="0" y="35">0</text> <text x="25" y="35">10</text> <text x="50" y="35">20</text> <text x="75" y="35">30</text> <text x="100" y="35">40+</text> <text x="50" y="60">Visibility (km) </text> <text x="50" y="75"> <xsl: value-of select="format-number($v div 1000. 0, '0. ###')"/> </text> </g> </xsl: template> 11/26/2020 svgspring 02 100

XSLT Processing • Since Internet Explorer has built-in XSLT capabilities, and since we have plug-in for displaying SVG in the browser, there ought to be some way to apply our XSL transformation to the OMF data and view the SVG result, all within the browser. • Most likely this is possible by clever use of Java. Script and/or Active. X, but we will take a different (more straightforward? ) approach here. – We will use a standalone XSLT processor to read the source XML data and convert it to a physical SVG file. – The resulting SVG file can be viewed with a Web Browser or standalone SVG viewer. 11/26/2020 svgspring 02 101

The Xalan XSLT Processor • Xalan-Java is a flexible XSLT processor from Apache. – It is written in Java, so it can easily be called from Java programs. – We will only use it as a command-line program. • You can download Xalan from: http: //xml. apache. org/xalan-j/ • Follow the instructions to put the requisite jar files on your class path. You can then process XML by issuing the command: > java org. apache. xalan. xslt. Process -IN infile -XSL xslfile -OUT outfile where infile is the source XML data, xslfile is the style sheet controlling the transformation, and the result will be written to outfile. 11/26/2020 svgspring 02 102

Getting Sample Data • Go to the Web page at http: //zowie. metnet. navy. mil/cgi-bin/oleg/get-obs • You have several options for retrieving reports. Perhaps the simplest is to give the call letters of the observation station you are interested in, e. g. KBMG is Bloomington, KIND is Indianapolis, RKSL is Seoul, etc. – There is a separate page at http: //zowie. metnet. navy. mil/cgibin/oleg/search-mslib for finding stations. • Type the call letters into the appropriate form field, and hit “retrieve”. • An XML document will be returned, which you can save using the browser File menu, or simply cut and paste to a file, then convert to SVG using Xalan. 11/26/2020 svgspring 02 103

A Script to Display Weather • In the spirit of Web Services, we would like to be able to obtain and process current XML data automatically. • The following batch file, called weather. bat, will do this: java org. apache. xalan. xslt. Process -IN “http: //zowie. metnet. navy. mil/cgibin/oleg/get-obs? call_id=%1%&do-retrieve=RETRIEVE” -XSL display. xsl -OUT out. svg java -jar c: batik-1. 1. 1batik-svgbrowser. jar out. svg • Notes: a) We can pass a URL to Xalan in place of an input file. b) The server will accept form parameters appended to the URL after a ? sign. c) %1% here means the first command line argument. Invoke the command like: > weather. bat KBMG d) After processing the XML, the batch file fires up the Batik viewer to display the resulting SVG. 11/26/2020 svgspring 02 104

Aside: The Batik SVG Browser • Batik is an SVG toolkit from Apache. – Like Xalan, it is written in Java, so it can easily be called from Java programs. – Like Xalan, we only use it here as a command-line program, in this case to view an SVG file. • You can download Batik from: http: //xml. apache. org/batik/ • If you install the toolkit under c: you can view an SVG file by: > java -jar c: batik-1. 1. 1batik-svgbrowser. jar infile where infile is the source SVG document. 11/26/2020 svgspring 02 105

Conclusion • The example showed how to use XSLT to convert raw XML data, obtained from a remote server, to a convenient graphical display. • By automating this process we move some way towards the spirit of Web Services. • To move further in this direction, the XSLT processing might be placed in a servlet on a Web server, anywhere in the world. Scenario might be: – Browser asks Web server A for weather information to display. – Server A forwards this request to meterological data server B. – B returns raw data in OMF format (perhaps embedded in a SOAP envelope) to A. – Server A applies Xalan in a Java Servlet to convert the OMF to SVG, and returns it to the client. – Browser displays graphical version of weather information. 11/26/2020 svgspring 02 106