Blog Post

HTML5 - MATHML e SVG

Description

Generic Episode Image

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 pre-ciso fazer declarações especiais. Basta escrever normalmente o código, iniciando com um elemento math. Veja este exemplo:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>MathML</title>
</head>
<body>
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<moform=”prefix”>&minus;</mo>
<mi>b</mi>
<mo>&PlusMinus;</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>&minus;</mo>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
<mo>&InvisibleTimes;</mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</body>
</html>

Veja como esse exemplo é renderizado no navegador:

Generic Episode Image

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:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>SVG</title>
</head>
<body>
<svgwidth=”400” height=”400”>
<!-- Um retângulo:-->
<rectx=”10” y=”10” width=”150” height=”50” stroke=”#000000” stroke-width=”5” fill=”#FF0000” />
<!-- Um polígono:-->
<polygonfill=”red” stroke=”blue” stroke-width=”10” points=”250,75 279,161 369,161 297,215
323,301 250,250 177,301 203,215
131,161 221,161” />
<!-- Um círculo -->
<circlecx=”70” cy=”240” r=”60” stroke=”#00FF00” stroke-width=”5” 
fill=”#FFFFFF” />
</svg>
</body>
</html>

E veja como isso é renderizado no navegador:

Generic Episode Image

É 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.

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

The Discussion

  • User profile image
    Pablo

    Muitas falhas no código de exemplo, impossível reproduzir. Observe o <svgwidth> por exemplo, q deveria ser <svg width="400"...>. Muito mal.

  • User profile image
    Pablo

    E outra, eu tentei renderizar a formula matemática mas não conseguir, então eu decidir ver o código html dessa página (http://channel9.msdn.com/posts/HTML5-MATHML-e-SVG) e descobri que era só uma imagem .png. =S

    Vou ter que pegar esse assunto de outras fontes. =(

  • User profile image
    Gabriel

    Cara eu cliquei com o botão direito e vi que era imgem logo de cara...

  • User profile image
    Orlando

    a fórmula só funcionou no firefox 13. o svg funcionou no chrome 20 e firefox 13. ie9 não roda praticamente nada deste curso

  • User profile image
    ORlando

    segue o código certinho

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>SVG</title>
    </head>
    <body>
    <svg width="400" height="400">
    <!-- Um retângulo:-->
    <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
    <!-- Um polígono:-->
    <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161" />
    <!-- Um círculo -->
    <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
    </svg>
    </body>
    </html>

  • User profile image
    Orlando

    Eu achei incrível esse esquema de fórmulas!
    um dos esquemas mais dahora que criaram no W3C! :D

  • User profile image
    Leonardo​Almeida

    o problema deve ser no navegador , deve ta renderizando diferente 

  • User profile image
    Ademilson

    Será que no ie do windows 8 vai funcionar o html5 perfeito? Eis minha dúvida...

  • User profile image
    wilson

    Funcionou beleza Orlando

  • User profile image
    terra

    Não é algo que usamos no dia-a-dia, mas para quem está no ramo dos cálculos é um recurso muito interessante e útil Tongue Out

    A primeira vista parece mesmo a maneira de utilizar o elemento Math, mas se comparar as tags (xml) com o resultado (formula visual) entenderá e verá que é muito fácil de usar.

    Achei interessante...

    Valeu a todos...

  • User profile image
    Bruno Rocha

    O codigo o Orlando Rodo, o da apostila nao... mas e muito interessante o assunto... sucesso pra todos..

  • User profile image
    Daniel

    O código do MathML funcionou aqui no firefox,
    o do SVG do orlando funcionou e o do curso não, porque tem um caractere incorreto nos exemplos >>> ”
    que deveria ser >>> "

    Ou seja, as aspas duplas dos exemplos não são aspas duplas, então os browsers não reconhecem o código HTML.

  • User profile image
    Ronaldo

    Pra min é mais parecido com uma tabela...

  • User profile image
    Giovanni Amorim

    Valeu Orlando seu código está correto e funcionou aqui. Como fazer animações com esses recursos? Já viram aquelas animações apresentadas nas logomarcas do Google representando uma data especial, como o Natal por exemplo. É essa a tecnologia usada? Uma coisa eu sei: Flash não é ;(

  • User profile image
    webrenata

    o lance das formulas é muito legal, funcionou no firefox, no IE não rola

  • User profile image
    Jonatas

    No IE8 nem pensar....

  • User profile image
    Pedro Henrique dos Santos

    O curso é da microsoft e os exemplos não funcionam no IE, irônia! rs. Na boa quer acessar sites em HTML5? Não use o IE.

    Vamos esperar a versão final do IE10 pra ver se melhora.

  • User profile image
    pliniopierry

    Boa ORlando, valeu pelo código correto!

  • User profile image
    Thadeu Esteves

    SVG ainda é precário galera, vamos ter calma que logo logo isso tudo vai mudar! qual aos erros de escrita , acredito que seja o plugin de highlight do site, porque algumas paginas estão com este mesmo problema..

    abraço a todos.

  • User profile image
    Fabricio

    <polygon fill="red" ..........
    <rect x="10" .....
    <circle cx=”70” ........
    Precisa de um espaço entre a tag e o atributo.

    SVG IE9 ok! firefox 16.. ok! crhome 23.0 ok!
    MathML IE9 (não funcionou) firefox 16.. ok! crhome 23.0 (não funcionou)

  • User profile image
    Dhieyson

    Muito interessante, mas para ser utilizável em ambiente de produção deve ser funcional em todos os navegadores mais populares. Esse é o mal da web.

  • User profile image
    Novattu

    Bom se vc selecionar a imagem e arrastar no google chrome
    vc consegue pegar somente os textos dessas imagens eu fiz assim
    deu certo !! XD

  • User profile image
    Novattu

    Estranho mesmo vindo o mesmo cod citado a cima ficou assim

    x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

    detalhe o cod transferido foi o mesmo citado a acima como falei.. sé arrastei pra o word pad...

    entao diante disso

    FAIL este post....

  • User profile image
    aniel

    @Novattu: Cara, depende do navegador. Esse código só funcionou no Firefox e no Opera, nos outros(Safari,Chrome,ie) não funcionou corretamente.

  • User profile image
    Eder

    Showwww

  • User profile image
    Jose Carlos da Silva

    1234567891011121314151617181920
    POde-se escrever assim tbm.Ok!
    <!DOCTYPE html><html><head><metacharset=”UTF-8” /><title>SVG</title></head><body><svgwidth=”400” height=”400”><!-- Um retângulo:--><rectx=”10” y=”10” width=”150” height=”50” stroke=”#000000” stroke-width=”5” fill=”#FF0000” /><!-- Um polígono:--><polygonfill=”red” stroke=”blue” stroke-width=”10” points=”250,75 279,161 369,161 297,215323,301 250,250 177,301 203,215131,161 221,161” /><!-- Um círculo --><circlecx=”70” cy=”240” r=”60” stroke=”#00FF00” stroke-width=”5” fill=”#FFFFFF” /></svg></body></html>

  • User profile image
    Wilson Ney

    Bom temos aí algumas soluções que podem ser usada para cálculo e vetoriais, sendo que pode haver imcopatibilidade por parte do navegador, mas, só o google chrome tá liderando na tabela de rederização do HTML5, sempre tente abrir código sem HTML5 no Google Chrome, neste post os códigos não apresentão diretórios de imagens sei que não é imagens estes vetoriais e sim desenhos de forma SVG mesmos. Obrigado!

  • User profile image
    Thais

    Orlando, muito obrigada por compartilhar o seu conhecimento!!
    Deu certíssimo (:

  • User profile image
    Anderson Oliveira

    Muito a se estudar sobre isso ainda...

  • User profile image
    pedro  gernano

    gostei

  • User profile image
    Adriano

    Muito bom ,! excelente curso!
    Consegui renderizar a formula do SVG mais só com o código que o rapaz postou aqui nos comentários!

  • User profile image
    Jose

    Ficou faltando falar que o MathML tem pouco suporte. Atualmente apenas Firefox e Safari em suas versões recentes o suportam. O Chrome suportou-o na versão 24 mas foi descontinuado porque a linguagem ainda não estaria definida.

  • User profile image
    Jose

    PS: para quem desejar saber o suporte a MathML, bem como outras tecnologias, só acessar: http://caniuse.com/mathml. É um site muito bom para saber quais tecnologias de HTML5, e outras, podemos adotar nos nossos sites.

  • User profile image
    Cleiton Dias

    Realmente o código está com muitos problemas, mas segue o correto, consegui abrir no firefox 22.0, google chrome Versão 28.0.1500.95 m e Internet Explorer Versão 10.0.9200.16466

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>SVG</title>
    </head>
    <body>
    <svg width="600" height="600">
    <!-- Um retângulo:-->
    <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
    <!-- Um polígono:-->
    <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215,323,301 250,250 177,301 203,215,131,161 221,161" />
    <!-- Um círculo -->
    <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
    </svg>
    </body>
    </html>

  • User profile image
    samuelsilva

    Show fiz os teste e deu certo. muito bom.

  • User profile image
    pernoli

    Não é simples, mas de fundamental importância.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.