Versão Impressão

HTML5

Um guia de referência para os desenvolvedores web.

13. MathML e SVG

MathML

O HTML5 incorpora o padrão MathML. Trata-se de uma linguagem de marcação, baseada em XML, para representação de fórmulas matemáticas. Você pode ler mais sobre MathML em http://www.w3.org/Math/. Para incorporar código MathML em seu documento HTML5, não preciso fazer declarações especiais. Basta escrever normalmente o código, iniciando com um elemento math. Veja este exemplo:

Arquivo: exemplos/13/mathml.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8" />
  5 <title>MathML</title>
  6 </head>
  7 <body>
  8 
  9 <math xmlns="http://www.w3.org/1998/Math/MathML">
 10   <mrow>
 11     <mi>x</mi>
 12     <mo>=</mo>
 13     <mfrac>
 14       <mrow>
 15         <mo form="prefix">&minus;</mo>
 16         <mi>b</mi>
 17         <mo>&PlusMinus;</mo>
 18         <msqrt>
 19           <msup>
 20             <mi>b</mi>
 21             <mn>2</mn>
 22           </msup>
 23           <mo>&minus;</mo>
 24           <mn>4</mn>
 25           <mo>&InvisibleTimes;</mo>
 26           <mi>a</mi>
 27           <mo>&InvisibleTimes;</mo>
 28           <mi>c</mi>
 29         </msqrt>
 30       </mrow>
 31       <mrow>
 32         <mn>2</mn>
 33         <mo>&InvisibleTimes;</mo>
 34         <mi>a</mi>
 35       </mrow>
 36     </mfrac>
 37   </mrow>
 38 </math>
 39 
 40 </body>
 41 </html>

Veja como esse exemplo é renderizado no navegador:

Exemplo de MathML

Mesmo que você nunca tenha visto MathML, e este código pareça um pouco assustador, dê uma olhada com calma no código, comparando com a imagem do resultado, e você vai perceber que é muito simples. Talvez algo que possa deixá-lo confuso é a entidade &InvisibleTimes;, que aparece algumas vezes no código. Ela está lá para separar os fatores 4ac, por exemplo. Esses valores são multiplicados, é o que a fórmula representa, mas não queremos colocar um operador de multiplicação entre eles, porque por convenção se simplesmente escrevemos 4ac qualquer leitor saberá que isso é uma multiplicação.

Por que então se preocupar em inserir &InvisibleTimes;? Você vai notar que se remover a entidade e a tag mo correspondente o resultado visual será o mesmo. Colocamos &InvisibleTimes; porque MathML não é só visual, é semântica. Um outro agente de usuário pode ter recursos de importar essa fórmula para uma ferramenta de cálculo, por exemplo.

SVG

Assim como MathML, SVG é uma outra linguagem XML que pode ser incorporada com facilidade em HTML5. Você pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG é uma linguagem para marcação de gráficos vetoriais. Vejamos um exemplo bem simples:

Arquivo: exemplos/13/svg.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8" />
  5 <title>SVG</title>
  6 </head>
  7 <body>
  8 
  9 <svg width="400" height="400">
 10 
 11   <!-- Um retângulo: -->
 12   <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
 13 
 14   <!-- Um polígono: -->
 15   <polygon fill="red" stroke="blue" stroke-width="10" 
 16     points="250,75  279,161 369,161 297,215
 17             323,301 250,250 177,301 203,215
 18             131,161 221,161" />
 19 
 20   <!-- Um círculo -->
 21   <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
 22 
 23 </svg>
 24 
 25 </body>
 26 </html>

E veja como isso é renderizado no navegador:

Exemplo de SVG

É possível fazer muito mais com SVG. A maioria dos editores de gráficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um gráfico em seu editor vetorial predileto e exportá-lo diretamente. Em seguida, um programador pode construir javascript que manipula esse SVG, usando os métodos do DOM. Com isso você pode ter gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em Javascript, sem tecnologias proprietárias e plugins.