Re: Options for inclusion of SVG and MathML in OpenReader format?


I've been looking into the status on the note in preparation on mixing
MathML and SVG.  It isn't ready to be circulated yet, though your
inquiries have inspired another flurry of effort, and hopefully we
will be able to publish it soon.  However, I can give you a short

There are three obvious use cases:

  MathML island in SVG
  SVG island in MathML
  non-hierarchical mixing of both MathML and SVG

The first two cases lend themselves to the existing extension
mechanisms on MathML and SVG.  When you have a well-defined,
self-contained block of MathML that you need to include in SVG
(e.g. to label a graph with an equation), the foreignObject tag is
probably the right way to go.  I make no claims that the following
example is technically correct, but this gives the idea:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1" xmlns=''>
  <desc>This example uses the 'switch' element to provide a 
        fallback graphical representation of an paragraph, if 
        MathML is not supported.</desc>
  <!-- The 'switch' element will process the first child element
       whose testing attributes evaluate to true.-->
    <!-- Process the embedded MathML if the requiredExtensions attribute
         evaluates to true (i.e., the user agent supports MathML embedded within SVG). -->
    <foreignObject width="100" height="50"
      <!-- MathML content goes here -->
      <math xmlns=">
        <mn> 1 </mn>
            <msup><mi> x </mi><mn> 3 </mn></msup>
            <mo> + </mo>
            <mfrac><mi> x </mi><mn> 3 </mn></mfrac>
    <!-- Else, process the following alternate SVG. -->
    <text font-size="10" font-family="italic">
      <tspan x="10" y="10">1/(x^3+(x/3))</tspan>

Conversely, when you have a self-contained block of SVG that you want
to incorporate into MathML (e.g. to draw some symbol or something)
then the MathML <semantics> element is probably the best choice.

Again, here is an example, which may not be technically correct:

  <csymbol definitionURL="elementary-stats.html#dice-4up"/>
  <annotation-xml encoding="SVG1.1">
    <svg xmlns="" height="137px">
      <rect stroke="black" fill="none" rx="5px" width="40px" height="40px"/>
      <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"/>
      <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"/>
      <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"/>
      <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"/>
      <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"/>
  <annotation encoding="image/jpeg"> copy dice4.jpg here </annotation>
  <annotation encoding="image/gif" other="dice.gif"/>

The case where you really want to intermix MathML and SVG
non-hierarchically, e.g. to circle things in one equation and draw
arrows to part of another, is really hard, and we don't have a good
way to handle that worked out in any detail yet.

Anyway, that is what I can report.  Hope it helps.


Dr. Robert Miner                      
W3C Math Interest Group co-chair                      651-223-2883
Design Science, Inc.   "How Science Communicates"

Received on Monday, 9 May 2005 17:12:09 UTC