Published: Friday, September 14, 2001
Generating Scalable Vector Graphics (SVG) on the Fly
By 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.
<%Response.AddHeader "Content-Type","image/svg-xml"%>
<svg>
<rect x="10" y="10" width="100" height="100"/>
</svg>
|
[
View a live demo!]
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:
<%Response.AddHeader "Content-Type","image/svg-xml"%>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Example toap01 - simple text on a path</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">
<%
Dim title
title = "We go up, then we go down, then up again."
If Request("title") <> "" Then
title = Request("title")
End If
Response.Write title
%>
</textPath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
|
[
View a live demo!]
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:
<embed src="SourceToSVGFile" width="width" height="height" type="image/svg+xml">
|
The 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.
Happy Programming!
By David Botterman
