Updated SVG Demos

Further to this morning's post about SVG I've been back and looked for this site's old SVG demos. What I found was that all (well, both) of my SVG demos were broke, as the current browser implementation of SVG requires a content-type of "image/svg+xml" and I wasn't specifying that. Doh.

The main demo I fixed was the World Cup goals summary database. The SVG chart from it is embedded below.

Whether you see the chart below depends on what browser you're using. If you're using IE you won't see it. If you're using any other up-to-date browser you should see a bar chart of the goals scored in the first round of the cup, by group.

I remember being much more proud of that when I did it than I am now looking at it again. How times change.

Note that the chart you're seeing above is not just an image (as such) and is not Flash and is built in real-time based on backend data in Domino. Scale your browser window and notice is scaled with it (vector-based!). Right click the chart and you can even view its SVG source, just like HTML!

While there are various charting solutions available now, most rely on Flash, while SVG is much more "pure". When HTML 5 is out and about there'll even be and <svg> tag, so you can add a chart inline with your HTML like so:

<h1>SVG/HTML 5 Example</h1>
<circle id="myCircle"
cx="100" cy="75" r="50"
stroke-width="3" />
<text x="60" y="155">Hello World</text>

Stay ahead of the game and familiarise yourself with SVG now. At some point in the future it will be a really useful tool. If it isn't already.

For more Domino-based SVG inspiration, it's good to see that Ruediger Seiffert's Agent-generated pie chart is still online.

For now I think I'll forget about SVG, as I have other things on my mind, but it's good to see it progressing and that whatever I haven't forgotten from my first foray in to SVG isn't going to have been learnt in vain.


    • avatar
    • Phil Petts
    • Mon 12 Oct 2009 07:00 AM


    I'm using IE 6 (don't ask), and I can see the chart.....


    • avatar
    • Jake Howlett
    • Mon 12 Oct 2009 07:22 AM

    I assume you must have the Adobe (or some other) SVG viewer plugin installed then Phil?

  1. As usual Jake, you were so far ahead of the curve that you are driving around the track and closing in on... yourself!

    Excellent work

    • avatar
    • Jake Howlett
    • Mon 12 Oct 2009 04:03 PM

    Well, if you say so Ed ;o)

    Thinking about it I wonder if it's still too early to take SVG seriously. After all, without native support in IE how can we consider it for real-world use?!

    • avatar
    • Phil Petts
    • Tue 13 Oct 2009 03:36 AM

    Jake - Just checked, and yes I do have the Adobe plug-in installed.

    Good stuff as usual, Phil.

    • avatar
    • Ruediger Seiffert
    • Tue 13 Oct 2009 01:20 PM

    Thanks for mentioning my really ancient example. To be honest it's a little bit rusty and somehow broken... Today i am more excited by Flex (with or without Domino).

    • avatar
    • Mark
    • Thu 22 Oct 2009 05:48 AM

    Although SVG is great for generating dynamic images/ charts, most of our users are using IE. We therefore has to resort to generating PNG images from SVG content server side using the Apache Batik library (http://xmlgraphics.apache.org/batik/).

    The SVG XML is generated in an agent and (using LS2J) sent to a Java class that creates the PNG file. The generated images are attached to a Notes document and referenced in a report. See the Batik Transcoder API for an example.



Your Comments


About This Page

Written by Jake Howlett on Mon 12 Oct 2009

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content