Usando Raphaël para geração de SVG através de Javascript
Neste post irei abordar como usar a biblioteca Raphaël para a geração de gráficos vetoriais em SVG, usando apenas Javascript. Vale lembrar que, apesar de ser uma maneira aberta de se gerar gráficos em vetor, o uso de SVG não está disponível para navegadores como Internet Explorer 8 e versões anteriores, além de “renderizar” de maneiras um pouco distintas em navegadores como Chrome, Firefox e Opera.
Para usar esta biblioteca, é necessário que você baixe o arquivo Javascript no site oficial do projeto. Há um plugin para esta biblioteca destinado à geração de gráficos. A documentação é bem direta e completa, o que facilita muito o aprendizado, contendo a explicação dos seus métodos.
Veja o exemplo a seguir. Repare que o arquivo Javascript de Raphaël está no mesmo local do arquivo HTML e que não usamos nada de HTML e CSS na geração dos gráficos – apesar do SVG permitir formatação via folha de estilos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Raphaël - Modo de usar</title>
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
// Cria um painel do tamanho 800x600, na posição x=50 e y=50
var paper = Raphael(50, 50, 800, 600);
// Círculo na posição x=50, y=40 e com 10 de raio
var circle = paper.circle(50, 40, 10);
// Define o preenchimento do círculo em vermelho
circle.attr("fill", "#f00");
// Define a linha de contorno como branca
circle.attr("stroke", "#fff");
// -------------------------
// Criação de um retângulo
var rectangle = paper.rect(100,50,100,100,0);
// Definindo vários atributos de uma só vez
rectangle.attr({
"fill": "#00f",
"stroke": "#0f0"
});
// Rotacioando o objeto
rectangle.rotate(45);
};
</script>
</head>
<body>
</body>
</html>
Este código irá gerar um painel SVG (paper), criará um círculo vermelho (circle) e um retângulo azul rotacionado em 45 graus (rectangle).
Resultado do exemplo.
Espero ter ajudado. Até a próxima! 
Ótimo posta Francisco! continue assim e a Info vai logo lhe contratar.
[Responder]
Comentário by Sérgio Rodrigues — 5 de maio de 2010 às 14:36
Muleke, teus textos estão cada vez melhores. Não comento sempre porque não conheço o assunto profundamente, mas você sempre deixa as coisas bem claras – Parabéns!!Pense bem em fazer uma Facu de ENg. Eletronica ou Análise de Sistemas.
[Responder]
Comentário by Ronnie Turrini — 5 de maio de 2010 às 18:18
[...] uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora [...]
Pingback by Francisco Prado - Criando para a Web » Arquivo » Usando jQuery para manipular arquivos SVG — 28 de maio de 2010 às 14:07