Menu
HTML5 supports SVG via the svg element. Other languages can be embedded within SVG using the foreignObject element. HTML can be rendered in such, as can MathML. What else can be rendered with today's browsers? (Simple examples appreciated)
Example of HTML (canvas element) within the foreignObject element:
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="200" height="100">
<canvas id="myCanvas" width="200" height="100"></canvas>
</foreignObject>
</svg>
<script>
var canvas1 = document.getElementById("myCanvas");
var context1 = canvas1.getContext("2d");
context1.fillStyle = "lightblue";
context1.fillRect(20, 40, 50, 50);
</script>
</body>
</html>
Example of MathML within the foreignObject element (use FF5):
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="50" y="50" width="100" height="100">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</foreignObject>
</svg>
</body>
</html>
823
Technically, anything can go in a foreignObject tag. The question is whether or not the user agent will support it. For this, there seems to be no definitive answer. The SVG spec itself is quite (intentionally) vague on this:
The 'foreignObject' element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
Fortunately, the spec also defines the requiredExtensions attribute which accepts a space-delimited list of namespace URIs. This, in conjunction with a switch statement allows for semi-intelligent fallback logic based on the user-agent capabilities. Example:
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<switch>
<!-- Render if extension is available -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/foreign-object-spec-uri">
<!-- Foreign object content -->
</foreignObject>
<!-- Else, do fallback logic -->
<text x="0" y="20">Not available</text>
</switch>
</svg>
What actually gets rendered seems to be entirely dependent on the user agent (browser, Batik, etc). So, similarly, the HTML5 spec has a short blurb, washing its hands on any non-HTML content found within foreignObjects.
The SVG specification includes requirements regarding the handling of elements in the DOM that are not in the SVG namespace, that are in SVG fragments, and that are not included in a foreignObject element. This specification does not define any processing for elements in SVG fragments that are not in the HTML namespace; they are considered neither conforming nor non-conforming from the perspective of this specification.
The original post states that "HTML can be rendered...as can MathML". Since <math> elements are now standard HTML5, I believe the browser is interpreting that code as HTML. Thus, it would be technically more correct to say the browser is rendering MathML as part of HTML.
And in my experience, sticking with [X]HTML will be the most compatible...and probably all you'll really need. Your examples above both work by using the parent HTML namespace. As you can see, you can insert HTML document fragments from both an SVG context or an HTML context, so it can be quite versatile.
159
How about HTML5 video and audio?
Demo: http://double.co.nz/video_test/video.svg
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
