The question remains can the technique I showed in Fix for IE’s lack of application/xhtml+xml mean we can now embed other XML based formats inside the XHTML, as XML promises? The answer is, absolutely!
Here is a XHTML, SVG, MathML example page, that shows MathML and SVG embedded right along side an XHTML document. To properly view the page you will need to download these MathML Fonts, and these SVG and MathML plugins if viewing in IE.
What do we need to change to make this work?
- Modify the doctype to the XHTML file
- Modify the html tag to add the additional name-spaces
- Add object tags to head to inform IE to use plugins to render SVG/MathML
- Modify the xsl:stylesheet tag to include the additional name-spaces
Example of doctype, html and head tag modifcations
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="svgMathMlXhtml.xsl"?>
<!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"[
<!ENTITY % MATHML.prefixed "INCLUDE" >
<!ENTITY % MATHML.prefix "math" >
<!ENTITY % SVG.prefixed "INCLUDE" >
<!ENTITY % SVG.prefix "svg" >
]>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:math="http://www.w3.org/1998/Math/MathML"
xml:lang="en">
<head>
<title>Advanced Example</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<object id="MathPlayer" classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></object>
<?import namespace="math" implementation="#MathPlayer"?>
</head>
Example of xsl:stylesheet modifications
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:math="http://www.w3.org/1998/Math/MathML"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.0">
<xsl:output method="xml" encoding="utf-8"/>
<xsl:template match="/">
<xsl:copy-of select="node()"/>
</xsl:template>
</xsl:stylesheet>
Matthias Says:
Hello,
I just looked at your example page, and it throws an error in IE7:
Invalid unicode character. Error processing resource ‘http://www.echoofeden.com/htmlTests/xhtmlFix/xhtml_svg_mathml.xhtml’….
&#x1D5555;
Oh, of course first I have to READ the article (and install the mathML plugin)… Ok, it works fine!
Aside from that, I’ve been trying to understand the advantages of delivering x(ht)ml as application/xml (aside from the fact that it’s The Right Thing). From this article above and “Fix for IE’s lack of application/xhtml+xml” I’d assume that by doing that you can send other XML formats such as MathML or SVG, and a different rendering engine is used (on IE only?). Am I right in thinking that this is something you couldn’t do if you sent it as text/html?
Matthias
Mit The Destroyer Says:
That is correct Matthias, with my fix IE will now parse the Document using their XML engine. Which can parse pages faster because XML has stricter rules for well formedness than an HTML engine (aka soup). Theoretically, you could still send MathML or SVG linking to it externally via an OBJECT tag in an HTML page. But the advantage of coding MathML or SVG directly into an XML document is that you can now also style MatchML/SVG via the same style sheet you use to style the rest of your content, as well as have access to it via the Javascript engine, as they are all part of the same DOM tree.
Really an even bigger benefit is the ability to attach an XSLT sheet to the xml file so you can abstract the structural code you need to create your layout, so that you can now change your Layout Structure in one master file. In other words your users now can cash the layout structure and will only be downloading the content for each page, saving you bandwidth each month. For example if you view source on this website you will see that I’m sending just a pure XML file that includes some HTML code snippets for the content area, and then attaching an XSLT sheet to add in the Navigational elements and overall layout structure.
Matthias Says:
Nice.
So, to be supersure, all this wouldn’t work when server the same identical page as text/html?
Thanks for a rare and conclusive explanation. Now, if you had more “regular” xhtml pages to serve, and you’re trying to reach as many browsers as possible with an acceptable result, would you still serve it as application/xhtml+xml?
Mit The Destroyer Says:
Correct you would have to show the mathML and SVG by embeding them using the OBJECT tag (just like you do with movies/flash) to make it work when serving XHTML as text/html. That’s because SVG and mathML are XML languages, thus needing an XML engine to parse them. In other words SVG and mathML is to HTML what English and British English is to Chinese.
I’m not sure what you are asking here exactly… If I had to guess would I be correct to assume that your asking, “If you had to support Opera 5-, Netscape 4-, etc (a.k.a. any browser that doesn’t have an XML engine) would you still serve XHTML as application/xhtml+xml.”?
My answer would be no, I would use server side XSLT to convert the XHTML to HTML 4.01 and serve with a mime type of text/html to those browsers, and block them from viewing pages with SVG or mathML, as obviously those browsers don’t support those types of files anyways even if they were embedded via the Object tag; For the simple reason that those browsers don’t understand the mime type of application/svg+xml or application/mathML+xml. Alternatively you could use the server side XSLT to even just replace the sections in the XHTML page that are mathML/SVG with a note to the user that the content displayed here isn’t supported by your browser, and then convert the XHTML to HTML 4.01, so the users with HTML only browsers can at least view the rest of the content on that page.
rao Says:
Hi , I am working on svg,display svg view in html with cross browser solution via web server,but i can’t display svg+html in all browsers.If any solution ,Plz let me know.
Thanks in advance,