How to create a HTML5 + SVG document using the PHP XSLTProcessor
- by Kau-Boy
For a little project about XML I try to use HTML5 as it has SVG and WAI-ARIA Support. I also want to use a XSL stylesheet for my document. But I can't get a valid HTML5 document with a nested SVG. Here are some version I tested so far:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="xml"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
// content with the svg tag in the body
</html>
</xsl:template>
</xsl:stylesheet>
In combination with header('Content-Type: application/xml'); it works and produces this HTML output:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
// content with the svg tag in the body
</html>
But it is not HTML5 and without a DOCTYPE I get a lot of errors on the W3 validator. So trying to get a HTML5 document I used the following XSL:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="html"/>
<xsl:template match="/">
<xsl:text disable-output-escaping='yes'><!DOCTYPE HTML></xsl:text>
<html>
// content with the svg tag in the body
</html>
</xsl:template>
</xsl:stylesheet>
But unfortunately that will produce thze following HTML output:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
....
</head>
// content with the svg tag in the body
</html>
As you can see it's regular HTML5 but using it in combination with header('Content-Type: application/xml'); it fails because of the missing slash at the end of the meta tag (which was automatically created). Using header('Content-Type: image/xhtml+svg'); or header('Content-Type: text/html'); there is no XML parsing error, but the page will not show the SVG as a graph but as text (without the tags).
Can anyone tell me how to avoid the meta tag to be inserted or how to set a propper Content-Type that will make the browser rendern the SVG. Or even any other hint to get this working. I would really like to keep HTML5 to be able to keep the WAI-ARIA Landmark Roles an the HTML5 tags like NAV and FOOTER.
