How to create a HTML5 + SVG document using the PHP XSLTProcessor_问答_开发者

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 ve开发者_如何转开发rsion="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'>&lt;!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.

SOLUTION:

This will produce valid HTML5 with SVG rendered using header('Content-Type: application: xhtml+xml');

<?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" omit-xml-declaration="yes" />
    <xsl:template match="/">
        <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE HTML></xsl:text>
        <html xmlns="http://www.w3.org/1999/xhtml">
        // content with the svg tag in the body
        </html>
    </xsl:template>
</xsl:stylesheet>

A live demo you can see here: http://kau-boys.de/HTML5-SVG.php

You wrote:

But it is not HTML5 and without a DOCTYPE

Not true. From http://dev.w3.org/html5/html-author/

There are two syntaxes that can be used: the traditional HTML syntax, and the XHTML syntax

And

For XHTML, it is recommended that the DOCTYPE be omitted because it is unnecessary

To date there is no support for HTML5 in IE. The same applies to SVG (except by using plugins). It is clear then that IE is not your target browser.

Today I would not pay much attention to validator because HTML5 is a Working Draft.

Answer: Stay with XML serialization, this will give you full support for SVG.

There is a strange way of embeding svg, I've used once. For src attribute should be set a data:uri 64bit coded svg object. Somehow you should specify width and height, also add namespace and meta. Thus you create a separate svg-document and insert it to a page via embed tag. An other solution is to wait till IE, opera, chrome, safari, and firefox would support svg inside text/html file.