Generating Scalable Vector Graphics (SVG) on the FlyBy David Botterman
|To Learn More About Graphing with ASP...|
|This article examines how to create SVG images on the fly from an ASP page. Did you know that you can also create on-the-fly graphs using various other techniques, such as HTML tables, Office Web Components, and third-party graphing components? To learn more about dynamic graphing from an ASP page, be sure to also check out the Graphing Article Index!|
On 5 September 2001, Scalable Vector Graphics (SVG) 1.0 became a W3C Recommendation: see http://www.w3.org/Graphics/SVG/Overview.htm8. SVG, in short, is an XML-based protocol useful for displaying 2D vector graphics. This includes shapes, graphics, and text, allowing a number of effects, such as styling, clipping, filtering, alpha masks, etc. For a more in-depth look at SVG, be sure to read: A Quick Introduction to SVG and Scalable Vector Graphics: The What and the How.
An SVG image is, essentially, an XML-formatted text file. An appropriate SVG image viewing program can translate this text into a graphical image. Therefore, in order to view an SVG image on the Web, you need to install a free SVG image viewer plugin. Several plugins are available, such as the Adobe SVG Viewer which is available (for free) at http://www.adobe.com/svg.
Once you have this plugin installed, you can view SVG graphics. Since SVG graphics are constructed from text, it is possible to easily generate these graphics on the fly using any server side scripting model like PHP, JSP or ASP. This offers new and unprecedented possibilities for flexible graphical applications on the Web. In order to create an SVG file from an ASP page, you simply need to add a header to indicate the appropriate content-type and then send the XML-formatted text of the SVG file. A very simple example can be seen below.
The above code draws a black box 100 pixels wide and 100 pixels tall, starting at the offset (10,10). Of course things get more interesting when you use user input to generate graphics on demand. The following sample uses a parameter called title that is passed in the querystring to change the result. Here is the source code:
Used in combination with a database you could make pretty nice stoke charts or similar interactive graphical
applications! You can also easily embed SVG graphics into an HTML page. To do so, just use the
embed tag like so:
SourceToSVGFile can point to a hard-coded SVG XML file or an ASP page that generates the
XML for the SVG graphic on the fly.