Depois de um longo tempo escrevendo sobre diversas outras “coisas” aqui no site, com este post, continuo a série de HTML 5. Até aqui, já falamos sobre alguns dos mais importantes recursos da nova especificação da linguagem, tais como:
- Uma visão geral dos novos elementos (post)
- Utilização da tag <video> (post)
- Utilização da tag <audio> (post)
- Utilização do recurso de canvas (post)
- Utilização do recurso de geolocalização (post)
- Utilização do recurso drag-and-drop (post)
No texto de hoje, falaremos um pouco sobre outro importante recurso disponível na nova especificação – o SVG.
SVG?
SVG é o acrônimo para Scalable Vector Graphics (em português gráficos de vetores escaláveis). Em linhas gerais, SVG disponibiliza um novo modelo para criação de elementos gráficos. É na prática, uma alternativa para se criar imagens sem a utilização dos tradicionais arquivos JPEG, PNG, GIF, BMP, etc.
A pergunta que você deve estar se fazendo neste momento é: mas e o recurso de canvas, não faz rigorosamente a mesma coisa? De maneira direta, a resposta é “sim, possuem a mesma função”. A diferença fundamental entre as abordagens está no “modus operandi” de cada uma. Diferentemente do recurso canvas (escrevi sobre ele aqui) que trabalha on the fly com Javascript, SVG compõe as figuras baseado no modelo XML (veja um bom tutorial sobre esta tecnologia seguindo este link [em inglês]).
Algumas características marcantes do SVG:
- As figuras compostas utilizando SVG não perdem qualidade. Seja ela maximizada (através de recursos de zoom) ou suas dimensões redimensionadas.
- SVG é renderizado da mesma forma, independentemente da resolução do computador cliente, enquanto canvas, depende desta resolução.
- Cada elemento de uma imagem SVG pode ser animado.
- SVG é integrado a outros padrões da W3C, como DOM e XSL.
- SVG é uma recomendação da W3C para elaboração de gráficos.
- Gráficos SVG podem ser criados utilizando qualquer editor de textos.
- Como HTML que é, um gráfico SVG pode ser manipulado por javascript (por exemplo), pode ser indexado, etc.
- SVG é um padrão aberto, uma vez que sua constituição é XML puro.
Atualmente, os browsers que suportam SVG são: Internet Explorer 9 (ou superior), Google Chrome, Mozilla Firefox, Safari e Opera. Versões anteriores do Internet Explorer (como a 8, por exemplo), precisam de plugins para a visualização de figuras SVG. O plugin mais tradicional para este fim é o Adobe SVG Viewer.
Na ocasião em que este post foi escrito, SVG encontrava-se na versão 1.1. Para saber o status atual do projeto na W3C, basta seguir este link.
A Figura 1 apresenta a diferença gerada entre uma imagem JPG e uma imagem SVG. Ela dá a noção exata da importância na utilização do recurso discutido neste post.
Figura 1. Comparação entre uma imagem JPG e outra SVG
Entendendo o XML
Existem basicamente duas formas de se trabalhar com SVG em páginas HTML 5: incorporando o arquivo XML através das tags <embed>, <object> e <iframe> ou de modo inline através da tag <SVG>. Mas antes de apresentarmos estes modelos, é importante entender a estrutura básica de um arquivo SVG (que sempre possuirá a extensão .svg). Observe o exemplo apresentado pela Listagem 1.
[xml]
<?xml version=”1.0″ encoding=”ISO-8859-1″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 20010904//EN”
“http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd”>
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink” xml:space=”preserve”
width=”350px” height=”120px”
viewBox=”0 0 200 50″
zoomAndPan=”disable” >
<!– Adicione o código SVG aqui –>
</svg>
[/xml]
Listagem 1. Estrutura básica de uma página SVG
Como você pode observar, a estrutura básica de um arquivo SVG não difere em nada em relação a qualquer arquivo XML. Algumas observações importantes em relação ao arquivo apresentado pela Listagem 1 são:
-
Os atributos “width” e “height” informam ao browser a dimensão da imagem no momento da renderização. Neste caso, a imagem deverá ter 350 pixels (comprimento) por 120 pixels (altura).
- O atributo “viewBox” é utilizado para construir (como o próprio nome sugere) a caixa de visualização da imagem. Se estamos dizendo ao browser que nosso desenho deverá ter 350px por 120 px, evidentemente que as dimensões mínimas da caixa deverão ser as mesmas. Caso, contrário, sua imagem será visualizada de forma limitada (entenda-se, cortada).
Uma menção importante neste momento é: SVG possui algumas propriedades pré-construídas, criadas para facilitar a vida dos desenvolvedores, as quais listamos a seguir:
- Retângulo <rect>
- Círculo <circle>
- Elipse <ellipse>
- Linha <line>
- Múltiplas linhas <polyline>
- Polígono <polygon>
- Caminho <path>
- Texto <text>
Exemplo 1: Construindo um exemplo básico (Hello World)
Conforme mencionado anteriormente, podemos incorporar o código SVG através de tags de embeding ou ainda, através de uma tag específica. Vamos iniciar utilizando a segunda opção. Vou utilizar o WebMatrix para a construção dos arquivos SVG, entretanto, você pode utilizar qualquer outro editor de textos ou ainda, ferramentas de construção de imagens vetoriais, como o Corel Draw, por exemplo.
Listagem 2. Escrevendo um texto utilizando SVG inline
Considerações a serem realizadas sobre o código apresentado pela Listagem 2:
- Adicionamos uma nova tag “svg” e configuramos então algumas propriedades. Como você pôde perceber, trata-se de uma diretiva XML tradicional. Basicamente, o que “dissemos” ao browser foi: crie um container SVG, cuja dimensão máxima é 350 pixels (comprimento) por 120 pixels (altura), com área de visualização “0 0 200 50” sem zoom.
O resultado do processamento do código apresentado na Listagem 2 pode ser visualizado na Figura 2 a seguir.
Figura 2. O resultado do processamento do código apresentado na Listagem 2
Exemplo 2: Desenhando com SVG
Na sequência, o que faremos com SVG é criar um desenho um pouco mais complexo. Faremos um conglomerado de figuras circunferenciais vistas sob certa perspectiva. Criaremos em um arquivo XML a parte e o incorporaremos a página principal através da tag embed.
Listagem 3. Criando um desenho em perspectiva
O código é simples e dispensa maiores comentários. Em linhas gerais, o que estamos fazendo aqui é: criar três elipses (note a utilização da diretiva SVG “ellipse”), configurando seus containers de exibição (note a utilização das propriedades “cx”, “cy”, “rx” e “ry”) e estilizando o objeto (note a utilização da propriedade style).
O resultado da execução do código apresentado pela Listagem 3 pode ser visualizado na Figura 3 (a seguir).
Figura 3. Elipses em perspectiva
Conclusões
SVG é um importante recurso que permite ao desenvolvedor web criar elementos gráficos interessantes com HTML 5. Fatores como maior performance no processo de renderização e simplicidade de criação através de ferramentas para editoração gráfica (CorelDraw, por exemplo), são decisivos na opção pela adoção do recurso.
Com isso, sua imaginação passa a ser o limite!
Era isso. Até a próxima!
Facebook
Twitter
Instagram
LinkedIn
RSS