Introdução
SVG, abreviação de "Elementos gráficos vetoriais escaláveis", é uma linguagem baseada em XML para
descrever objetos e cenas. Elementos SVG podem disparar eventos e usar scripts com JavaScript. O SVG vem com vários tipos primitivos integrados, como
círculos e retângulos, além da possibilidade de mostrar texto. Embora o SVG como
uma tecnologia não seja novo, o HTML5 agora permite que objetos SVG
sejam incorporados diretamente em uma página sem o uso de uma tag <object>
ou <embed> que o alinhe com o que está atualmente
disponível na tela. Raphaël.js
é uma biblioteca JavaScript que permite criar cenas SVG de forma programática.
Ela usa uma API unificada para criar cenas SVG compatíveis ou VML(Vector Modeling Language) em que é agora, ou seja, versões do Internet Explorer anteriores ao IE9.
Como desenhar sua primeira cena
Vamos começar desenhando uma cena simples com Raphaël. Começamos a desenhar a cena instanciando um objeto de Raphaël. Nesse caso, usei o construtor que o insere em um elemento HTML com largura e altura, mas também é possível fazer com que Raphaël anexe o objeto ao DOM (Document Object Model). Em seguida, criei um retângulo fornecendo as posições X e Y desejadas com a largura e a altura. Em seguida, criei um círculo fornecendo as coordenadas e o raio desejados. Por fim, usei a função de atributo (attr) para atribuir cores aos objetos.
Cada objeto SVG pode ter atributos atribuídos a ele para elementos como cor, rotação, cor, tamanho do traço etc. Veja aqui uma lista detalhada de atributos que podem ser atribuídos.
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
Como desenhar formas avançadas usando caminhos
Um caminho é uma série de instruções usadas pelo renderizador para criar objetos. Desenhar com um caminho é como desenhar com uma caneta em um pedaço de papel milimetrado gigante. Você pode instruir a caneta a ser retirada do papel e a se mover para outra posição(mover para), desenhar uma linha(linha para) ou desenhar uma curva(arco para). Os caminhos permitem que o SVG crie objetos com o mesmo nível de detalhamento, independente da escala. Quando você emite uma instrução para dizer "desenhe uma curva", o SVG considera o tamanho original e final desejado da curva (após o dimensionamento), ele calcula matematicamente os pontos intermediários para renderizar uma curva suave.
O código e a figura abaixo mostram um retângulo e um contorno curvado desenhado com caminhos. A letra M seguida por coordenadas move a caneta para essa posição, L seguido pelo par de coordenadas desenha uma linha da posição atual para essa posição. O s desenha uma curva de Bézier suave com um determinado ponto de controle e endpoint com coordenadas relativas. Z fecha um caminho. Geralmente, o uso de uma letra maiúscula emite o comando com coordenadas absolutas, enquanto que as minúsculas usam coordenadas relativas. M/m e Z/z, respectivamente, emitem o mesmo comando para letras maiúsculas ou minúsculas. Confira uma lista com todas as instruções de caminho aqui.
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
Texto desenhado
Ilustrações sem a capacidade de desenhar texto seria muito chato. Felizmente, Raphaël oferece dois métodos para desenhar texto. O primeiro método, text, usa as coordenadas x e y com a string para desenhar. O método de texto não oferece muito controle sobre a fonte ou outros efeitos. Ele é desenhado na fonte padrão com o tamanho padrão.
O segundo método, print, desenha o texto como uma coleção de caminhos. Como resultado, podemos modificar letras individuais. No exemplo abaixo, colorimos o número 5 com um preenchimento laranja, colorimos "ROCKS" com um preenchimento azulado e tornamos o traço mais espesso para simular texto em negrito. Fizemos isso usando uma fonte personalizada com um tamanho de fonte de 40 pts.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
A fonte Vegur não está em Raphaël, nem qualquer fonte referente a esse assunto. Além disso, a maioria das fontes usa o formato TrueType(TTF) ou OpenType(OTF). Para converter esses formatos em algo que possa ser usado por Raphaël, precisamos convertê-los usando uma ferramenta chamada Cufon. O Cufon permite exportar os diferentes estilos de fonte de uma determinada fonte (regular, negrito, itálico, negrito itálico etc.) para uso com Raphaël. Está fora do escopo deste tutorial abordar o Cufon em detalhes. Acesse o link de avaliação para mais detalhes. Uma ótima fonte de fontes simples para seus aplicativos é o Google Font Directory.
Eventos
Os elementos SVG podem se inscrever diretamente em todos os eventos tradicionais baseados em mouse: clicar, clicar, mousedown, mousemove, mouseout, mouseover, mouseup e passar o cursor. Raphaël oferece a capacidade de adicionar seus próprios métodos à tela ou a elementos individuais. Teoricamente, nada impede que você adicione gestos em navegadores para dispositivos móveis.
O snippet abaixo vincula uma função para girar uma determinada letra em "ROCKS" 45 graus quando ela é clicada.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG x Canvas
Como ambos são métodos para desenhar objetos na tela, muitas vezes não fica imediatamente claro por que usar um em detrimento do outro. Os dois meios têm abordagens bastante diferentes. A tela é uma API de modo imediato que é muito parecida com desenhar com giz de cera. É possível limpar ou destruir parte do desenho, mas não é possível reverter ou alterar um traço anterior por padrão. A tela também é um bitmap rasterizado, por isso está muito sujeita a pixelização quando as imagens são redimensionadas. Por outro lado, o SVG, como mencionado anteriormente, pode exibir várias resoluções com o mesmo nível de detalhe e ser executado em um script.
Usar SVG ou Canvas para a programação de jogos é bastante simples. Além das restrições normais de implantar em um computador ou dispositivo móvel, tudo se resume à contagem de sprites. O SVG serve para jogos de baixa fidelidade. Eu os descrevo como jogos com movimento simultâneo limitado de objetos e remoção e criação de sprites. Muitos jogos de tabuleiro, como Xadrez, Damas ou Battleship, bem como jogos de cartas como BlackJack, Poker e Hearts se enquadram nessa categoria. Outra linha de execução é que, em muitos desses jogos, o jogador precisará mover um objeto arbitrário, e a capacidade de script do SVG facilita a escolha de objetos.
Ferramentas de criação para SVG
Usar o SVG não significa que você precise criar caminhos manualmente. Há várias ferramentas, de código aberto e comerciais, que permitem exportar para o SVG. As duas ferramentas que usei extensivamente e altamente recomendadas são Inkscape e svg-edit.
svg-edit
O svg-edit é um editor de SVG baseado em navegador escrito em JavaScript. Ele oferece uma interface de usuário limitada, semelhante ao GIMP ou ao MS Paint. A menos que o nível de detalhe seja relativamente baixo, usei o svg-edit principalmente para ajustar os desenhos em SVG em vez de criá-los. O svg-edit permite criar objetos graficamente ou com código SVG.
Inkscape
O Inkscape é um editor de gráficos vetoriais completo e multiplataforma, semelhante ao CorelDraw, Adobe Illustrator e Xara. O Inkscape tem uma comunidade vibrante de plug-ins e uma base de código madura. O antecessor do Inkscape, de onde o Inkscape foi bifurcado, foi desenvolvido em 1999. O Inkscape é meu aplicativo preferido para recursos vetoriais e bitmap.
Uma pequena à parte
O SVG não é compatível com o Windows em versões do Internet Explorer anteriores ao IE9. O IE usa um formato de gráfico vetorial chamado VML, Vector Markup Language, que oferece muitas das mesmas funcionalidades que o SVG. Raphaël pode criar cenas que usam SVG ou VML, onde há suporte. Usar Raphaël é uma maneira fácil de oferecer suporte multiplataforma.
Referências
- Rapahël.js: http://raphaeljs.com
- Documentação de Raphaël: http://raphaeljs.com/reference.html