SVG server-side

Generating SVG on the fly

Christian Wenz

Libauer Str. 2
D-81927 Munich, Germany
e-mail: chw@hauser-wenz.de

Tobias Hauser

Prinz-Karl-Str. 30b
D-82319 Starnberg, Germany
e-mail: th@hauser-wenz.de

webpage: http://www.hauser-wenz.de/

Keywords: SVG server-side; dynamic generation on the fly; PHP; ASP; ASP.NET; Perl; JSP

Abstract

SVG is powerful, and using its scripting capabilities, it is even more powerful. However the ultimate power can oly be achieved when using server-side scripting. This enables the usage of storing information in files, retrieving (and writing) data into databases and so on. In this talk, we will show how you can extend your server and your scripts so that you can generate SVG code on the server side. The focus of this talk is on the how, e.g. which steps are necessary for a script to generate code the viewer understands. Thus, there is no focus on one special technology (PHP, ASP, ASP.NET, JSP, Java Servlets, Perl, ...) - the goal of this talk is that everyone can benefit from it, no matter which technology is used.

Introduction

SVG is powerful, no question. If you combine SVG with ECMAScript, you can add a lot of dynamic to the whole file. Most people say however that there is no need for yet another web animation format, so there are other fields of use that must be (and have been!) found. SVG is primarily a vector format, which can be very well used to display data. This data, on the other hand, in most cases resides in a database. So there is a real need for techniques and programs that retrieve information from a data source and dynamically generate SVG code from that.

In this talk, we show some basic information about how to generate SVG with a variety of very common server side techniques.

Satisfying the web browser

When a browser retrieves a file from a web server, the first decision to be made is how to handle this file. If it's HTML, display it. If it's a PDF, open it in a PDF reader (on most systems this is possible within the current browser window). If the file type cannot be detected, a dialog box prompts the user for a file name to save the file on the local hard disk.

The question is - how does the web server find out what type of file has been sent from the web server? The best approach for this is reading out the MIME type of the file. The akronym MIME stands for Multipuirpose Internet Mail Extensions. The original use of MIME was to create a means to set the data type of attachments in an e-mail, however when the WWW came up, the developers of both servers and browsers quickly found out how to use this technique.

Imagine the usual client-server scenario in the web world. A client sends a request to a server. The server responds and - if everything works out as planned - returns an HTML stream. This stream starts with the HTTP header that contains information about the data that is sent. As part of this header, the MIME type of the sent file is transmitted.

An HTTP response looks like this:

HTTP/1.1 200 OK
Content-Type: image/svg+xml
Content-Length: 42

content ...

The browser can now read out the MIME type and depending on that correctly handle the file. If you are using Netscape 4 to download .ZIP, you sometimes get a dialogue box that asks you whether the file should be opened in your ZIP GUI (if available) or be saved on the hard disc; sometimes however, you do not have the choice to open the file but can only save it. The reason for this is the MIME type sent by the web server: some send a MIME type the browser doesn't associate with ZIP files.

So the first step to make a web browser correctly identify an SVG file as a Scalable Vector Graphic is to set the correct MIME type. On November 2, 2000, the W3C set the MIME type of SVG files to image/svg+xml; previously, that has been image/svg-xml. If you want to send out this MIME type with all files that have the extension .svg, you must configure your web server to do so.

When using Apache, one new line in mime.types does the trick:

image/svg+xml svg

Alternatively, you can create an .htaccess file in the root directory of your web application with the following content:

AddType image/svg+xml svg

This option comes in handy when you share the web server with other web applications that do not need (or want) the SVG MIME type.

Microsoft's alternative to Apache, the Internet Information Server (or in recent versions of Windows, Internet Information Service - acronym for both is IIS), allows you to set the MIME type in the magagement console of the web server/service. Select the properties of the server or the target application and add a new mapping for the file extension .svg to the MIME type image/svg+xml.

Adding extensions to MIME types for IIS

Figure 1: Adding extensions to MIME types for IIS

Other web servers offer similar options; refer to the documentation provided with the products. You also might want to add a MIME type mapping for compressed SVG, file extension .svgz, too; the associated MIME type is image/svg+xml, as well.

After these steps, the web server sends out the associated MIME type with all .svg files. If you are using a tool that monitors the HTTP traffic, you can check this.

The correct MIME type is returned from the server

Figure 2: The correct MIME type is returned form the server

SVG and server-side languages

Configuring the web server for SVG files is the first step, however the real power of SVG can only be unleashed by combining it with the possibilities of server-side scripting. Unfortunately, the default MIME type of most server-side web scripting languages is text/html, the MIME type for HTML content. So you have to manually set the MIME type from withing the scripting language. We show how to achieve this with the most widely used scripting languages.

PHP

PHP: Hypertext Preprocessor (or short: PHP) was created by Rasmus Lerdorf and is freely avaiable at http://www.php.net/. With the header() function, custom HTTP headers can be written before any HTML (or SVG) output is created. Thus, the following command, preferredly on top of the PHP page, sets the MIME type to the SVG type, enabling web browsers to display the data:

<?php
  header("Content-type: text/svg+xml");
?>

As you see, Content-type is the part of the HTTP header that contains the MIME type information; usually, PHP sets this to text/html, but this would prevent the browser from displaying the SVG content correctly.

A very simple PHP file that creates an even simpler SVG output is shown as follows:

<?php
header("Content-type: text/svg+xml");
?>
<?xml version="1.0" ?>
<svg width="150px" height="100px">
  <text x="10" y="60">PHP @ SVG Open</text>
</svg>

Note that this example will not work when short_tags is set to On in php.ini; then, the PHP interpreter thinks that the <? start of the XML declaration starts PHP code. In this case, you have to create the XML declaration using PHP:

echo('<?xml version="1.0" ?>' . "\n");

Another way to set the MIME type in PHP is to edit php.ini and make the following changes:

DEFAULT_mimetype = "text/svg+xml"

However in this case, all PHP scripts return the SVG MIME type.

ASP / ASP.NET

The Active Server Pages technology from Microsoft currently exists in two flavors: the "classic" version ASP is available for almost all versions of Microsoft Windows starting with Windows 95. The new version, ASP.NET, uses the .NET Framework Microsoft introduced in 2001 and is only available on server versions of Windows - i.e. Windows 2000 Professional/Server/Advanced Server, Windows XP Professional.

Setting the response's MIME type can be done by setting Response.ContentType:

Response.ContentType = "text/svg+xml"

Here is a complete working example:

<%
  Response.ContentType = "text/svg+xml"
%>
<?xml version="1.0" ?>
<svg width="150px" height="100px">
  <text x="10" y="60">ASP(.NET) @ SVG Open</text>
</svg>

If you give this script an .aspx file extension, it works under ASP.NET, as well.

JSP

When using Java Server Pages, the only thing you are required to do to set the MIME type of the HTTP response is to use this directive:

<%@ page contentType="image/svg+xml" %>

Here is our simple example again, this time using JSP:

<%@ page
contentType="image/svg+xml" %>
<?xml version="1.0" ?>
<svg width="150px" height="100px">
  <text x="10" y="60">JSP @ SVG Open</text>
</svg>

Note: When using Java Servlets, the source code has to be compiled and the code itself has to reside in a class. Within this class, the following command sets the required MIME type:

response.setContentType("image/svg+xml");

In this code, response is of type HttpServletResponse.

Perl

Perl is the dinosaur among web scripting languages, its market share (when it comes to server side web scripting) getting smaller (one reason is the rise of PHP). However it is still widely used, and CPAN offers a huge amount of packages that extend Perl even further.

Unlike most other web scripting languages (that are directly aimed at web use), you have to manually create the HTTP header with Perl. Here, this is a kind of advantage, since it's no problem to set the MIME type:

print "Content-type: image/svg+xml\n";

Here again a working example:

#!/usr/local/bin/perl
print "Content-type: image/svg+xml\n\n";
print '<?xml version="1.0" ?>';
print '<svg width="150px" height="100px">';
print '  <text x="10" y="60">Perl @ SVG Open</text>';
print '</svg>';

Ruby

A new emerging language from Japan is Ruby, there even surpassing Python according to recent studies. In Europe, Ruby starts to find fans, as well, however there it is still a long way to go.

As with Perl, the HTTP header has to be manually written:

print "Content-type: image/svg+xml\n"

Here is a working example :

#!/usr/local/bin/ruby
print "Content-type: image/svg+xml\n\n"
print <<ENDOFSVG
<?xml version="1.0" ?>
<svg width="150px" height="100px">
  <text x="10" y="60">Ruby @ SVG Open</text>
</svg>
ENDOFSVG

Calling the script

Once you have created your server-side script, you want to call this script from an HTML page, making the SVG data appear.

<embed witdh="..." height="..." 
  src="http://servername/path/script"
  type="image/svg+xml"></embed>

If you do not need to support Netscape 4.x, you would of course prefer <object>.

However, some versions of Microsoft Internet Exporer fail with this. They completely ignore the MIME type sent from the server, but try to find out the file type by other means (e.g. by looking into the file). However there is one trick that makes Internet Explorer cooperate. The first thing the browser has a look at is the extension of the file sent. So if you add something to the script name that it ends with .svg, the file will be correctly interpreted as SVG data:

<embed witdh="..." height="..." 
  src="http://servername/path/script?IE=.svg"
  type="image/svg+xml"></embed>

The query string ?IE=.svg does not affect the results of the script, so it does not harm the SVG data but makes Internet Explorer behave as expected.

Another way to achieve this is to associate the file extension .svg to a server side scripting language, i.e. all files that end with .svg are executed by the PHP (ASP/ASP.NET, Perl, ...) interpreter.

SVG Extensions

There are several attemps to create extensions for some scripting languages that enable users to create SVG server-side very easily. One of them is SVG.pm, a Perl extension. It is available at http://www.roasp.com/ (don't get confused by the "asp" in the domain name). With this extension, SVG can be generated like this:

#!/usr/bin/perl

use SVG;

my $svg = SVG->new(width=>150, height>=100);
my $text = $svg->text(x=>10, y=>60)->cdata('SVG.pm @ SVG Open');
print $svg->xmlify;

Another extension currently under development is SVG#, or SharpVectors that wants to add SVG functionality to the .NET framework. However this one is still in its early stages.

Summary

In this talk you have seen how to user and create SVG server-side, no matter what scripting technology is used. We showed you what MIME types are, why they are important and how to set them. We've also taken a closer look on various scripting technologies that can be used to create SVG. These are only the first steps; we can create amazing scripts that create SVG from databases, just to name an example. However this would require us to focus on one scripting language, which would be unfair to the others.

References

[1] "SVG Unleashed", A. Watt, C. Wenz, T. Hauser, D. Ayers, K. Lindsey, R. George, C. Lilley. Sams Publishing, to be published in Sepmtember 2002.


Valid XHTML 1.1!