Website von Henning Pingel
 
Inline SVG with TYPO3

Author: Henning Pingel

Last updated: January 7, 2008

 

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

Abstract

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.

Introduction

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.

SVG enabled web browsers

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:

 

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.

SVG and TYPO3 - is harmony possible?

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.

Why inline?

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.

How to persuade your browser to mix SVG and XHTML

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:

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>

 

TypoScript Template Setup

Now the focus is on the TypoScript code that renders the prerequisites for inline SVG display that were discussed above. Add the following code to your TYPO3 template.

Notes:

  • Be aware that the code provided will get SVG inline display to work but it is only page header related code. It is not a complete TypoScript template. You have to add all the page content related stuff (such as styles.content.get) yourself. The code was tested with TYPO3 3.6.2 and TYPO3 3.8.
  • There also has to be an additional xlink namespace if you want to use hyperlinks within SVG content.
  • Apparently the SVG content rendering does not benefit from the TypoScript setting config.xhtml_cleaning=all. This setting has to be used with care because it changes all tag names to lowercase which is good for correct XHTML rendering. However SVG uses mixed case tag names such as <textPath> or attributes that have to be written in mixed case according to the SVG DTD. On the other hand, the web browsers seem to handle lowercase SVG tags without complaint. (To learn about this feature of TYPO3, see the CONFIG section of the TypoScript reference.)

 

1) TypoScript that works with Firefox 1.5 or Opera 8.x

  • Please keep in mind that these settings may cause other page content of a webpage not to be rendered correctly. Everything has to be xml-conform. (Example: No capital letters in HTML tags, attributes or CSS definitions are allowed!)
  • Note: If your web pages contain non breaking spaces ( ) you get a XML error message from Firefox as long as you don't include the XHTML 1.0 strict doctype too.

 

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
}

2) TypoScript that works with MS Internet Explorer 5.5 / 6 with Adobe SVG Plugin 3.0x

 

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>
)

 

3) The cross browser approach

 

The challenge now is to combine both worlds in one template to get a crossbrowser solution. This can be done using the [useragent] condition. The following example is not perfect yet because it does not look for version numbers and doesn't care for Opera or future Mozilla Suite / Seamonkey releases that have native SVG support. Also Opera may be spoofing the user agent string and pretend to be MSIE. So there is no easy solution (especially as TYPO3 does not allow to combine AND-conditions at this time).

 

[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

 

Inside of the TYPO3 template the beginning of the setup field might look like this (example):

The beginning of your TypoScript template setup field should look similar to this.

Storing the SVG data

Because there is no better solution at this time: Just put the graphic's XML data into a TYPO3 HTML element. If you put the namespaces into the HTML tag please make sure that every SVG tag uses the appropriate namespace prefix: You have to change all the SVG tags from <mysvgtag> to <svg:mysvgtag> (mysvgtag is a placeholder in this tutorial). Example:

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

If you put the SVG namespace into the SVG tag you don't need the prefixes.

 

The following screenshot gives an impression how this looks in the TYPO3 backend.

The HTML element in TYPO3 backend: Here goes the sourcecode of your SVG graphics.
The SVG graphics on the demo page should look like this

Demo

To illustrate this theoretical stuff I have created two little example pages that contains a simple SVG drawing I did with Inkscape (see picture on the right hand side). The pages are of course based on TYPO3 (3.8) and the templates used contain the coding from above.

 

  • Users with Firefox 1.5 or with Opera 8.x have a look at this example!
    • Tested using Opera 8 and Firefox 1.5 on WinXP
    • Tested with Firefox 1.5 Beta1 + Opera 8.5 on Linux (Debian 3.1)
    • It doesn't seem to work with Firefox 1.5 Beta1 on MacOS X (have to find out why)
    • Still have to test on MacOS X with Opera
  • Users with Internet Explorer 5.5 / 6 with installed Adobe SVG Plugin please look at this example.

Conclusion

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)

Your feedback is welcome

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 

Credits

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

Related Links

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

 

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

SVG support in Firefox 1.5: