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

Raphaël - resultado do exemplo
Resultado do exemplo.

Espero ter ajudado. Até a próxima! 😉

Be Sociable, Share!

3 pensamentos em “Usando Raphaël para geração de SVG através de Javascript”

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Time limit is exhausted. Please reload the CAPTCHA.