Create JPEGs Automatically With SVG

By Benoit Marchal
2003-12-22

A Pragmatic Application

Even though it is not as readily available as Flash, using SVG today still has its advantages. One of the attractions of SVG is that it is an XML vocabulary, so it is easy to tweak SVG files with familiar tools such as XML parsers, scripts, and XSL stylesheets. To work around the lack of browser support, it is possible to convert SVG images into formats that are widely supported, such as GIFs or JPEGs.

Apache offers an open-source SVG renderer, Batik (see Resources). Batik comes in different forms and shapes, including a browser to view images, tools to create images, and a rasterizer. I'm most interested in the rasterizer, since it can convert SVG files to bitmaps.

Enough talk -- it's time to code. Listing 1 is a Python script that creates a bar chart from a set of data. Note that you don't have to use Python for this tip to work -- Perl, JavaScript, the Java language, and, most importantly, XSL stylesheets work equally well. The point is that since SVG files are XML, any XML tool is appropriate.

Listing 1. printsvg.py



from sys import stdin



def read_data():

   data = []

   line = stdin.readline()

   while line != '\n' and line != '':

      data.append(line.split())

      line = stdin.readline()

   return data



def print_bars(data):

   position = 0

   for i in data:

      height = int(i[1]) * 2

      if height > 200:

         height = 200

      print '       <rect x="%(x)i" y="%(y)i" width="30" \

height="%(height)i"/>' % { 'x': position * 40 + 10, 

                           'y': 200 - height, 'height': height }

      print '       <text x="%(x)i" y="215">%(text)s\

</text>' % { 'text': i[0], 'x' : position * 40 + 20 }

      position += 1

   return



def print_svg(data):

   print u'<?xml version="1.0"?> \

\n<svg xmlns="http://www.w3.org/2000/svg" \

\n     id="body" \

\n     width="%(width)i" \

\n     height="220" \



\n     viewBox="0 0 %(width)i 220"> \

\n     <polyline style="stroke:black; fill:none" id="axis" \

points="0,0 0,200 %(width)i,200"/> \

\n     <g id="boxes" style="stroke:black; fill:green; \

text-anchor: middle">' % { 'width': len(data) * 40 + 10 }

   print_bars(data)

   print '    </g> \

\n</svg>'

   return



if __name__ == "__main__":

   print_svg(read_data())

In Listing 1, I kept the bar chart simple. First the script draws the axis, then it loops over the data and draws the bars as rectangles. It also draws labels as text. It would not be difficult to improve on the graphics, like drawing the bars in 3D or using different colors. If you'd like to learn more about writing SVG shapes, check the developerWorks tutorials (see Resources).

The script is a filter, so it expects its input from the standard input and it writes the results on the standard output. It expects the data to be presented in lines where each line holds two pieces of data -- the line label and a percentage. Use the redirection operators to work with files, as in:



python printsvg.py < data.txt > chart.svg

Listing 2 is a sample data set. Obviously, you can generate dozens of images in seconds by feeding different data sets to the script. This can be useful in statistical applications.

Listing 2. data.txt



Jan. 43

Feb. 34

Mar. 98

Apr. 29

May  52

Jun. 33

Jul. 15

Aug. 11

Sep. 65

Oct. 78

Nov. 98

Dec. 87

To convert the SVG image to a more common format, install the Batik rasterizer (see Resources) and issue the following command:



java -jar batik-rasterizer.jar chart.svg

Running the script in Listing 1 with the data from Listing 2 will ultimately produce the image in Figure 1:

Figure 1. The bar chart example

By default, the rasterizer creates PNG files. If you'd rather create JPEGs, use the following command:



java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 chart.svg

The -m specifies the image MIME type and the -q is the quality factor for the JPEG (a number between 0 and 1).

Tutorial Pages:
» Use Scalable Vector Graphics To Create Images By The Dozen
» A Pragmatic Application
» Variations On The Theme
» Resources

First published by IBM developerWorks

Comment on this Tutorial |

Related Tutorials:
» Starting with XML
» Performing Client-Side XSL Transformations
» Create a Google Sitemap for your Web Site
» XML and Scripting Languages
» Parsing Comma-Separated Values
» XML Security Suite: Increasing the Security of E-Business