Author: Henning Pingel

Last updated: January 7, 2008

(Note for German users: Diese Seite ist derzeit leider nur auf Englisch verfügbar.)

This is a tutorial on how to use Scalable Vector Graphics (SVG) together with TYPO3 Web Content Management System. It shows how to insert inline SVG into TYPO3 generated web pages using a HTML content element. It also discusses which settings you have to make in a TypoScript template.

SVG will become more and more important within the World Wide Web because an increasing number of web browsers are starting to support SVG natively without the need to install a plugin. This is the case for the Opera 8.x and the Mozilla Firefox 1.5 browsers.

To see that there are even more interesting things happening with regard to SVG ready software - for example, mobile phones - have a look at the svg.org News page.

Opera 9.x supports most of SVG 1.1 Tiny and SVG 1.1 Basic according to the Opera specs.

Earlier Opera versions from the 8.x branch already supported most of SVG 1.1 Tiny. Antoine Quint and Jeff Schiller have tested the Opera 8.01 SVG capabilities by going through the W3C testsuite in May 2005. They have published their results in their weblogs:

• Antoine Quint on svg.org on 2005/06/20
• Jeff Schiller in his blog from 2005/06/21

Mozilla Firefox 2.0.x partially supports SVG 1.1 (for more details have a look at the detailed Firefox 2.0 SVG status page). The earlier Firefox branch 1.5.x already partially supports SVG 1.1. The upcoming Firefox version 3.0 offers more SVG features.

Other Mozilla browser products (like Seamonkey) are likely to get the same SVG support too as soon as there are releases using the same Gecko version.

The currently most popular web browser Internet Explorer (versions 5.5, 6 and 7) is also able to display SVG with the help of the Adobe SVG Plugin. The currently stable version of the plugin is 3.03. For more information see the PDF document CurrentSupport.pdf on the Adobe website that gives detailed information about the implementation status of SVG elements in Adobe SVG Viewer 3.0. (There is also a beta version 6.0 preview 1 available.)

For further information see the page Viewer implementations in the SVG-Wiki.

When we consider the benefits of including SVG graphics into a TYPO3 based website this leads to the basic question:

• Where are the benefits of including SVG graphics inside web pages? This in return, leads to the question:
• Why prefer SVG to Macromedia Flash based vector graphics, animations or applications?

These questions are very important but because space in this tutorial is limited (and I don't want to overstrain the reader's patience) I won't discuss them here.

Other questions that I would like to discuss here are:

• Does the architecture of TYPO3 allow to integrate SVG support smoothlessly? (SVG as a XML dialect would need all the XML capabilities that it can get from TYPO3. How capable is TYPO3 of juggling with HTML/XHTML and XML?
• Does TYPO3 benefit from adding extensions that enable SVG usage? Do the users of TYPO3 benefit from SVG support?

TYPO3 is designed to provide website designers with powerful features like the GUIFBUILDER-object to control the layout and graphics of a website. Therefore it is easy to think of how TYPO3 or some TYPO3 extensions may help to integrate SVG content into a website.

There is at least one TYPO3 extension that enables you to add SVG graphics to TYPO3 based web pages. It is called SVG Insertion and was written by Sebastian Kurfuerst. Apparently, you can insert SVG images as external files into a web page via the HTML-Tags <embed>, <object> or <iframe>. But there is another way of displaying SVG: inline. When you look at it from a template developers point of view, this method is very promising.

There are different ways of making SVG data visible inside of a web browser. The W3Schools website has a tutorial with a page about SVG Structure giving a brief explanation how to do this - but it does not explain the inline method.

If you are a TYPO3 template developer, the main advantage of the inline approach is the ability to easily wrap SVG tags around text content. For example, it should be possible to create a SVG based menu using the ordinary TMENU object. The SVG wrapping would be part of the TYPO3 template (usually a HTML template).

Of course, for the end user who does not want to to generate SVG coding via TypoScript it would be easier to work with proper SVG files by uploading them as separate files and integrating them into a web page via the multimedia element or the SVG extension called "SVG Insertion" already mentioned above.

In this section you can learn how to combine XHTML and SVG data in one XML document in such a way that your browser displays both. To mix SVG tags and HTML tags in an XML document that will be interpreted as a web page, you need to use different XML namespaces to tell the browser what is going on where:

• XHTML namspace (xmlns:xhtml="http://www.w3.org/1999/xhtml")
• SVG namespace (xmlns:svg=http://www.w3.org/2000/svg")
• XLINK namespace if you want to use hyperlinks on SVG elements (xmlns:xlink="http://www.w3.org/1999/xlink")

With each namespace you can define a prefix that you can use in front of the tags to show the namespace to which a tag belongs (such as <svg:text>Hello World!</svg:text> instead of <text>Hello World!</text>). Usually you omit a prefix for the most-used XML dialect to save time and bytes.

Because the document is of the mime type XML / XHTML, the browser will no longer use quirks mode when rendering and displaying the web page.

Strangely enough inline SVG inside a XHTML document does not work properly with MS Internet Explorer 5.5/6.0 and Adobe SVG Viewer 3, or there is no known solution at this time  (for details see below).

Firefox 1.5 and Opera >= 8.0

To enable Inline SVG in Firefox 1.5 or Opera 8.0/8.5/9.0preview see the following resources as there are two possible procedures:

1) As in the SVG In HTML Introduction of the Mozilla Developer Center, the SVG namespace can be introduced inside the tag <svg>: No prefix is necessary when you use SVG tags.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <text x="50" y="120">testing</text>
      <rect x="20" y="30" width="20" height="40" />
      <circle cx="250" cy="250" r="100" style="fill: red" />
    </svg>
  </body>
</html>

2) Secondly, according to the Linestroke example from www.croczilla.com, all namespaces (XHTML, SVG, XLINK) can be put into the HTML tag. You have to ensure that every opening and closing SVG tag has the prefix of the SVG namespace.

This is the method I chose for this tutorial because it is similar to the way I proceed for Internet Explorer (I prefer solutions that work in both browsers). Here is a simple example:

<html 
  xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <head>
      <title>Page Title</title>
  </head>
  <body>
    <svg:svg>
      <svg:text x="50" y="120">testing</svg:text>
      <svg:rect x="20" y="30" width="20" height="40" />
      <svg:circle cx="250" cy="250" r="100" style="fill: red" />
    </svg:svg>
  </body>
</html>

Internet Explorer  5.5/6.0 + Adobe SVG Viewer 3

Use this code for Microsoft Internet Explorer 5.5/6 with installed Adobe SVG Plugin. Douglas Schepers provides a nice tutorial on his website explaining how inline SVG works with IE. Another MSIE example for embedding inline SVG can be found on www.jwatt.org

Apparently inline SVG code is only interpreted within IE when the doctype is set to HTML 4.01 Transitional or it is omitted. If you set the doctype to XHTML 1.0 Transitional or to XHTML 1.0 Strict, the SVG graphics are not displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <title>Page Title</title>
</head>
  <object 
    id="AdobeSVG" 
    classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"
  ></object>
  <?import namespace='svg' implementation='#AdobeSVG'?>
  <body>
  <svg:svg width="600" height="600">
    <svg:text x="50" y="120">testing</svg:text>
    <svg:rect x="20" y="30" width="20" height="40" />
    <svg:circle cx="250" cy="250" r="100" style="fill: red" />
  </svg:svg>
</body>
</html>

config{
  doctype = xhtml_strict

  htmlTag_setParams(
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg"
  )
  metaCharset = utf-8
  additionalHeaders = Content-Type:text/xml;charset=utf-8
  xhtml_cleaning = all
}

config{
  doctype = <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  htmlTag_setParams = xmlns:svg="http://www.w3.org/2000/svg"
  xhtml_cleaning = all
}
page.bodyTag(
  <object 
    id='AdobeSVG' 
    classid='clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2'
  ></object>
  <?import namespace='svg' implementation='#AdobeSVG'?>
  <body>
)

[useragent = *MSIE*]
  config{
    doctype = <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    htmlTag_setParams = xmlns:svg="http://www.w3.org/2000/svg"
  }
  page.bodyTag(
    <object 
      id='AdobeSVG' 
      classid='clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2'
    ></object>
    <?import namespace='svg' implementation='#AdobeSVG'?>
    <body>
  )
[useragent = *Firefox*]
  config{
    doctype = <?xml version="1.0"?>
    htmlTag_setParams(
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
    )
    metaCharset = utf-8
    additionalHeaders = Content-Type:text/xml;charset=utf-8
  }
[else]
   # TS for other browsers
[end]
config.xhtml_cleaning = all

<svg:svg height="400px" width="400px">
   ...
</svg:svg>

SVG and also inline SVG opens new dimensions to standard conform web design. More browsers are capable of displaying SVG without plugins. SVG within HTML can already be used in intranet scenarios where all users can be asked to use the appropriate web browser.

The existing TYPO3 graphic processing features care a lot for manipulating bitmap graphics, but the handling of SVG is not very advanced at the moment. Nevertheless, it doesn't seem to be impossible to integrate SVG graphics, even using the "inline" approach. But still the time to use TYPO3 with inline SVG graphics on productive systems has not yet come. But hopefully it is not far away. ;o)

As already mentioned this is a work-in-progress article. Further detail will follow. Please contact me with ideas, suggestions, questions and corrections regarding this tutorial: post(at)henningpingel.de

Henning Pingel 

Thanks to Bernhard Kraft for his advice and ideas regarding this tutorial.

If you want to learn about Scalable Vector Graphics (SVG), please start at the W3C or at the Wikipedia SVG article. If you want to learn about the web content management system TYPO3, please start at the TYPO3.com website.

If you just want to see some amazing SVG examples have a look at the website of Holger Will that is called www.treebuilder.de. (Unfortunately the website didn't seem to exist any more when I checked the link on 3rd of November 2005. I hope it returns!)

Software Downloads

• SVG enabled Firefox: Get the most recent preview version of Firefox 1.5 web browser ("Deerpark") from here: http://www.mozilla.org/projects/firefox/
• Opera 8 web browser with SVG support: http://www.opera.com/download/
• Inkscape: Open Source Scalable Vector Graphics Editor http://www.inkscape.org/

Websites / tutorials on inline SVG (I have learned a lot from the authors of these pages):

• http://svg-whiz.com/wiki/index.php?title=Inline_SVG#Examples
• http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml
• http://www.schepers.cc/inlinesvg.html
• http://www.svgfaq.com/Inline.asp
• http://www.mozilla.org/projects/svg/

SVG support in Firefox 1.5:

• http://weblogs.mozillazine.org/tor/
• http://www.croczilla.com/svg/