Artigo WebMobile 16 - Utilizando SVG com Java ME

Esse artigo faz parte da revista WebMobile edição 16. Clique aqui para ler todos os artigos desta edição

ulo style="MARGIN: 18pt 0cm 0pt; PAGE-BREAK-AFTER: auto; LINE-HEIGHT: normal; TEXT-ALIGN: left; mso-pagination: widow-orphan; mso-hyphenate: auto" align=left>Utilizando SVG com Java ME      

Scalable Vector Graphics, ou SVG, é um padrão aberto de representação de imagens em duas dimensões. Uma imagem SVG não tem o seu modelo de apresentação baseado em pixels, como o padrão JPEG, BMP e etc. Ela é formada a partir de declarações de objetos gráficos utilizando a linguagem XML e isso torna a imagem mutável, permitindo que a mesma possa se adaptar a qualquer resolução de tela sem perda de qualidade. Essa característica de adaptação resolve boa parte dos problemas de portabilidade encontrados em aplicações Java ME. O padrão SVG fornece também recursos para que se possa interagir com a imagem, como permitir rodar animações ou tomar conhecimento sobre o foco em um determinado elemento gráfico (um retângulo, círculo ou texto). Isso permite a sua utilização na definição de interface de usuário, melhorando sensivelmente a camada visual da aplicação.

Esse artigo irá apresentar o padrão SVG em sua versão mais leve, conhecida como Tiny, focando o seu uso com Java ME. A JSR-226 é a especificação Java que define as API's de manipulação de imagens SVG em dispositivos móveis. Além disso, algumas declarações XML presentes em um arquivo no formato SVG serão apresentadas aqui, entretanto será dada mais ênfase ao uso da especificação JSR-226.

O padrão aberto SVG

O padrão SVG foi aprovado e regulamentado em 2001 pelo W3C (World Wide Web Consortium) que inclui membros de companhias como a Adobe, Apple, Canon, HP, Nokia, Sun, Ericsson e muitas outras. SVG define uma linguagem, baseada em XML, para apresentar gráficos em duas dimensões. Desde então, imagens SVG têm sido cada vez mais utilizadas na web e já são reconhecidas pelos mais populares softwares gráficos. A partir da sua versão 1.1, o padrão SVG foi subdividido em dois perfis, justamente para contemplar os ambientes computacionais reduzidos e emergentes: o SVG Basic, voltado para dispositivos móveis mais robustos, como o PALM; e o SVG Tiny, voltado para dispositivos móveis de arquitetura computacional mais reduzida, como os telefones celulares. Esse artigo irá tratar mais especificamente do perfil SVG Tiny que, como já foi dito, é implementado através da especificação JSR-226. Veja na Figura 1 a relação entre os diferentes perfis do SVG.

Figura 1. Relacionamento Entre os Perfis SVG.

SVG Tiny

Atualmente, existe uma variedade enorme de aparelhos celulares com diferenças em sua capacidade computacional e resolução de vídeo. Isso provoca um trabalho adicional aos desenvolvedores de software para esses dispositivos, porque se torna necessário ter versões diferentes da mesma aplicação para atender a esses diferentes dispositivos. É comum, por exemplo, ter várias versões de um mesmo jogo para celular, cada um com mudanças apenas no tamanho das imagens a serem apresentadas. Esse problema é conhecido como fragmentação e tem se revelado como uma das maiores dificuldades para o desenvolvedor de aplicações para dispositivos móveis. O modelo de apresentação de imagens proposto pelo padrão SVG contribui de forma substancial para resolver os problemas de fragmentação da plataforma mobile. Apesar do padrão SVG ter sido criado inicialmente para uso em ambientes computacionais mais robustos (desktop, web e etc.), certamente os dispositivos móveis (PDA, celulares e etc.) podem tirar um proveito ainda maior no seu uso.

Alguns recursos presentes na versão completa do SVG não são suportados no perfil Tiny, devido ao fato deste ser voltado para dispositivos móveis. Os efeitos de opacidade e gradiente, por exemplo, não estão presentes na versão Tiny 1.1. Ainda assim, algumas dessas características podem estar disponíveis em implementações de SDKs de alguns fabricantes de aparelhos celulares. O SDK S60 3ª Edição da Nokia aceita os efeitos já citados e não reconhecidos na versão Tiny. Mas a utilização desse SDK, ou mais especificamente desses efeitos nas imagens, pode não ser uma boa idéia, a não ser que a plataforma alvo da aplicação seja apenas aparelhos fabricados pela Nokia. De qualquer forma, os muitos outros recursos e as formas gráficas disponíveis no perfil Tiny o tornam capaz de renderizar imagens SVG e aplicar efeitos sofisticados de animação nas mesmas.

Vantagens do uso de SVG

O formato de imagens baseado em SVG tem inúmeras vantagens em relação a imagens baseadas em pixels. O fato de ser escalável talvez seja uma das mais importantes. Justamente por ter essa característica, imagens SVG podem se adaptar a qualquer resolução de vídeo sem perda na qualidade, uma vez que o processo de renderização é feito através de declarações XML (objetos gráficos e suas propriedades) e não baseado em pixels fixos. Também devido a esse motivo, em uma imagem SVG podem ser aplicados efeitos de zoom sem qualquer perda de qualidade. Outro detalhe importante é que arquivos no formato SVG acabam sendo mais compactos do que os formatos tradicionais de imagens (como PNG e JPEG) já que na verdade são arquivos texto.

Imagens SVG também podem ser reutilizadas e modificadas facilmente através das APIs de uma aplicação compatível com o seu padrão. A especificação JSR-226, por exemplo, permite criar imagens de forma completamente dinâmica ou até mesmo modificar alguma imagem já carregada pela aplicação. As duas situações serão exemplificadas nesse artigo.

Algoritmos de pesquisa também podem ser direcionados a elementos textuais dentro de um arquivo SVG. Essa característica evidencia um outro grande diferencial nesse formato, uma vez que é possível que sejam feitas buscas por palavras ou frases presentes em imagens. Coisas que o formato baseado em pixel jamais poderia fornecer.

Como o SVG é definido como um padrão aberto de representação de imagens, não existe a dependência de softwares proprietários para trabalhar com o mesmo. Até mesmo um editor de texto puro pode ser utilizado para criar e editar imagens SVG. É evidente que para isso ser possível é necessário conhecer detalhes técnicos sobre o seu padrão.

Tipos de objetos

O padrão SVG Tiny permite quatro tipos de objetos gráficos:

·         Formas gráficas vetoriais (rect, circle, ellipse, line, polyline, polygon, path e etc.);

·         Objetos de agrupamento (svg e g);

·         Imagens (image);

·         Texto (text).

Para exemplificar o uso de alguns desses objetos, observe a Figura 2 e na Listagem 1,  a representação XML da mesma imagem.

Figura 2. Um Exemplo Simples de uma Imagem SVG.

Listagem 1. Declarações XML correspondente a Figura 2.

SVG/1.1/DTD/svg11-tiny.dtd">

viewBox="0 0 176 208">

Editores SVG

Já existem no mercado algumas ferramentas gráficas, livres ou pagas, que dão suporte ao uso de imagens SVG. O problema é que ainda são poucas as que oferecem o uso de todos os recursos que a especificação oferece. A maioria dessas ferramentas reconhece apenas o padrão SVG completo, não gerando imagens segundo o perfil Tiny. A ferramenta Open Source Inkscape é um exemplo disso. Para esse caso, existem utilitários de terceiros, como o SVG2SVGT da Nokia, que fazem o trabalho de conversão para o formato mais leve do padrão. O detalhe é que, neste caso, é necessário todo um trabalho de observação no processo de design da imagem para não usar recursos não suportados no SVG Tiny, uma vez que a ferramenta não oferece meios próprios para gerenciar isto.

Existe o caso de ferramentas que, apesar de deixar o processo de design livre, permitem salvar as imagens já no formato SVG Tiny. É o caso do Adobe Illustrator CS2. Mas o Adobe sozinho também não atende completamente à especificação, pois o mesmo não possui recursos de animação. A ferramenta Ikivo Animator faz esse trabalho adicional. É interessante a forma como uma ferramenta completa a outra, uma vez que o Ikivo não permite criar imagens, mas ajuda na aplicação de recursos de animação em uma imagem previamente definida.

Até o fechamento desse artigo, a ferramenta que parece ser a mais completa é o Beatware Mobile Designer, que faz exatamente tudo o que é necessário ao se trabalhar com imagens SVG Tiny. Mas a Hyperion, detentora do Beatware, foi comprada pela Oracle e até agora não há meios de baixar sua versão mais nova (2.0) já que todos os links estão quebrados.

Há outras ferramentas no mercado fornecidas no modelo open source e comercial que não foram citadas aqui. Mas como a especificação SVG é realmente nova, grande parte delas ainda precisa evoluir muito para oferecer tudo o que o formato disponibiliza como vantagem na substituição das imagens baseadas em pixels.

A especificação JSR-226

A JSR-226 é uma especificação mantida pelo JCP (Java Community Process) que define uma API para renderização de gráficos vetoriais 2D. Foi criada em 2003 e definida inicialmente por pessoas chaves das empresas Nokia, Motorola, Sun, Symbian e Texas Instruments. A renderização de imagens segue o padrão SVG Tiny determinado pelo W3C. A plataforma alvo dessa API é o Java ME/CLDC/MIDP, entretanto, devido ao fato da especificação depender de tipos de ponto flutuante, a configuração mínima para o CLDC é a 1.1. ...