Grficos Vetoriais Escalveis na criao de interfaces de

sistemas para a Internet

Naiara Sebben1, Anibal Lopes Guedes1
1

Desenvolvimento de Sistemas para Internet Universidade do Oeste de Santa Catarina

(UNOESC)
So Miguel do Oeste SC Brazil
{naiarasebben, anibalguedes}@gmail.com.br

Abstract. In a society where the Internet is a medium indispenssvel, the

discussion on the technologies used in the construction of its interface,
through which the communication occurs Humano /Coputer, takes shape of
extreme importance. The evolution with the solutions brought by the Scalable
Vector Graphics (SVG) in creating layouts for web, in conjunction with the
release of new version of the Markup Language Hirper Text (HTML) used
most in the world, HTML 5.0 will allow expossio vector images on the
Internet, known for high quality and low size storage and processing.
Abordase this work the study of aspects of the XML programming language
for creating graphics like SVG, and standards development relating to the
subject matter, structure, support vector graphics on the platform and their
web browsers, as well as testing the applicability SVG technology on the
Internet.
Resumo. Na sociedade em que a internet um meio indispenssvel, a
discusso acerca das tecnologias utilizadas na contruo da sua interface,
meio pelo qual acontece a comunicao Homem/Coputador, ganha contornos
de extrema relevncia. A evoluo, com as solues trazidas pelos Grficos
Vetoriais Escalveis (SVG) na criao de layouts para web, em conjunto com
o lanamento da nova verso da Linguagem de Marcao de Hirper Textos
(HTML). Sendo assim, aborda-se nesse trabalho o estudo de aspectos da
linguagem de programao XML para criao de grficos do tipo SVG,
incluindo normas e padres de desenvolvimento relativas ao tema em questo,
estrutura de suporte de grficos vetoriais na plataforma web e seus
navegadores, assim como, testes de aplicabilidade da tecnologia SVG na
internet.
Palavras-chave. Grficos Vetoriais Escalveis, interfaces, layouts, SVG,
XML.

1. Introduo
O mundo est sendo caracterizado pela grande quantidade de informaes difundidas
pelas diferentes mdias da web. Esse fator agravado com a exploso da internet que se
constitui como o hipertexto universal, promovendo e divulgando cada vez mais
informaes de todas as naturezas e crenas, alm de interligar os diferentes pases em
tempo real e a qualquer momento (ANGELONI, 2005).

O contnuo processo de avano das Tecnologias da Informao e Comunicao

(TICs), vem abrindo caminho para uma nova web, intitulada de Web 2.0, mais focada
na interatividade, disponibilidade, portabilidade, gratuicidade, experimentalismo e que
aproveita a inteligncia coletiva.
O advento dessa nova forma de interao da web 2.0, reflete a estrutura
institucional e social da sociedade contempornea e se depara com novas formas de
interagir com o computador. Apesar das disparidades socioeconmicas presentes entre
as diversas regies do planeta, que ditam o grau de avano tecnolgico de cada nao,
esta interferncia no cotidiano alcana desde as relaes comerciais, cientficas,
tecnolgicas, cooperativas e polticas at as relaes pessoais, dada a velocidade e a
forma com que informaes podem ser obtidas ou transmitidas (LVY, 1999;
ALCZAR, 2003 apud ANDRADE, 2007).
Contudo a velocidade de acesso a esse meio, ainda possui barreiras tecnolgicas
que ocorrem devido a diversos fatores, como a enorme quantidade de imagens do tipo
mapa de bits que compem as interfaces dos aplicativos na internet, assunto foco desse
trabalho.
Imagens do tipo mapa de bits, criam layouts baseados em pixels, que acabam
resultando em mais da metade do armazenamento total de todo o sistema web
(MARTINS, 2009).
Por outro lado, existem as imagens vetoriais que so baseadas em coordenadas
matemticas, as quais so capazes de criar arquivos com uma frao do espao utilizado
pelo mapa de bits, e mais importante, podem ser ampliadas indefinidamente sem
perderem definio e detalhamento (FALLEIROS, 2003).
Essa tecnologia vetorial est prevista no lanamento do HTML 5.0, que vir com
suporte ao padro SVG, tecnologia que alm de ser recomendada pela W3C, utilizada
para descrever aplicaes grficas vetoriais e bidimensionais (2D) baseadas em XML.
Prevendo uma possvel revoluo na essncia do desenvolvimento de interfaces para
internet (W3C, 2010).
A carncia de orientaes no projeto de uma interface web leve, porm com alta
qualidade de visualizao constituem uma lacuna de conhecimento nesta rea. Para
tanto, este trabalho tem seu campo de estudo centrado na criao de interfaces para uma
web baseada em um design muito mais eficiente.
1.1 Objetivo Geral
Analisar o uso do SVG (Scalable Vector Graphics / Grficos Vetoriais Escalveis), na
criao de interfaces/layouts para sistemas web.
1.2 Objetivos Especficos
Como objetivos especficos so:

analisar tendncias do uso do SVG na internet;

analisar o desempenho dos grficos vetoriais escsalveis sob os padres da W3C

e os critrios de acessibilidade;

levantar as vantagens dos grficos vetoriais escalveis;

testar o uso do SGV na criao de layouts para interfaces web, assim como, o
seu suporte aos principais navegadores da web.

2. Justificativa
Alguns problemas de usabilidade na web, principalmente a demora no tempo de
resposta que um usurio possui ao tentar carregar uma homepage, fizeram crescer o
interesse em pesquisas que visam apontar solues para melhor tratar com a variedade
de recursos multimdias, que tanto impactam no desempenho dos sistemas
desenvolvidos para a internet.
Segundo a consultoria Aberdeen Group (2010), problemas com o desempenho
dos aplicativos tm impacto sobre a receita de uma corporao de at 9%. Tambm foi
provado que investir no aumento da velocidade dos sites melhora os negcios online e
promove um aumento significativo na satisfao do usurio/cliente.
Pois, quando um consumidor deixa um site, as chances de voltar depois de uma
experincia negativa praticamente zero. (S2 ..., 2010)
Isso ocorre porque na maioria dos websites de 50% a 90% do seu tamanho de
armazenamento se deva s imagens e animaes (MARTINS, 2009).
Sousa (2009) aponta que do todo o tempo gasto pelo visitante para baixar uma
pgina, 80% processado no front-end (cliente) e somente 20% no back-end (servidor),
e desses 80%, a maioria dedicado a baixar componentes dos formatos .bmp, .jpg, .png
e .swf.
Hoje, a soluo para pginas mais rpidas basicamente tratar as
imagens/animaes com softwares especficos que reduzem o seu tamanho de
armazenamento e otimizam o nmero de componentes do site, que resultar em menos
requisies HTTP no momento de renderizar a pgina no cliente.
Contudo, reduzir o tamanho de armazenamento de uma imagem do tipo mapa de
bits, impacta em definir uma menor resoluo para o desenho, o que ocasiona a perda de
qualidade do mesmo. Ou seja, quanto maior a resoluo maior ser o tamanho do
arquivo no disco rgido, pois no caso o computador ter mais informaes em pixels
para armazenar (MOREIRA, 2008).
Em contrapartida, as transformaes extremamente velozes que ocorrem na
web, incentivam novas pesquisas que trazem tecnologias a fim de construir uma Web
mais inteligente, colaborativa e personalizada. (KOCH, 2000, p. 1)
Como exemplo cita-se o desenvolvimento da nova verso do HTML, o HTML
5.0, que traz entre muitas outras novidades o suporte ao SVG (Scalable Vector
Graphics), que consiste em uma linguagem grfica padro, que permite desenhar
pginas web com alta resoluo grfica, incluindo elementos sofisticados tais como:
declives, fontes embutidas, transparncias, animao e efeitos de filtro, usando
comandos de texto. (COSTA, 2007)
A diferena entre o SVG e outros formatos vetoriais, o fato de ser um formato
aberto e gratuto, criado sob coordenao da W3C com o apoio das seguintes empresas:
Adobe, Agfa, Apple, Canon, Ericsson, HP, IBM, Kodak, Microsoft, Nokia, Sharp e Sun
Microsystems (BISNETO, 2006).

Ao contrrio das imagens mapeadas por bits, as imagens vetoriais, so

compostas de linhas, ngulos e formas geomtricas predefinidas por comandos de
computador e por clculos matemticos.
Por isso, uma imagem vetorial, ou grfico vetorial, pode ser reorganizada
indefinidamente e traz a vantagem de ser independente em relao resoluo. Ou seja,
pode ser redimensionada indefinidamente sem perder a qualidade na visualizao e sem
aumentar o tamanhos de armazenamento. Proporcionando para os sistemas web, layouts
mais leves, com maior qualidade e produzidos com base em tecnologias gratuitas.

3. Desenvolvimento
O design para todos e as interfaces rpidas, flexveis e ajustveis so alvo de pesquisa
de ponta na prpria rea de IHC (Interao Humano-Computador), que aumentam
medida que se considera os variados contextos scio-econmicos e a diversidade
cultural no mundo.
Acerca de fazer uma anlise sobre essas interfaces e as tendncias trazidas pelo
SVG, aborda-se nos prximos capitulos, assuntos como as interfaces da web e os tipos
de desenhos utilizados para desenvolv-las, assim como as novidades do SVG com o
lanamento do HTML 5. E por fim apresenta os resultados dos testes de desempenho e
suporte do SVG, nos principais navegadores da web.
3.1 Interface Web
Segundo Lvy (1993, p. 181) a interface o meio que propicia a comunicao
entre o ser humano e o computador, e nas palavras de Shneiderman (2004), o local
onde o usurio entra em contato fsico, perceptivo e cognitivo, com o sistema.
A interface web tem a funo de permitir ao usurio obter uma viso
panormica do contedo, navegar na massa de dados sem perder a orientao e, por fim,
mover-se no espao informacional de acordo com seus interesses. (BONSIEPE, 1997,
p. 59).
Existem diversos tipos de interface com o usurio, tais como: interface de linha
de comando, interface baseada em menus, interface grfica, interface de comando de
voz; no entanto, foi atravs da interface grfica que o computador juntamente com a
internet rompeu a barreira dos ambientes cientficos e chegou at os ambientes
domsticos. (VALESE et. al., 2003, p. 92).
De acordo com Batista (2008), a interface grfica composta por um conjunto
de elementos que se subdividem em: textual (texto plano), no textuais (imagens, udio
e videos), interativos (botes, campos de formulrios, etc), layout (imagens, cores,
linhas, etc) e interpretveis pelos navegadores (DHTML, CSS).
Na internet, entre todos os elementos, so as imagens, que compem a maior
parte do espao de armazenamento de um website e so essenciais para a transmisso de
idias, para o design de layouts, para exemplos e para uma srie praticamente infinita de
aplicaes (MARTINS, 2009).
Isso acontece, pois a maioria das imagens encontradas na web, so imagens do
tipo mapa de bits, ou seja, formadas por pixels. Essas imagens so caracterizadas por
serem mais pesadas, ao contrrio das imagens do tipo vetorial, como pode ser visto no
prximo tpico.

3.2 Tipos de grficos digitais

Existem dois tipos de imagens na computao grfica: as imagens vetor e as
bitmap/mapa de bits. A diferena entre as duas baseada na forma em que a imagem
armazenada pelo computador.
Alguns programas mais conhecidos que criam arquivos bitmap (pixel) so:
Adobe PhotoShop, Corel Photopaint, Corel Painter, Paint Shop Pro, Gimp e outros. J
programas que criam arte vetorial citam-se: o CorelDraw, Illustrator, Inkscape,
Freehand, RealDraw, Xara e Flash.
3.2.1 Imagens Bitmap
As imagens do tipo bitmaps consistem em centenas de linhas e colunas de pequenos
elementos. Cada elemento armazenado individualmente pelo computador e chama-se
pixel (abreviatura de picture element) (FALLEIROS, 2003).
isto , a imagem consiste numa matriz de pontos individuais (ou pixels) em que
cada um tem a sua prpria cor (descrita usando bits, a mais pequena unidade de
informao para um computador). Para demonstrar essa construo a Ilustrao 1
mostra os misculos quadrados que formam a imagem.

Figura 1. Grade base de pixels ampliados de uma tela. Fonte: O Autor (2010).

Sem a ampliao, o olho humano no capaz de distinguir cada pixel

individualmente, ficando ento, com a percepo de uma imagem com suaves
gradaes.
Caso um crculo bitmap seja desenhado nesta base ampliada (Figura1), o
resultado fica um desenho com as bordas serrilhadas, como mostra a primeira tela da
Figura 2 abaixo. Mas re-ajustando a ampliao dos pixeis, para seu tamanho normal, a
mesma serrilhao torna-se imperceptvel ao olho humano, como mostra a terceira
imagem das Figura 2 a seguir.

Figura 2. Crculo bitmap gradativamente ampliado. Fonte: O Autor (2010).

Assim, na primeira tela (Figura 2), representado cada pixel individualizado,

fazendo com que o crculo fique muito blocado, duro e irregular. Porm, com o
acrcimo de pixels, a resoluco ser aumentada, e esse crculo se torna mais suave
porque os pixels so muito menores, como mostra a segunda e a terceira tela da Figura
2.
O nmero de pixels determina a resoluo do arquivo. O computador registra
este arquivo pela gravao da exata localizao e cor de cada pixel. O computador no
tem idia que isso um crculo, somente que um aglomerado de pequenos pontos
(FERNANDES, 2003).
Sendo assim, naturalmente, quanto maior a resoluo maior ser o tamanho do
arquivo no disco rgido, porque o computador ter mais informaes em pixels para
armazenar.
Mas, o problema se agrava quando o bitmap alargado ou aumentado (em
escala ou aleatoriamente). A resoluo existente quando modificada em tamanho,
somente alarga o pixel, resultando num efeito conhecido como pixelizao da
imagem, mostrado no Figura 2.

Figura 2. Efeito de pixelizao. Fonte: O Autor (2010).

Formatos de arquivos que suportam desenhos bitmap so: psd, ctp, rif, tif, jpg,
bmp, entre outros.
O tratamento de arquivos deste tipo requer ferramentas especializadas,
geralmente utilizadas em fotografia, pois envolvem clculos muito complexos, como
interpolao e lgebra matricial.

3.2.2 Imagens Vetoriais

Imagem vetorial um tipo de imagem gerada a partir de construes geomtricas de
formas, diferente das bitmap (mapa de bits) construdas por uma unidade bsica (pixel).
Uma imagem desenvolvida em um programa vetorial composta por curvas, elipses,
retangulos, polgonos, texto, entre outros elementos, isto , utilizam vetores
matemticos para sua descrio (FERNANDES, 2003).
Atravs desta tcnica, o programa vetorial pode criar arquivos com uma frao
do espao utilizado pelo bitmap (imagens rastreadas), e mais importante, possuem a
capacidade de serem ampliados indefinidamente sem perderem definio e
detalhamento (FALLEIROS, 2003).
Como pode ser visto na Figura 3 a seguir, diferentemente da imagem bitmap, o
crculo vetorial aparece suave tanto em 100% quanto em 800%.

Figura 3. Ampliao de vetor de 100% para 800%. Fonte: O Autor (2010).

Outra vantagem do desenho vetorial a possibilidade de isolar objetos e zonas,

tratando-as independentemente, enquanto na imagem bitmap o desenho engessado em
um bloco de pixels (FALLEIROS, 2003).
Sendo assim, por serem baseados em vetores, esses grficos geralmente so mais
leves (ocupam menos memria no disco) e no perdem qualidade ao serem ampliados,
alm de serem mais flexivis quanto a alteraes/edies. Uma vez que, as funes
matemticas adequam-se facilmente escala, o que no ocorre com grficos raster
(bitmap) que utilizam mtodos de interpolao na tentativa de preservar a qualidade.
3.3 A nova Web
A nova web, nomeada de Web 2.0 o momento em que o mercado, por fora dos
usurios, voltou a dar importncia para web depois do estouro da bolha. (TEIXEIRA,
2006).
A web 2.0, tambm pode ser vista como uma mudana ocorrida na vida dos
usurios que com a banda larga passam mais tempo on-line e exercem massivamente o
potencial interativo da Internet. (NEPOMUCENO; CAVALCANTI, 2006).
O que instigou o World Wide Web Consortium (W3C), grupo responsvel por
desenvolver tecnologias que sejam compatveis para promover a evoluo da web, a

investir em inovaes que proporcionacem a web aplicaes que satisfaam as novas

necessidades do usurio.
Assim, o W3C HTML Working Group, est trabalhando na nova verso do
HyperText Markup Language (HTML), o HTML 5.0, visando oferecer uma experincia
web totalmente diferente para os usurios (ALVAREZ, 2009).
3.4 O HTML 5.0
O HTML foi desenvolvido originalmente por Tim Bernes-Lee no CERN (Centro
Europeu de Fsica de Partculas), e foi popularizado pelo navegador Mosaic, esse
desenvolvido pela NCSA (National Center for Supercomputing Applications) (SILVA,
2008)
Desde o comeo o HTML foi criado para ser uma linguagem independente de
plataformas, browsers e outros meios de acesso. Com o intuito deste cdigo ser lido por
diversos meios, evitando que a web fosse desenvolvida em uma base proprietria, com
formatos incompatveis e limitados (W3C, 2010).
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada,
fazendo com que a informao publicada por meio deste cdigo fosse
acessvel por dispositivos e outros meios com caractersticas diferentes, no
importando o tamanho da tela, resoluo, variao de cor. Dispositivos
prprios para deficientes visuais e auditivos ou dispositivos mveis e
portteis. O HTML deve ser entendido universalmente, dando a possibilidade
para a reutilizao dessa informao de acordo com as limitaes de cada
meio de acesso (W3C, 2010).

Desde ento o HTML passou por inmeras verses (HTML 2.0, HTML 3.2,
HTML 4.0, HTML 4.01 e X HTML 1.0). Porm, foi quando o W3C focava suas
atenes para a criao da segunda verso do XHTML, um grupo chamado Web
Hypertext Application Technology Working Group (WHATWG) trabalhava em uma
verso do HTML que trazia mais flexibilidade para a produo de websites e sistemas
baseados na web.
O WHATWG foi fundado por desenvolvedores de empresas como Mozilla,
Apple e Opera em 2004. Eles no estavam felizes com o caminho que a web tomava e
nem com o rumo dado ao XHTML. Por isso, essas organizaes se juntaram para
escrever o que seria chamado hoje de HTML 5 (HTML5, 2010).
Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e
principalmente pelo W3C, que at ento trabalhavam individualmente, reconheceu todo
o trabalho do grupo. Ento em outubro desse mesmo ano, Tim Berners-Lee anunciou
que trabalharia juntamente com o WHATWG na produo do HTML 5.0, para posterior
descontinuao do XHTML 2.0 em 2009 (HTML5, 2010).
Assim, aps dez anos sem muitas atualizaes, surge o HTML 5.0, que promete
trazer novas possibilidades para os desenvolvedores web (FERREIRA, 2010).
"Por isso o frisson em relao ao HTML 5. A linguagem ficou muito tempo
sem evoluir e as pessoas adotaram maneiras alternativas de resolver os
problemas de programao na web", afirma o professor do departamento de
Cincia da Computao do Instituto de Matemtica e Estatstica (IME) da
Universidade de So Paulo (USP), Marco Aurlio Gerosa.

Embora exista um longo caminho para ser finalizado, pois a verso final do novo
HTML est previsto apenas para final de 2012, muitos navegadores importantes, como
o pera, Google Chrome, Safari 4 e o Firefox 3.5 j implementaram grandes partes da
nova linguagem.
A evoluo do HTML ir interferir na forma como os navegadores fazem a
leitura dos cdigos e montam as pginas web para o internauta. Segundo Alejandro
Villanueva, responsvel pelo relacionamento com comunidades de desenvolvedores do
Google na Amrica Latina, em entrevista ao IDG Now! (2009) O HTML 5 oferece
uma experincia de web mais rica para usurios e ferramentas adicionais a
desenvolvedores, que podem criar aplicaes mais complexas com base em um
conjunto de padres abertos.
Assim, com a evoluo da linguagem, na opinio dos especialistas mencionados,
os navegadores passam da categoria de meros mostradores de pginas para completos
ambientes de desenvolvimento, proporcionados pelas novidades que esto sendo
implementadas no HTML 5 (IDG NOW!, 2009).
3.4.1 Novidades do HTML 5
Para causar tamanho impacto no desenvolvimento web, as mudanas para a nova verso
do HTML foi significativa. Para uma anlise mais abrangente, a Tabela 1 mostra as
principais novidades do HTML 5.0, de acordo com HTML 5 (2010).
Novidade
Novos elementos e
atributos

Elementos
modificados e
ausentes

Descrio
O HTML5 trouxe uma srie de elementos que nos ajudam a
definir setores principais no documento HTML, tais como:
section, nav, article, aside, hgroup, header, footer e time.
Alguns elementos que existiam no HTML e que
anteriormente foram descontinuados agora voltaram tona
com novos significados semnticos. Assim como outros
elementos que no descontinuados, mas tambm tiveram
seus significados modificados.
Elementos modificados: <b>, <i>, <addres>, <hr>,
<strong>, <head>.
Elementos modificados: <basefont>, <big>, <center>,
<font>, <s>, <strike>, <tt>, <u>, <frame>, <frameset>,
<noframes>.

Novos tipos de
campos

O elemento input aceita os seguintes valores para o atributo

type: tel, search, email, url, datas, horas, number, range,
color.

Tipos de dados e
validadores

O HTML 5 ganhou bastante recursos de formulrios e

validadores como por ex: autofocus, placeholder text,
required, maxlength, pattern, etc.

Detalhes e contedo
editvel.

Possibilidade de usar novos elementos como o details e o

summary.

Drag-and-drop e

Elementos drag-and-drop sero facilmente manipulados e

correo ortogrfica

agentes de usurio podero oferecer recursos de reviso

ortogrfica e gramatical, dependendo da disponibilidade em
cada plataforma.

Elementos audio,
video, e codecs

Elementos especficos para udio e vdeo foram criados com

possibilidade de incluso de codecs.

Elemento device e
stream API

O HTML 5 prev que os agentes de usurio tenham uma

interface de comuicao P2P, que permite a troca de texto,
imagem, vdeos e arquivos.

MathML e SVG

O HTML5 incorpora o padro MathML, uma linguagem de

marcao, baseada em XML, para representao de frmulas
matemticas. Assim como MathML, o SVG tambm uma
linguagem XML que pode ser incorporada com facilidade
em HTML5.

Canvas API

Possibilidade de usar o elemento canvas API que permite

desenhar na tela do navegador via Javascript.

Server-sent events

Server-Sent Events API uma maneira de inverter o fluxo

das aplicaes Ajax, fazendo com que o servidor possa
disparar o envio de dados ao agente de usurio.

DOM e HTML5

Diferena entre as verses anteriores do DOM e a do HTML

5.

Novos eventos DOM

O HTML 5 oferece um conjunto de novos elementos para

multimdia, novos eventos para campos de formulrios, entre
outros.

Menus e toolbars

Novos elementos especficos para menus e toolbars.

Tipos de links

Possibilidade de acrescentar aos links: metadados de

navegao, metadados da pgina e comportamentos dos links
na pgina.

Microdata

Microdata API permite tornar a estrutura semntica mais

especfica, definindo o que o contedo de cada elemento.

Histrico de sesso e
API Storage

O objeto history foi melhorado no HTML5 com dois novos

mtodos: o pushState() e o replaceState().

Aplicaes offline

HTML5 prov uma maneira de se indicar ao navegador que

elementos so necessrios e devem ser postos em cache para
que uma aplicao funcione offline.

Scroll in to view e
hidden

Novas possibilidades para trabalhar com ocultaes de

objetos.

Geolocation API

Criao de funes como callback, que so capazes de

receber um objeto de posicionamento.

Undo

Objetos undo podem ser inseridos no histrico e controlados

pelos seus scripts.
Tabela 1. Principais novidades do HTML 5.0. Fonte: HTML5 (2010).

Devido ao foco deste trabalho estar nas tendncias do desempenffhos das

imagens na web, caracterizado na demanda por pginas mais leves, mais rpidas e com
mais recursos, passa-se a considerar principalmente os dois ltimos itens da Tabela 1
acima, que esto diretamente voltados a insero de desenhos/imagens na internet.
O HTML 5.0, incorpora o padro MathML, que uma linguagem de marcao,
baseada em XML, para representao de frmulas matemticas. Assim como, o SVG
que uma outra linguagem XML que pode ser incorporada com facilidade em HTML
5.0. Ambos daro suporte a uma linguagem para marcao de grficos vetoriais na web,
at ento encontrada em minoria, e dependendo de pluggins extras disponibilizados por
empresas proprietrias.
J as canvas API permitem desenhar na tela do navegador via Javascript,
proporcionado por um nico elemento HTML existente referenciado pelas tag
<canvas>, o resto todo do desenho feito via cdigo Javascript.
Enquanto por um lado, o MathML e o SVG so vetoriais, e baseado em XML,
logo, acessvel via DOM, as canvas so desenhadas pixel a pixel, via Javascript.
Cada uma das trs tecnologias trazem diversas peculiaridades, porm o maior
destaque quanto ao uso do SVG, j que a maioria dos editores de grficos vetoriais
encontrados hoje importa e exporta automaticamente SVG, permitindo ao
desenvolvedor construir um grfico em seu editor vetorial preferido e export-lo
diretamente (HTML5, 2010).
Em seguida, um programador pode ainda acresentar um cdigo Javascript que
manipula esse SVG, usando os mtodos do DOM. Com isso, pode-se criar grficos
dinmicos, com animao, escalveis e com excelente qualidade visual, programveis
em Javascript, e principalmente sem tecnologias proprietrias e pluggins (HTML5,
2010).
3.5 Tecnologia SVG (Scalable Vector Graphics)
Em geral, o SVG um formato grfico vetorial que no seu estado nativo inteiramente
dedicado a bases vetoriais, como linhas, preenchimentos, gradientes e texto; que
permitem aos desenvolvedores web, designers, e usurios, ultrapassarem as limitaes
do HTML e criar um contedo visual robusto e interativo atravs de um modelo simples
de programao declarativa e muito mais leve.
Segundo a W3C (2010), a SVG uma linguagem para descrever grficos em
duas dimenses em XML, os quais suportam trs tipos de objetos grficos: vetor de
formas grficas, imagens e texto. As trs tecnologias compostas do SVG, podem ser
trabalhados pelo desenvolvedor de forma interativa, dinmica ou ainda animada.
O SVG formado apartir de declaraes de objetos grficos utilizando XML,
possibilitando o desenho se adaptar a qualquer resoluo de tela sem perda de qualidade
e apresentar os grficos em duas dimenses. Desde ento, imagens SVG tm sido cada
vez mais utilizadas na web e j so reconhecidas pelos mais populares softwares
grficos, oferecendo assim, muitas vantagens para os investidores e utilizadores.
Assim como, os websites tornaram-se mais complexos, oferecendo mais
interactividade e sofisticao visual, os webdesigners necessitam de linguagens que

alm de mais poderosas que o antigo HTML 4, virem tendncias de mercado (COSTA,
2007).
Atualmente, o formato .swf da Adobe, um dos mais utilizados para inserir
vetores na web, com o objetivo principal de criar arquivos pequenos que permitam a
interatividade e que rodem em qualquer plataforma. Porm, compatvel apenas com os
navegadores que suportem pluggins com esta tecnologia.
Neste ano de 2010, Steve Jobs mostrou mais um aparelho da Apple, conhecido
como iPad (alm do iPhone e iPod Touch) sem o suporte ao pluggin Flash, da Adobe.
Poucas semanas depois, o co-fundador da Apple se justificou, dizendo que a tecnologia
estava ultrapassada e seria logo substituda pelo HTML 5 (AMARAL, 2010).
Sobre o assunto, Andr Jaccon (2010 apud AMARAL, 2010), arquiteto de
software da empresa de programao Blue Systems, comenta: a Apple vem dificultando
a integrao de aplicaes com Flash em dispositivos como iPhone, iPod e iPad,
alegando que os players diminuiriam a autonomia de bateria.
Assim como, muitas especulaes encontadas na internet sobre o HTML 5.0,
que do rumo a um investimento de uma tecnologia mais eficaz e no-proprietrio. O
HTML 5.0, mostrou uma forma de evoluir atravs de uma linguagem aberta, mantida
por uma comunidade e no por uma empresa privada (RAMOS apud AMARAL, 2010).
Com o futuro dos padres do W3C, a Adobe espera criar as melhores
ferramentas para quem quiser trabalhar com eles, da mesma que o Flash vem
sendo aprimorado para lidar com desenvolvimento em mltiplas plataformas.
(LYNCH, 2010).

J do ponto de vista da segurana, se por um lado as constantes atualizaes do

Flash so utilizadas como oportunidade para hackers promoverem golpes disfarando
programas maliciosos como o pluggin da Adobe, o HTML 5 tambm preocupa
(RAMOS apud AMARAL, 2010).).
Como diz Ramos (2010), a chance de existir alguma brecha nunca descartada,
como a linguagem vem com um nmero bem grande de aperfeioamentos e novidades,
as falhas podem ficar evidentes.
Contudo, a equipe de desenvolvimento do W3C trabalha duro para minimizar
esse tipo de problema, porm, conforme o HTML 5 ganhar popularidade, pode vir a
acontecer que alguns crackers encontrem falhas que sero usadas para fins malignos. O
mesmo acontece com qualquer software ou linguagem disponvel no mercado, avisa
Amaral (2010).
Sendo assim, ainda em meio a algumas situaes no definidas sobre o HTML
5.0, o SVG j considerado adequado para aplicaes web interativas, personalizadas e
com grficos em tempo real baseados em fontes de dados, como por exemplo: ecommerce, sistemas corporativos e bases de dados; permitindo ao desenvolvedor
personalizar o SVG para diversos objetivos, no importando o modo como o usurio
interaja com os dados.
3.5.2 SVG sob os padres da W3C e os critrios de acessibilidade;
Tangarife e Alvo (2005) afirmam que acessibilidade diz respeito a locais, produtos,
servios ou informaes efetivamente disponveis ao maior nmero e variedade possvel

de pessoas independente de suas capacidades fsico-motoras e perceptivas, culturais e

sociais. Isto requer a eliminao de barreiras arquitetnicas, a disponibilidade de
comunicao, de acesso fsico, de equipamentos e programas adequados, de contedo e
apresentao da informao em formatos alternativos.
Melo e Baranauskas (2005) comentam, que a acessibilidade est sendo
reconhecida como uma condio fundamental para a incluso digital, com esses
mecanismos que auxiliam e viabilizam a incluso social. Vrias medidas esto sendo
adotadas para promover esse acesso.
Nos domnios das tecnologias da informao, o acesso universal faz referncia
s noes de interoperabilidade, compatibilidade, equipamentos, infra-estruturas e de
acessibilidade. O acesso universal exige, que se atinja essas determinadas condies, em
prol da contruo de uma web para todos, ideologia seguida pelo W3C (AMBROSI;
PEUGEOT; PIMIENTA, 2005).
Desde o incio, o W3C define a noo de acesso universal como sendo a
possibilidade para todos os indivduos de acessar os recursos da web, qualquer que seja
seu material ou software, sua rede de infra-estrutura, seu idioma materno, sua cultura,
sua localizao geogrfica ou suas aptides fsicas ou mentais (AMBROSI; PEUGEOT;
PIMIENTA, 2005).
A utilizao da ergonomia e da acessibilidade proporciona um impacto na
qualidade de interao das pessoas com necessidades especiais, atingindo diretamente o
usurio final. Enquanto que, as imagens bitmaps ou fornecidadas atravs de pluggins
fechados, so a principal barreira de acesso a informao para usurios que necessitam,
por exemplo, de uma leitor de tela para navegar na internet. Pois, essas imagens no so
interpretveis sem o sentido visual (QUEIROZ, 2006).
J, o SVG acessvel, pois suporta contedos alternativos, sendo possvel
seleccionar, escalar, indexar e extrair o texto de uma imagem. Isto significa grandes
avanos para acessibilidade, internacionalizao e rendering varivel em mltiplos
dispositivos de output. Como baseado em texto XML, scripts externos e ligaes
base de dados so capazes de seguir os sistemas dinmicos em HTML, tornando a
imagem mais flexvel e interpretveis (COSTA, 2007).
Devido a isso, o SVG 1.1 a mais recente verso da especificao completa
recomendada pela W3C e o SVG Tiny 1.2 a mesma recomendao s que com metas
para dispositivos mveis (SCALABLE , 2010).
3.5.3 Outras vantagens dos grficos vetoriais escalveis
Alm de altos nveis de acessibilidade e dos padres de desenvolvimento, o
formato SVG, possui outras caracteristicas que aplicadas a web, que proporcionam
vantagens na sua aplicao. As quais so descritas nas sees a seguir.
3.5.3.1 So escalveis
O SVG suporta o zoom nos grficos com verdadeiro escalonamento, portanto todos os
objetos e atributos so ampliados uniformenente com o nvel do zoom.

Imagens SVG podem se adaptar a qualquer resoluo de vdeo sem perda na

qualidade, uma vez que, o processo de renderizao feito atravs de declaraes XML
(objetos grficos e suas propriedades) e no baseado em pixels fixos.
Asim, uma imagem SVG pode ser submetida a efeitos de zoom sem qualquer
perda alguma de qualidade, devido as suas caracteristicas herdadas do grfico vetoriais,
jvistos anteriormente nesse trabalho.
3.5.3.2 Compatibilidade
Devido sua compatibilidade e a disponibilizao de outros padres web, recursos
podem ser implementados em XHTML e elementos SVG simultaneamente na mesma
pgina web.
Assim, o SVG se integra com outras especificaes do W3C e os esforos de
normalizao. Entrando em conformidade com outras normas, o SVG torna-se mais
forte e mais fcil para os desenvolvedores incorporarem o SVG em seus websites.
A seguir encontram-se algumas das maneiras em que o SVG mantm a
compatibilidade e se integra com outros esforos/normas do W3C, de acordo com o
manual de especificao do SVG, publicado pela prpria W3C (SCALABLE , 2010):

SVG uma aplicao de XML e compatvel com o Extensible Markup

Language (XML) 1.0. Recomendao XML10 (2008) do W3C;

SVG compatvel com os Namespaces em XML. Recomendao XML-NS

(2006) do W3C;

SVG utiliza XML Linking Language (XLink) para referenciar IRI e requer
suporte para IRI especificaes base definida em XML-BASE (2009) pelo W3C.

Um contedo SVG pode ser denominado por uma CSS (Cascading Style
Sheets), recomentado pelo W3C no CSS2 (2008); ou por um XSLT (XSL
Transformations verso 1.0 e 2.0). Definidos nas normas XSLT (1999) e
XSLT2 (2007) do W3C. Suportando assim, propriedades relevantes e
abordagens comuns de CSS e XSL, alm de semntica selecionados e as
caractersticas de CSS.

Folhas de estilo externas so referenciadas usando o mecanismo documentado

em Associando Style Sheets com documentos XML verso 1.0, especificado em
XML-SS (1999) do W3C;

Inclui um completo Document Object Model (DOM) e est em conformidade

com o Document Object Model (DOM) Level 1, recomendao DOM1 (1998).
Alm disso, o DOM SVG possui um alto nvel de compatibilidade e coerncia
com o DOM HTML, suportando e integrando muitas das instalaes descritas
no DOM Nvel 2, incluindo o modelo de objeto CSS e manipulao de eventos;

O SVG incorpora algumas caractersticas e abordagens que fazem parte do

Synchronized Multimedia Integration Language (SMIL 1.0). Especificao
SMIL1 (1998), incluindo o "interruptor" e o elemento systemLanguage;

Recursos de animao SVG foram desenvolvidas em colaborao com o W3C,

segundo a especificao SMIL1 (1998). Assim como, os recursos de animao

SVG de incorporar e ampliar o uso geral capacidades de animao XML

descrito na animao SMIL especificado no SMILANIM (2001);

O SVG foi projetado para permitir que futuras verses de SMIL para usar
desenhos animados ou estticos contedo SVG como componentes de mdia;

O SVG empenha-se nas tentativas de alcanar a mxima compatibilidade com as

versses HTML 4 e XHTML 1.0. Muitas das instalaes do SVG so modeladas
diretamente aps HTML, incluindo o uso de CSS e a sua abordagem para
manipulao de eventos, por meio do DOM;

SVG compatvel com o trabalho na internacionalizao do W3C. Estando de

acordo com as referncias do UNICODE (2007) e do CHARMOD (2005);

SVG compatvel com o trabalho de acessibilidade na web elaborado pelo

W3C, atravs do WCAG2 (2008), o qual explica como os autores podem criar
contedo da web que acessvel para pessoas com deficincia.

Assim, em ambientes que suportam DOM para outras gramticas XML (por
exemplo, XHTML) e que tambm suportam o DOM e SVG, uma abordagem de
scripting simples podem ser usados simultaneamente para ambos os documentos XML e
SVG grficos, em que o processo dinmico e efeitos interativos sero possveis em
XML namespaces mltiplos utilizando o mesmo conjunto de scripts.
3.5.3.3 Mais leves
Arquivos no formato SVG acabam sendo mais compactos do que os formatos
tradicionais de imagens (como PNG, JPG e o BMP) j que na verdade so arquivos de
texto e no de pixels.
Um exemplo disso, pode ser visto no trecho de cdigo (Cdigo 1), que mostra
um desenho simples criado e a sua respectiva codificao.
Desenho

Cdigo
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Camada_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="3000px" height="3000px" viewBox="0 0 3000 3000" enablebackground="new 0 0 3000 3000" xml:space="preserve">
<rect fill="#00E045" stroke="#000000" width="3000" height="3000"/>
</svg>
Cdigo 1. Cdigo de grfico SVG. Fonte: O Autor (2010).

Por exemplo, na criao do trecho de cdigo, pode-se analisar a diferena de

tamanho do ficheiro, de acordo com o formato utilizado para armazenar a mesma
imagem, inclusive em diversas resolues no caso das imagens baseadas em pixels. A
Tabela 2 a seguir explana os dados em questo.

Desenho

Formato

Tamanho em pixels
/resoluo

Tamanho de
armazenamento

.svg

300 x 300 pixels / no possui

4 Kb

.svg

3000 x 3000 pixels / no possui

4 Kb

.png

300 x 300 pixels / 72 dpi

4 Kb

.png

3000 x 3000 pixels / 72 dpi

45 Kb

.jpg

300 x 300 pixels / 72 dpi

20 Kb

.jpg

3000 x 3000 pixels / 72 dpi

238 Kb

.bmp

300 x 300 pixels / 72 dpi

369 Kb

.bmp

3000 x 3000 pixels / 72 dpi

36.864 Kb

Tabela 2. Comparao de desempenho do SVG em relao a outras tecnologias.

Fonte: O Autor (2010).

Os dados da Tabela 2 acima, esto ordenados por ordem de melhor desempenho,

com o SVG no topo. Pode-se perceber tambm que o formato PNG, para o tamanho de
300 x 300 pixels, se equipara ao SVG, porm quando aumentado para 3 mil pixels de
dimenso o tamanho do arquivo aumenta. Salientando ao SVG, caracteristicas nicas
quanto a leveza da imagem.
3.5.3.4 Extremamente extensvel a objetos no nativos
O SVG tambm extensvel no sentido em que suporta extenses com capacidades de
filtrar, podendo ser expansvel a outras aplicaes XML. Por exemplo, trabalha com
scripting, eventos e modelos de objetos definidos pelo DOM e pode ser alterado
dinamicamente com CSS, mas pode ser tambm integrado com qualquer coisa como
animao integrada (COSTA, 2007).
Alm disso, o SVG tem a capacidade habitual do XML em suportar objetos
embutidos. Bitmaps podem ser disponibilizados na sintax do SVG atravs da tag
<image>.
Os arquivos SVG tambm podem ter folhas de estilo ligados a eles, permitindo
um controle de alto nvel, uma vez que, um stylesheet pode ser aplicado a diferentes
ficheiros e usado para determinar a aparncia do documento, mais ou menos como os
templates do Word.
3.5.3.5 Trabalha com DOM
Aplicaes sofisticadas de SVG so possveis atravs da utilizao de uma linguagem
de script que acessa suplementar SVG Document Object Model (DOM), que fornece
acesso completo a todos os elementos, atributos e propriedades.
Para alm do scripting do lado do servidor, o SVG trabalha com o DOM,
para permitir do lado do cliente, uma programao por eventos. Ou seja,
coisas como rollovers de vetores que funcionam mesmo quando se faz zoom
e objetos animados que so programados ao longo do cran so suportadas.
Porque o SVG partilha o espao documental com outras coisas do DOM, as
aes no mundo SVG sero capazes de comunicar independentemente com

XHTML no browser (um clique num grfico pode resultar no preenchimento

de um campo de um form) (COSTA, 2007).

O Document Object Module (DOM) especifica um conjunto de interfaces de

programao para documentos XML e HTML. Define a estrutura lgica de um
documento e a forma como uma aplicao pode manipul-lo. O DOM para o SVG
permite uma eficiente animao de vetores grficos atravs de scripting.
Por ser plenamente suportado pelo DOM inteiramente programvel. Imagens
SVG ou partes de uma imagem SVG podem reagir aos cliques e aos movimentos do
mouse, originando mudanas, mudanas essas para os prprios grficos ou para outros
objetos que estejam na mesma pgina, tais como texto HTML ou outros grficos
(COSTA, 2007).
Graas a isso, o SVG considerada uma linguagem de contedo grfico rico.
Por meio do DOM, um conjunto de manipuladores de eventos tais como 'onmouseover'
e 'onclick' pode ser atribudo a qualquer objeto grfico SVG.
3.5.3.6 Atualizao
A verso 2.0 do SVG j est em desenvolvimento, e ir adicionar novas caractersticas a
facilidade de uso para SVG, bem como uma maior integrao com HTML, CSS e
DOM.
O SVG Group est atualmente a trabalhando em paralelo com um conjunto de
mdulos para alargar as especificaes anteriores e adicionando funcionalidade para
CSS, SVG e as novas especificaes ter duas combinar os mdulos com o resto do
quadro de SVG para trabalhar em toda a gama de dispositivos e plataformas
(SCALABLE , 2010).
3.5.3.7 No proprietrio
Para o movimento do software livre, um movimento social, no tico aprisionar a uma
patente um conhecimento cientfico, que deve estar sempre disponvel, para assim
permitir a evoluo da humanidade. J o movimento pelo cdigo aberto, que um
movimento mais voltado ao mercado, prega que o software desse tipo traz diversas
vantagens tcnicas e econmicas. O segundo surgiu para levar as empresas a adotarem o
modelo de desenvolvimento de software livre (CAMPOS, 2006).
Como um padro livre e de cdigo aberto, o SVG no pertence a nenhuma
companhia, ele o resultado da cooperao entre lderes industriais.
O SVG est disponvel para qualquer companhia ou para individuais que o
queiram implementar, existem aplicaes de vrias companhias que suportam a criao,
edio e viewing do SVG.
3.5.3.8 Melhor indexao aos buscadores
Atravs de grficos como o SVG que so baseados em XML, ou seja, as imagens so
formadas por textos, o contedo se torna pesquisvel e editvel.
Assim, com a habilidade para procurar elementos num texto, os desenhos em
SVG podem ser indexado por motores de busca ou procurados em browser pelos

utilizadores. Facilitando a identificao e a logalizao das imagens pelos buscadores de

contedo na Internet (COSTA, 2007).
3.5.3.10 Visualizao das cores
O SVG funciona bem sobre plataformas, resolues de sada, cores espaadas, e uma
fila de largura de banda, promovendo maior qualidade de visualizao.
Devido ao seu modelo de cor fidedigno, o SVG imprime na tela com as mesmas
cores que o utilizador v e com a mxima resoluo de visualizao; pois o controle de
cores superior do SVG oferece uma paleta de 16 milhes de cores.
3.5.4 O uso do SGV na criao de layouts para interfaces web
H uma variedade de opes para a utilizao de contedo SVG dentro de uma pgina
web. A seguir esto 4 das principais formas que um navegador pode interpretar e
mostrar o grfico SVG ao usurio final, de acordo com o manual de referncia do SGV,
disponibilizados pelo W3C (SCALABLE, 2010).
Atravs de um stand-alone SVG na pgina Web:
Neste caso, um documento SVG carregado diretamente em um navegador web, ou
seja, o documento SVG a prpria pgina web que apresentada ao usurio.
Incorporao por referncia:
Neste caso, uma pgina web faz referncia em separado ao documento SVG que est
armazenado independentemente, incorporando o arquivo SVG atravs de um
componente/elemento da pgina web. Para HTML ou XHTML, aqui esto trs
opes:
Elemento

Descrio

Cdigo exemplo

img

o tag <img> o mtodo mais

comum para a insero de grficos
em pginas HTML, alm de ser
suprtado em todos os navegadores.

<img
src="imagem.svg"
height="100"
width="300"
alt=imagem svg />

object

o tag <object> um tag HTML4

padro e suportado em todos os
browsers.

<object data="imagem.svg"
height="100"
width="300"
type="image/svg+xml"
codebase="http://www.adobe.
com/svg/viewer/install/" >

embed

o tag <embed> suportado em quase <embed

src="imagem.svg"
todos os browsers principais.
height="100"
width="300"
Obs.: o tag <embed> no alistado type="image/svg+xml"
em nenhumas especificaes do pluginspage="http://www.ado
HTML, por isso no considerado be.com/svg/viewer/install/" >
uma forma
funcionar.

iframe

vlida,

apesar

de

o tag do <iframe> trabalha em quase <iframe

src="imagem.svg"
todos os browsers.
height="100"
width="300"

type="image/svg+xml"
></iframe>
Tabela 3. Formas de incorporao por referncia de arquivo SVG em documento
HTML. Fonte: O Autor (2010).

No exemplo acima os cdigos representados na Tabela 3 acima, devem ser inseridos

em um documeto do tipo HTML para o funcionamsento do mesmo.
Incorporao inline
Neste caso, o contedo est incorporado inline SVG diretamente na homepage. Um
exemplo (Cdigo 2) um XHTML pgina web com um fragmento de documento
SVG textualmente includo no XHTML.
<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Pargrafo em HTML</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
Cdigo 2. Forma de incorporao inline de arquivo SVG em documento HTML.
Fonte: O Autor (2010).

Assim, no Cdigo 2 acima, a parte grifada representa o cdigo SVG e o resto

representa o cdigo HTML.
Referenciado a partir de uma propriedade CSS
CSS uma linguagem declarativa amplamente implementada para a atribuio de
propriedades de estilo XML para contedo, incluindo SVG. Representa uma
combinao de caractersticas, a simplicidade e a densidade que o torna muito
adequado para muitas aplicaes de SVG. Alm de ser uma exigncia da W3C que o
estilo CSS possa ser aplicado para o contedo SVG.
Um exemplo disso, pode ser visto no Cdigo 3 abaixo, onde representado o uso
com SVG com folhas de estilos atravs do um arquivo CSS externo, nomeado de
estilo.css.
Arquivo estilo.css
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
Arquivo principal que faz referncia ao estilo.css
<?xml version="1.0" standalone="no"?>

<?xml-stylesheet href="estilo.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10cm" height="5cm"
viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"/>
</svg>
Cdigo 3. Formatando SVG a partir de uma propriedade CSS externa.
Fonte: O Autor (2010).

Existem outras formas de fazer referncia a um estilo em uma pgina web, porm,
atravs de link externo (como mostra o Cdigo 3) a recomendada pelo W3C.
3.5.5 Testes sobre o uso do SGV na criao de layouts para interfaces web
Acerca de tantas vantagens proporcionados pelo formato SVG em aplicaes para web,
resta saber como seria um site basedo nessa tecnologia. E como seria sua
disponibilidade diante de tantos navegadores utilizados para o acesso ao mundo digital.
Os navegadores so cada vez mais importantes na forma como as pessoas usam
a internet, pois, a base por onde elas interagem no mundo virtual. Assim, para que o
SVG seja utilizado na web de forma eficaz, necessrio que os inmeros navegadores
existentes, implementem todas os funcionalidades proporcionados pelo SVG (MAIA,
2010).
Nos ltimos anos, o SVG est sendo implementado nativamente em vrios
navegadores, incluindo o Opera, Firefox e do WebKit (Safari e Google Chrome), em
2009, a Microsoft anunciou que tambm apoiaria SVG nativamente no Internet
Explorer 9, arredondando os principais navegadores para suporte SVG, trazendo um
crculo completo a sua origem (PRADO, 2010).
Apesar da motivao em prol do SVG, nem todos os navegadores esto
completamente implementados para suportar todos os elementos dessa tecnologia. Uma
alternativa temporria, at que isso ocorra, seria o uso de um pluggin como o Adobe
SVG Viewer.
Por isso o W3C cria e mantm suites de teste como parte de seu processo de
recomendao, para reforar a qualidade das suas especificaes, garantindo que o texto
claro o suficiente para produzir dois ou mais interoperveis implementaes
independentes para cada funo (SCALABLE , 2010).
Um dos objetivos do W3C como uma organizao de padres o de promover a
interoperabilidade em toda a gama de dispositivos, plataformas e classes de agentes de
usurio (como navegadores e ferramentas de criao de contedo).
Os resultados dos teste da W3C relativos ao SVG, esto disponveis no link
(http://dev.w3.org/SVG/profiles/1.1F2/test/harness/index.html), no qual indica um
conjunto de implementaes suportadas em cada recurso testado do SVG 1.1. O acervo
encontrado nesse endereo, possui um total de 465 testes que podem ser abertos e

testados em qualquer navegador. importante salientar que a especificao W3C tem

como objetivo testar a tecnologia SVG, e no os navegadores.
Cada um dos 465 testes da W3C, relativo a um dos muitos elementos do SVG,
e esses 465 elementos foram testados em 5 diferentes formas de usar o SVG numa
pgina web, como pode ser visto na Tela 1 que representa a tela principal dos testes em
questo.

Tela 1. Tela principal da suite de testes do SVG realizados pela W3C.

Fonte: SVG Test Suite (2010).

Os testes consistem em comparar uma imagem no formato PNG com outra no

formato SVG. Um dos exemplo da suite de testes mostrado na Tela 2 abaixo, que
representa o teste de nmero 465, no navegador Mozila Firefox.

Tela 2. Teste nmero 465 da suite de teste da W3C referente ao SVG.

Fonte: SVG Test Suite (2010).

A Tela 2, mostrada acima, testa se o contedo de um objeto do tipo animVal

somente leitura. Ele pode fazer uso de 7 elementos de animao: AnimatedNumberList,
AnimatedLength,
AnimatedLengthList,
AnimatedAngle,
AnimatedRect,
AnimatedTransformList e AnimatedPreserveAspectRatio.

Uma vez carregado, o teste (Tela 2) mostra sete retngulos representando os sete
sub-testes que refletem o resultado da verificao do objeto animVal. Assim, o
retngulo aparecer em preto para indicar que o sub-teste no pode ser executado, em
vermelho para indicar que o sub-teste falhou, e verde para indicar que o sub-teste
passou.
Como no teste acima, foram selecionados os principais navegadores da web
(Google Chrome 6.0.472.59, Internet Explorer 8.0 Mozilla Firefox 3.6.8, pera 10.61,
Safari 5.0.2) nas suas verses estveis mais recentes e foi testado todos os 465 testes da
W3C referentes ao formato SVG. E os resultados quanto ao funcionamento do SVG nos
navegadores apresentado nos Graficos 1, 2, 3, 4 e 5 a seguir.

pera 10.61:
passou
359

falhou
38

teste incompleto
68

Grfico 1. Desempenho do SVG no pera 10.61

Fonte: O Autor (2010)

Google Chrome 6.0.472.59:

passou
311

falhou
86

teste incompleto
68

Grfico 2. Desempenho do SVG no Google Chrome 6.0.472.59

Fonte: O Autor (2010)

Safari 5.0.2:
passou
293

falhou
104

teste incompleto
68

Grfico 3. Desempenho do SVG no Safari 5.0.2

Fonte: O Autor (2010)

Mozilla Firefox 3.6.8:

passou
222

falhou
175

teste incompleto
68

Grfico 4. Desempenho do SVG no Firefox 3.6.8

Fonte: O Autor (2010)

Internet Explorer 8.0:

passou
0

falhou
397

teste incompleto
68

Grfico 5. Desempenho do SVG no Explorer 8.0

Fonte: O Autor (2010)

As fatias verdes nos grficos acima, representam a porcentagem que o SVG

suportado por cada navegador em questo. J as fatias em cinza e em vermelho
representam os teste que ainda esto em desenvolvimento pela W3C e os que no
passaram pelos critrios de aprovao respectivamente.
Os resultados completos desses testes podem ser encontados no endereo
<http://www.naiarasebben.com.br/artigos/SVG>.

4. Concluso
O SVG advem como uma importante ferramenta para web, visto que suporta o
escalonamento de imagens para diferentes tamanhos de displays, sem perda de
qualidade e principalmente sem aumento no tamanho de armazenamento.
Apesar de no ser uma tecnologia nova, no ambiente web o SVG ainda
iniciante e com muitas barreiras a serem quebradas. Comeando com o suporte nativo
aos principais navegadores da web, referente a todas as funcionalidades do SVG, que
hoje s possivl com o auxilio de pluggins.
Como pode ser visto nos testes, que mostram que o pera, o Chrome e o Safari
j suportam mais de 50% das funcionalidades do padro. Seguidos pelo Firefox que
suporta quase 50% da tecnologia e do Internet Explorer que apesar das promessas j
mencionadas neste trabalho sobre a sua verso 9.0, ainda no suporta o formato SVG.
Assim, o SVG uma linguagem grfica ainda em desenvolvimento, por esta
razo este trabalho centrou-se na apresentao das capacidades e limitaes do SVG.
Porm, com a promessa dos navegadores e com a presso imposta pela W3C,
para que o SVG se desenvolva rapidamenta na web juntamente com o HTML 5, poder
ser presenciado, num futuro no muito distante, o surgimento de um novo paradigma de
criao de desenho para Internet, ou seja, trata-se de uma linguagem poderosa que ir
alterar o estado actual da web.
Com isso, de suma importncia que o desenvolvedor web tenha conhecimento
de imagens SVG e de sua utilizao/aplicao nos sistemas virtuais.
Sendo assim, por mais que ainda no possa ser usado em larga escala, a
evoluo tecnolgica comprova que no se pode ficar a merce do desconhecimento das

novas tendencias da web, alm disso, interfaces ricas esto se tornando um requisito
bsico para aplicao na Internet.

Referncias
Aberdeen Group. Frustrao dos consumidores com desempenho de websites
impacta nos negcios. Disponvel em: <http://www.aberdeen.com>. Acesso em: 23
jul. 2010.
Alvarez, Miguel Angel. O futuro do desenvolvimento web: HTML 5. 2009.
Disponvel em: <http://www.criarweb.com/artigos/futuro-desenvolvimento-webhtml-5.html>. Acesso em: 11 ago. 2010.
Amaral, Bruno do. Html 5.0 promete ser o futuro da navegao na internet. 2010.
Disponvel
em:
<http://blog.primeiramao.com.br/index.php/2010/03/03/html5promete-ser-o-futuro-da-navegao-na-internet>. Acesso em: 21 mai. 2010.
Ambrosi, Alain; Peugeot, Valrie; Pimienta, Daniel. Desafios de Palavras: Enfoques
Multiculturais sobre as Sociedades da Informao. C & F ditions, 2005. Disponvel
em: < http://www.vecam.org/article.php3?id_article=612&nemo=edm >. Acesso em:
24 set. 2006.
Andrade, Antonio Luis Lordelo. Usabilidade de interfaces web: avaliao heurstica
no jornalismo on-line. 1 ed. Editora E-papers, 2007. 142 pg.
Angeloni, Maria Terezinha. Organizaes do Conhecimento: Infra-Estrutura, Pessoas
e Tecnologias, Editora Saraiva, So Paulo, 2005.
Batista, Claudia Regina. Modelo e Diretrizes para Processo de Design de Interface
Web Adaptativa. UFSC Universidade Federal de Santa Catarina, 2008.
Disponvel em: < http://btd.egc.ufsc.br/wp-content/uploads/2010/06/Claudia-ReginaBatista.pdf >. Acesso em: 03 ago. 2010.
Bisneto. Achilles de Bylon Fres. Grficos Vetoriais em Jogos. Faculdades Jorge
Amado,
2006.
Disponvel
em:
<http://www.programadoresdejogos.com/trab_academicos/achilles_froes.pdf>.
Acesso em: 14 jun. 2010.
Campos, Augusto. O que software livre. BR-Linux. Florianpolis, maro de 2006.
Disponvel em: <http://br-linux.org/linux/faq-softwarelivre>. Acesso em: 29 jul.
2010.
Costa, Maria de Ftima. SVG (Scalable Vector Graphics). Universidade de Coimbra,
Departamento
de
Engenharia
Informtica,
2007.
Disponvel
em:
<http://student.dei.uc.pt/~mcosta/smm.html>. Acesso em: 15 mai. 2010.
Falleiros, Dario Pimente. O Mundo Grfico da Informtica: Editorao eletrnica,
Design grfico & Artes digitais. So Paulo:Futura, 2003.
Fernandes, Amaury. Fundamentos de produo grfica: para quem no produtor
grfico. So Paulo: Rubio, 2003.
Ferreira,
Danilo.
HTML5.
2010.
Disponvel
em:
<http://www.webdesignblog.com.br/html5/#more-802>. Acesso em: 14 ago. 2010.

Html5. Consrcio World Wide Web - W3C. 2010 Disponvel em: <
http://www.w3c.br/cursos/html5/conteudo/>. Acesso em: 03 ago. 2010.
IDG Now! HTML 5: conhea a linguagem que vai revolucionar sua navegao na web.
2009. Disponvel em: <http://idgnow.uol.com.br/internet/2009/06/16/html-5conheca-a-linguagem-que-vai-revolucionar-sua-navegacao-naweb/paginador/pagina_3>. Acesso em: 07 ago. 2010.
Lvy, Pierre. As tecnologias da inteligncia: o futuro do pensamento na era da
informtica. Trad. Carlos Irineu da Costa. Rio de Janeiro: Ed. 34, 1993.
Maia, Rafael. Palestrantes defendem a importncia de mltiplos navegadores.
Redao
Terra,
2010.
Disponvel
em:
<http://tecnologia.terra.com.br/noticias/0,,OI4581056-EI16771,00Palestrantes+defendem+a+importancia+de+multiplos+navegadores.html>. Acesso
em: 03 ago. 2010.
Martins, Gonalo. Utilize correctamente imagens no seu website. 2009. Disponvel
em: <http://weblouca.com/Artigos/utilize-correctamente-imagens-no-seu-website>.
Acesso em: 21 mai. 2010.
Melo, Amanda M.; Baranauskas, Ceclia C. Design e Avaliao de Tecnologia Webacessvel. Anais do XXV Congresso da Sociedade Brasileira de Computao, So
Leopoldo, Universidade do Vale dos Sinos, Unisinos, 2005.
Moreira, Luis Miguel Coelho. Tamanho e resoluo da imagem. FEUP - Faculdade de
Engenharia
da
Universidade
do
Porto.
2008.
Disponvel
em:
<http://paginas.fe.up.pt/~ee03037/tmp/api11/imagem_resol.pdf>. Acesso em: 14 jun.
2010.
Nepomuceno, Carlos; Cavalcanti, Marcos. O conhecimento em Rede. 1. ed. Editora:
Campus. 2006. 160 p.
Nora Koch. Reference Model, Modeling techniques and Development Process:
Software Engineering for Adaptive Hypermedia Systems. KI-Journal (Artificial
Intelligence), Special Issue on Adaptivity and User Modeling, 2000. Disponvel em:
<http://www.pst.ifi.lmu.de/people/staff/koch/publications#2000>. Acesso em: 14
jun. 2010.
Prado, Francisco. Padres Web: os resultados no combinam entre os navegadores.
2010. Disponvel em: <http://franciscoprado.com.br/2010/04/24/padroes-webnavegadores-ie-svg-html5-javascript-flash-plugin-webstandards-browser-chromefirefox>. Acesso em: 24 ago. 2010.
Queiroz, Marco Antonio de. Acessibilidade web, Usabilidade, Teclado e Leitores de
Tela. Originalmente publicado na Bengala Legallink para um novo site. 2006.
Disponvel em: http://acessodigital.net/art_maq_nocoes.html>. Acesso em: 03 ago.
2010.
Ramos, Idmar Junior. Web Developer at Fundao CERTI. Universidade Federal de
Santa Catarina, 2010.
S2 Comunicao Integrada. Frustrao dos consumidores com desempenho de
websites impacta nos negcios. So Paulo: 2010. Disponvel em:

<http://www.s2.com.br/ReleaseTexto.aspx?press_release_id=23401>. Acesso em: 12

jun. 2010.
Scalable Vector Graphics (SVG) 1.1. Consrcio World Wide Web - W3C. 2010
Disponvel em: <http://www.w3.org/TR/SVG/>. Acesso em: 07 ago. 2010.
Shneiderman, Ben. Designing the user interface: Strategies for effective HumanComputer Interaction. 3rd edition. Berkeley, California: Addison Wesley Longman,
Inc., 1998.
Silva, Mauricio Samy. Criando Sites com HTML: Sites de Alta Qualidade com HTML
e CSS. Editora Novatec, 1ed. 2008. 432 p.
Sousa, Ribamar Ferreira de. Melhores prticas para um site mais rpido. Viva o
Linux, 2009. Disponvel em: <http://www.vivaolinux.com.br/dica/Melhores-praticaspara-um-site-mais-rapido>. Acesso em: 16 jabr. 2010.
Tangarife, Timteo; Alvo, Cludia Mont. Estudo Comparativo Utilizando uma
Ferramenta de Avaliao de Acessibilidade para Web. Rio de Janeiro,
Laboratrio de Ergonomia e Usabilidade de Interfaces LEUI, 2005. Disponvel em:
<http://delivery.acm.org/10.1145/1120000/1111394/p313tangarife.pdf?key1=1111394&key2=2845492611&coll=&dl=acm&CFID=15151515
&CFTOKEN=6184618 >. Acesso em: 29 nov. 2006.
Teixeira, Paulo Rodrigo. Web 2.0 BR: a evoluo da web. Criador do 0BR, 2007.
Disponvel em: < http://web2.0br.com.br/conceito-web20/ >. Acesso em: 03 ago.
2010.
Valese, Adriana; Lupinacci, Ana Lucia Ribeiro; Barbosa, Carlos Alberto. et al. Faces
do Design. Editora Rosari, 1 ed. 2003. 246 p.
W3C. What is SVG? Consrcio World Wide Web.
<http://www.w3.org/Graphics/SVG>. Acesso em: 21 jul. 2010.

Disponvel

em:

W3schools. Introduction to SVG. Online Web Tutorials, 2010. Disponvel em:

<http://www.w3schools.com/svg/svg_intro.asp >. Acesso em: 15 jul. 2010.