When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
Print this page.
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!

- continued -

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"%>
  <rect x="10" y="10" width="100" height="100"/>
[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"
    <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" />
  <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

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
[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

  • ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article