Last night, the Seattle VFP Users Group learned a lot about SVG, or Scalable Vector Graphics, from Lauren Clarke of Cornerstone Systems Northwest.
SVG is an emerging technology for Data Visualization and Navigation, as well as Process Navigation. It’s an application of XML, which means that all the SVG markup is valid XML as well. It’s used for drawing vector-based shapes and text, along with images. To view it, you can download a plug-in from any of several sources. The one that Lauren uses comes from Adobe. SVG is similar to Microsoft’s VML: one of the primary differences is that VML renders natively in IE, without requiring a plug-in. However, the momentum seems to be behind SVG at the moment.
He started off by demoing a form with an SVG map of Africa, and a grid showing the countries and population. He was able to drive the app from either side — either clicking on the map to select the countries in the grid, or clicking on the grid or doing queries to highlight to countries on the map.
He also showed a Fox report that used SVG to build monthly sales reports (using a bit of slight-of-hand behind the scenes, since Fox doesn’t speak SVG natively).
All you need to get started with SVG is a text editor and an SVG viewer. No other software is necessary, although it’s useful to have third-party tools like Corel Draw which can save as SVG — that way, you can edit the file and see how to do what you’re trying to figure out.
Another thing about SVG is that its output is vector-based, instead of bitmap-based: you don’t lose resolution as you zoom in.
You can link in CSS files to set the style of your drawing, which can cut down dramatically on the size of your files. Other ways to cut down the size are the <g> (group), <use>, and <defs> tags, which have close conceptual matches in VFP. Also, after you define a drawing with the <defs> tag, you can link to it as a separate file using the HREF clause, just like in your HTML files. It also supports SMIL2 to animate your drawing - want to zoom the pieces of your pie chart onto the screen? No problem!
Another similarilty to your web pages is the <A> tag (which was implied above with the map). A major difference from HTML, though, is that if you create an imagemap, you need to define the boundaries within which a click is recognized. With SVG, only what you drew is recognized. In other words, if you draw a circle, there isn’t a box around it to click on, or a polygon that approximates the edge of the circle: the circle itself is the link.
In the second half of the meeting, he walked us through all the stages of building a graph in Fox — from the initial data to the final pie chart. It was amazing at how intuitive the whole thing was (even if Lauren had to throw up the “Warning, Math Ahead” sign a few times).
He has a white paper on his site with more information about using SVG and VFP: check it out!