Curso Web Design | Conheça o SVG e crie imagens vetoriais para navegadores web

Link to Blog do Curso Web Design - Microcamp SP

Conheça o SVG e crie imagens vetoriais para navegadores web

Posted: 06 Mar 2014 06:06 AM PST

No início, havia o abismo e a escuridão no mundo da representação de imagens no plano digital. Então fez-se a luz e surgiu o Web Design, criando uma divisão entre Bitmaps e Vetores. Bitmaps passaram a representar imagens através de uma grade de pixels com informações de cor, ocupando assim a “terra prometida” (a internet), e espalhando sua semente por ela, através de GIFs, JPGs e PNGs. Já os Vetores, em contraposição aos Bitmaps, apesar de leves e de nunca perderem sua qualidade quando ampliados, por serem compostos de descrições geométricas de formas, não eram suportados pelos navegadores e foram “expulsos” dos browsers e da própria web, ficando limitados ao limbo de aplicações desktop para desenho. Certo?

Errado. Brincadeiras à parte com o criacionismo e com o surgimento dos formatos de imagens digitais, já existe uma linguagem para descrever de forma vetorial desenhos e gráficos bidimensionais, de forma estática, dinâmica ou até mesmo animada. Chama-se SVG, abreviatura para Scalable Vector Graphics, ou em bom português, Gráficos Vetoriais Escaláveis (escala enquanto tamanho, que fique bem claro). E sim, ele está revolucionando a forma como vamos inserir gráficos na web.

Visão global do SVG

O SVG foi criado e desenvolvido desde 1999 pelo World Wide Web Consortium, que é o consórcio responsável pela definição de padrões para a web. É considerado um open-source, ou seja, um formato aberto, não sendo propriedade de nenhuma empresa.

SVG são processados como vetores e, portanto, podem ser ampliados a qualquer resolução de tela que estamos vendo, mantendo uma nitidez e qualidade cristalinas que pretendíamos quando os projetamos.

Entre as principais características desse formato/linguagem podemos citar:

• Baseado em XML;
• Padrão e código abertos;
• Gráficos vetoriais e matriciais;
• Pode ser acessado pelo navegador;
• Textos em SVG podem ser indexados, o que significa os motores de busca podem detectar esses textos;
• Diferentes possibilidades de visualizar uma área no mapa;
• Pode ser impresso em qualquer resolução;
• Possibilidade de Zoom sem distorção da qualidade;
• Interação e animação;
• Visualização seletiva de características geográficas (camadas);
• Pode ser englobado dentro de arquivos HTML, ASP, PHP, etc.;
• Interage com várias linguagens de script, como: JavaScript, VBScript, etc.

Informações Técnicas

SVG é uma linguagem para descrever gráficos bidimensionais em XML. Permite três tipos de objetos gráficos: formas gráficas de vetor (por exemplo, caminhos que consistem em linhas retas e curvas), imagens e texto. Objetos gráficos podem ser agrupados, com estilo, transformados e compostos em objetos anteriormente prestados. O texto pode ser adequado para a aplicação XML, o que aumenta a capacidade de pesquisa e acessibilidade dos gráficos SVG. O conjunto de recursos inclui transformações aninhadas, caminhos de recorte, máscaras alfa, efeitos de filtro, objetos de modelo e extensibilidade.

Desenhos SVG podem ser dinâmicos e interativos. O Documento Object Model (DOM) para SVG, que inclui o DOM XML completo, permite a fácil e eficiente animação de gráficos vetoriais via script. Um rico conjunto de manipuladores de eventos, tais como onmouseover e onclick, por exemplo, podem ser atribuídos a qualquer objeto gráfico SVG. Por causa de sua compatibilidade entre outros padrões da Web, recursos como scripting podem ser feitos em elementos SVG e outros elementos XML de diferentes nomes simultaneamente dentro da mesma página da web.

O suporte pelos navegadores permite, dentre outras coisas mesclar SVG com HTML quando for usado XHTML, através de XML Namespaces. Segue uma relação dos navegadores que suportam SVG atualmente, alguns através de plug-in e outros de forma nativa:

● Opera Browser 9.0 ou superior

● Firefox Browser 1.5 ou superior

● Safari Browser

● Google Chrome

● Internet Explorer 9.0 ou superior

Para visualizar uma relação mais completa e atualizada, consulte o site http://www.codedread.com/svg-support.php.

SVG e XML

Você pode trabalhar com SVG em suas páginas web basicamente de duas maneiras: fazendo a incorporação do arquivo XML através das tags <embed>, <object> e <iframe> ou de maneira inline através da tag <SVG>. A estrutura básica de um arquivo SVG não difere em nada em relação a qualquer arquivo XML. Importante observar que um arquivo SVG sempre possuirá a extensão .svg . Observe no exemplo a seguir:

<?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">  <!—O  código SVG é adicionado aqui -->  <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"  width="300px" height="200px"  viewBox="0 0 300 50"  zoomAndPan="disable" >  </svg>

Entendendo o código acima: os atributos "width" e "height" (largura e altura) informam ao navegador a dimensão da imagem no momento da renderização, ou seja, 300 pixels por 200 pixels neste caso.

O atributo "viewBox" como o nome dá a entender, serve para construir a caixa de visualização da imagem. Se estivermos dizendo ao navegador que nosso desenho deverá ter 300 x 200 pixels, é claro que as dimensões mínimas da caixa deverão ser as mesmas, ou a imagem será visualizada de forma "cortada".

O SVG possui algumas propriedades pré-determinadas, que foram desenvolvidas para facilitar a vida de quem deseja trabalhar com ele, como você pode observar na lista a seguir:

<circle> = Círculo
<ellipse> = Elipse
<rect> = Retângulo
<polygon> = Polígono
<line> = Linha
<polyline> = Múltiplas linhas
<text> = Texto
<path> = Caminho

Criando algumas formas em SVG

Linhas

Vamos começar pelo mais simples: criar uma linha. Fazemos isso adicionando o seguinte código em um documento HTML. Em primeiro lugar, usar a tag <svg> e, em seguida, adicione a marcação XML.

<svg>  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0); stroke-width:1"/>  </line>  </svg>

Aqui está o que estamos definindo:

X1: A posição inicial da linha no eixo x
Y1: A posição inicial da linha no eixo-y
X2: A posição final da linha no eixo-x
Y2: A posição final da linha no eixo-y

Assim, por exemplo, se quiséssemos criar uma linha diagonal então poderíamos definir o atributo y2 a 200 e isso traria o ponto final da linha para baixo em 200, por isso a criação de uma linha diagonal. Podemos também aplicar alguns estilos e vamos fazer isso com CSS. Aqui nós usamos alguns estilos inline, mas você pode usá-los em uma folha de estilo externa, se desejar.

Círculos

Círculos podem ser criados de forma semelhante a uma linha, com a exceção de alguns atributos, é claro. Aqui vamos criar um círculo prateado, com uma borda preta e um raio de 50.

<svg>  <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>  </svg>

Retângulos

Como você pode ver até agora, a criação de formas com SVG realmente é bastante simples. Criar um retângulo não é exceção.

<svg>  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>  </svg>

Texto

Como mencionado anteriormente, SVG é muito funcional porque quando incluímos texto, os motores de busca são capazes de busca-lo, ao contrário de outros motores de renderização, como o Flash.

É assim que se adiciona o texto:

<svg>  <text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">Blog Web Design | MicrocampSP</text>  </svg>

Como criar SVG no Illustrator para utilizar em seus trabalhos

A seguir, irei demonstrar de maneira simples como utilizar o Illustrator para criar uma figura e exporta-la para que utilize em seus trabalhos.

Passo 1: Abra o programa e crie um documento novo ou abra uma ilustração qualquer (utilizando linhas e curvas, claro). Eu utilizei como modelo o logo do Blog. A maioria dos logotipos profissionais deve ser criado usando vetores. Se não, então você pode tentar recriá-los você mesmo.

Passo 2: Vá em “Arquivo> Salvar como“, selecione “SVG” nas opções da caixa. Dê ao seu arquivo um nome e clique em “Salvar”.

A caixa de diálogo de opções SVG deve então abrir. A partir daí, selecione “Mostrar código SVG”. Então, um código será mostrado no navegador. Você só precisa copiar tudo, incluindo as tags SVG e inseri-las em seu documento HTML. Simples assim!

Alguns exemplos de SVG:

http://www.w3schools.com/svg/svg_examples.asp

Links úteis:

http://www.w3.org/Graphics/SVG/

http://www.planetsvg.com/

http://www.svgfoundation.org/

http://www.svgx.org/

http://svg.startpagina.nl/

Conclusão

Agora é só uma questão de tempo antes de o SVG fazer parte de todos os dispositivos que usamos, e essa será a grande tendência para o futuro. Usando SVG seremos capazes de criar gráficos escaláveis que tornarão mais simples as visualizações para as diferentes resoluções de tela. Claro, SVG não são recomendáveis para todas as situações, mas para ilustrações vetoriais baseadas na web é definitivamente o melhor caminho a seguir!

E você, o que achou? Conhecia SVG? Acha que realmente eles vão evoluir a ponto de se tornarem essenciais para a web? Deixe suas respostas nos comentários!

Um grande abraço a todos e até o post da semana que vem!

Páginas

quinta-feira, 6 de março de 2014