Plotagem de Gráficos com HTML 5 e Scalable Vector Graphics


A apostila de SVG já explica o básico desta linguagem, clique aqui para acessá-la, a presente página está voltada para a plotagem de funções matemáticas, a plotagem de gráficos em canvas ou svg dependerá do tipo de trabalho a ser produzido, como a figura svg é vetorial, ela não perde a qualidade com o aumento de seu tamanho.


COMPARAÇÃO ENTRE O CANVAS E O SVG
CANVAS SVG
Baseado em pixels (o canvas é basicamente um elemento de imagem com uma API de desenho) Baseado em modelo de objeto (os elementos SVG são similares aos elementos HTML)
Elemento HTML individual similar ao <img> no comportamento Múltiplos elementos gráficos que se tornam parte do Document Object Model (DOM)
Apresentação visual criada e modificada de modo programático através de scripts Apresentação visual criada com marcação (markup) e modificada por CSS ou de modo programático através de scripts
A interação do usuário com o modelo de evento ocorre apenas no elemento canvas; as interações tem que ser programadas manualmente com coordenadas de mouse A interação do usuário com o modelo de evento é baseada em objeto no nível dos elementos gráficos primitivos — linhas, retângulos, caminhos
A API não tem suporte para acessibilidade; é necessário usar técnicas baseadas em marcação (markup) além do canvas O modelo de objeto e marcação (markup) do SVG tem suporte direto para acessibilidade


SVG é conhecido como um recurso gráfico de modo retido que persiste no modelo "em memória". Análogo ao HTML, o SVG constrói um modelo de objeto de elementos, atributos e estilos. Quando aparece em um documento HTML5, o elemento <svg> se comporta como um bloco embutido e faz parte da árvore de documentos HTML.


O Canvas é um bitmap com uma API (application programming interface - interface de programação de aplicações) gráfica de modo imediato para desenhar. O canvas é um modelo do tipo "fire and forget" (disparar e esquecer) que renderiza os gráficos diretamente no bitmap e depois esquece as formas desenhadas; apenas o bitmap resultante continua disponível.

Podemos comparar o Canvas à API do Windows GDI, em que desenhamos os gráficos de modo programático em uma janela, e o SVG à marcação (markup) do HTML, com elementos, estilos, eventos e programabilidade baseada em DOM. O Canvas é procedimental, ao passo que o SVG é declarativo.


1. Download
Para a execução dos gráficos em SVG é necessário dois arquivos, o ASCIIsvg.js e o d.svg que podem ser baixados nos sites abaixo referenciados:

http://www1.chapman.edu/~jipsen/svg/ASCIIsvg.js

http://www1.chapman.edu/~jipsen/svg/d.svg (clique o o botão direito e salve com)

2. Inclusão do arquivo ASCIIsvg.js na página HTML

<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
<title>your title...</title>
</head>
<body>

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

Exemplo 1:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
</head>
<body>
<embed width="117" height="117" src="d.svg"
script='border = 0
initPicture(-10,10)
axes()
stroke = "red"
p = []
with (Math)
  for (t = 0; t < 10.01; t += 0.05)
    p[p.length] = [t*cos(PI*t), t*sin(PI*t)]
path(p)'>
</body>
</html>

Exemplo 2:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
</head>
<body>

<embed width="117" height="117" src="d.svg"
script='initPicture(-2,2)
axes()
stroke = "blue"
plot(2x^2 - 3x)
'>
</html>


Exemplo 3:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
</head>
<body>
<embed width="117" height="117" src="d.svg"
script='initPicture(-2,2)
axes()
stroke = "blue"
p = []
for (x = -2; x < 2; x += 0.1)
  p[p.length] = [x, (x+1)*x*(x-1)]
path(p)
// there is also a plot("...") shorthand'>
</body>
</html>


Exemplo 4:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
</head>
<body>

<embed width="117" height="117" src="d.svg"
script='initPicture(-1,1)
marker = "dot"
a = []
n = 9
with (Math)
  for (i = 0; i < n; i++)
    a[i] = [cos(PI/4*(-1)*i+PI/2),
            sin(PI/4*(-1)*i+PI/2)]
path(a)
path([a[0],a[3],a[6],a[1],a[4],a[7],a[2],a[5],
      a[0],a[4],a[5],a[1],a[2],a[6],a[7],a[3]])'>
</body>
</html>


Exemplo 5:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ASCIIsvg.js"></script>
</head>
<body>

<embed width="117" height="117" src="d.svg"
script='initPicture(-1,1)
circle([0,0],1)
a = [-.6,-.8]
b = [ .6,-.8]
stroke = "blue"
path([a,[0,0],b])
stroke = "red"
path([a,[-1, 0],b,[-.8,.6],a,[0,1],b,
        [.8,.6],a,[1,0],b])'>
</body>
</html>


Reference:
http://www1.chapman.edu/~jipsen/svg/ASCIIsvg.js
http://www.math.tamu.edu/~mpilant/math696/AsciiMathML/
https://raw.githubusercontent.com/mathjax/asciimathml/master/ASCIIMathML.js
http://www.w3.org/
http://diveintohtml5.info/canvas.html#shapes
http://www.javascripter.net/faq/plotafunctiongraph.htm