Home/ Questions/Q 874395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:05:52+00:00

For a little project about XML I try to use HTML5 as it has

  • 0

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'>&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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0