XHTMLにMathMLとSVGを埋め込む

このページについて

このページではXHTMLにMathMLやSVGを埋め込むことができるか試している。 MathMLとSVGはどちらもXMLを利用しているため、XHTMLのドキュメントの中に混在させることができる。

2016年2月4日

MathML

MathMLは数式をXMLで表したものである。適当なソフトウェアで数式を作成し、MathMLの形式で出力すれば、XHTMLに埋め込んで表示することができる。 HTMLで数式を表す方法としては数式をラスタ画像に表示する方法がよく使われているようだが、ラスタ画像は拡大するとギザギザが目立つなどの欠点がある。ただ、MathMLは対応していないブラウザも存在するという弱点がある。

次の例はLibreOffice Mathで作成したものである。

例


 
  
   
    
     
      H
      
       
        
         Φ
        
       
       =
       δ
      
      
       
        Φ
       
      
     
    
   
   
    
     
      
       H
       =
       
        
         
          
           
            −
            
             
              
               ∑
               
                i
                =
                1
               
               N
              
              
               
                1
                2
               
               
                
                 
                  ∇
                  i
                 
                
                2
               
              
             
            
           
           −
           
            
             
              ∑
              
               A
               =
               1
              
              M
             
             
              
               1
               
                2M
                A
               
              
              
               
                
                 ∇
                 A
                
               
               2
              
             
            
           
          
          −
          
           
            
             ∑
             
              i
              =
              1
             
             N
            
            
             
              
               ∑
               
                A
                =
                1
               
               M
              
              
               
                
                 Z
                 A
                
                
                 r
                 iA
                
               
              
             
            
           
          
         
         +
         
          
           
            ∑
            
             i
             =
             1
            
            N
           
           
            
             
              ∑
              
               j
               >
               i
              
              N
             
             
              
               1
               
                r
                ij
               
              
             
            
           
          
         
        
        +
        
         
          
           ∑
           
            A
            =
            1
           
           M
          
          
           
            
             ∑
             
              B
              >
              A
             
             M
            
            
             
              
               
                Z
                A
               
               
                Z
                B
               
              
              
               R
               AB
              
             
            
           
          
         
        
       
      
     
    
   
  
  H left lline %iPHI right rangle = %idelta left lline %iPHI right rangle newline
H=-{sum from i=1 to N {1 over 2 {nabla_i}^2}}-{sum from A=1 to M {1 over 2M_A {nabla_A}^2}}
-{sum from i=1 to N {sum from A=1 to M{Z_A over r_iA}}}
+{sum from i=1 to N {sum from j>i to N{1 over r_ij}}}
+{sum from A=1 to M {sum from B>A to M{{Z_A Z_B} over R_AB}}}
 
]]>

表示結果

\begin{matrix} H ∣Φ〉 = δ ∣Φ〉 \\ H = - \sum_{i = 1}^{N} \frac{1}{2} {\nabla_{i}}^{2} - \sum_{A = 1}^{M} \frac{1}{{2M}_{A}} {\nabla_{A}}^{2} - \sum_{i = 1}^{N} \sum_{A = 1}^{M} \frac{Z_{A}}{r_{iA}} + \sum_{i = 1}^{N} \sum_{j > i}^{N} \frac{1}{r_{ij}} + \sum_{A = 1}^{M} \sum_{B > A}^{M} \frac{Z_{A} Z_{B}}{R_{AB}} \end{matrix}

SVG

SVGとはベクタ画像をXMLで表現したものである。ベクタ画像はグラフなどの表現に向いている。 SVGはXHTMLに直接埋め込まなくてもimg要素を利用すれば表示できるようだ。

次の例は青色の円を表示するだけのものである。

例

]]>

表示結果

ところで、このボタンをクリックしてみてほしい。

SVGも画像ではあるがXMLであるため、JavaScriptを利用すれば色々と操作することが可能である。次の例は上記の円の半径をJavaScriptで変更するというものである。+ボタンをクリックすれば円の半径が10増加し、-ボタンをクリックすれば10減少する。 JavaScriptを利用すれば色々と面白いことができるかもしれない。

HTMLの部分

]]>

JavaScriptのコード

0)c1.setAttribute("r",r);
};]]>