SVGGraph using SVG elements in HTML5 or XHTML documents

« Return to SVGGraph page

Skip to:

As well as the embed, iframe and object methods for including an SVG inside a page (please read the Using SVGGraph page for details), all the major browsers now support directly including SVG graphics inside HTML documents. This means fewer requests are made to the server, so it can make pages containing SVG load a lot quicker. IE 9 is the first version of Internet Explorer to support displaying SVGs this way, though FireFox, Chrome, Safari and Opera have all supported it for a while.

Depending on the standard used by your website, there are two ways to make it work:

SVG in HTML5

Below is a full working example of embedding two SVG bar graphs in an HTML5 page. The constructor is only called once, with a width of 400 pixels, a height of 300 pixels and no user settings, so both graphs will be the same size and use the default random colours.

<?php
require_once 'SVGGraph.php';
$graph = new SVGGraph(400, 300);
?>
<!DOCTYPE html>
 <html>
 <head>
  <title>SVGGraph example</title>
 </head>
 <body>
  <h1>Example of SVG in HTML5</h1>
  <div>
<?php
$graph->Values(10, 14, 6, 3, 20, 14, 16);
echo $graph->Fetch('BarGraph', false);
?>
  </div>
  <div>
<?php
$graph->Values(8, 15, 14, 19, 12, 15, 13);
echo $graph->Fetch('BarGraph', false);
?>
  </div>
<?php
echo $graph->FetchJavascript();
?>
 </body>
 </html>

The SVGGraph Fetch() function is used to generate the SVG content instead of Render(). The Render() function outputs the content-type header and everything needed to serve an SVG directly to the browser - we don't want it to do that in this case, which is why we are using Fetch() instead.

The first argument to Fetch() is the graph type, and the second is false to prevent outputting the XML declaration and doctype. The function also has a third, optional argument that can be used to enable building Javascript within the SVG content, but for this example we want to leave the Javascript out.

Because we have two graphs on one page, we don't want to duplicate the Javascript functions that SVGGraph uses. All the Javascript used by both graphs is output in one block using the FetchJavascript() function. Since we are using all default options, this means that the code to show the tooltips (which are enabled by default) will be in this block of Javascript. The string returned by the function includes the <script> and </script> tags - unless the options are changed to mean that there is no Javascript required, in which case the function will return an empty string.

FetchJavascript() must be called after you have called Fetch() for each of the graphs that are using Javascript. Of course, since they all return strings you can output the results in whichever order you want, but they must be called in the correct order.

SVG in XHTML

XHTML is the older, strict XML-based version of HTML from before HTML5 became available. SVG is also XML-based, so embedding one in the other is really just a case of using the correct content-type and namespace.

Below is the same example as above, adjusted to produce valid XHTML.

<?php
header('content-type: application/xhtml+xml; charset=UTF-8');
require_once 'SVGGraph.php';
$graph = new SVGGraph(400, 300, array('namespace' => true));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  <title>SVGGraph example</title>
 </head>
 <body>
  <h1>Example of SVG in XHTML</h1>
  <div>
<?php
$graph->Values(10, 14, 6, 3, 20, 14, 16);
echo $graph->Fetch('BarGraph', false);
?>
  </div>
  <div>
<?php
$graph->Values(8, 15, 14, 19, 12, 15, 13);
echo $graph->Fetch('BarGraph', false);
?>
  </div>
<?php
echo $graph->FetchJavascript();
?>
 </body>
 </html>

The HTML body of the page and the PHP used there are exactly the same in both examples - the differences are at the top of the file. First, the PHP header() function sets the content-type for XHTML with XML.

The next change is that a settings array has been passed to the SVGGraph constuctor, setting the namespace option to true. This tells SVGGraph to use the svg: namespace in front of every SVG tag that it outputs. (<rect> becomes <svg:rect>, <use> becomes <svg:use>, etc.)

The doctype has changed to the correct value for the W3C XHTML / MathML / SVG profile, and the opening <html> tag now includes the XHTML, SVG and XLink namespaces. Finally, the <meta> tag duplicates the content-type specified in the HTTP header.

CSS with SVG in HTML

CSS in your HTML page stylesheet can affect the content of SVG within the page. SVGGraph generally uses SVG attributes to set font styles, etc. (font-size="10", for example) so CSS rules can easily take precedence over values set in the SVGGraph options.

« Back to top of page General settings »