SVGGraph using SVG elements in HTML5 or XHTML documents
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/autoloader.php';
$graph = new Goat1000\SVGGraph\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/autoloader.php';
$graph = new Goat1000\SVGGraph\SVGGraph(400, 300, ['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.