Inkscape Brasil

Siga-nos no Twitter Siga-nos no Identi.ca
Versão Estável 0.91 Baixe Agora!

Tópicos Pais: Artigos

O que é SVG?

Scalable Vector Graphics (ou simplesmente SVG) é um formato aberto[1] de imagem vetorial 2D especificado pela W3C[2]. O SVG é um dialeto de XML[3], assim como o XHTML (a versão mais recente do HTML), por isso pode facilmente ser aprendido editado em um simples editor de texto.


Formato Aberto

Formatos abertos são aqueles cujas especificações estão disponíveis ao público e estas não tem um dono, mas sim uma entidade gerente, como a ISO ou a W3C.

Essa abertura provê independência para a implementação de suporte ao formato em softwares de empresas concorrentes ou comunidades de software livre. Com isso documentos tem uma maior chance de serem apresentas da forma como foram criados em ambientes computacionais distintos.

W3C

O World Wide Web Consortium é um consórcio internacional que agrega mais de 400 entidades publicas e privadas, para definir os padrões da Web como o HTML, SVG, CSS, DOM, PNG, XML, dentre vários outros, buscando usar todo o potencial da web, com acessibilidade.

XML

Extensible Markup Language (XML) é um formato bastante simples e flexível, baseado em uma estrutura hierárquica de tags, que permite registrar diferentes tipos e estruturas de dados em um arquivo texto.

Saiba mais na Wikipédia: http://pt.wikipedia.org/wiki/XML

Mas, para começar, o que é uma imagem vetorial?

Veja as imagens abaixo:

Borboleta Bitmap   Borboleta Vetorial
Você já deve ter percebido que quando aumentamos uma fotografia ela começa a ficar quadriculada, você começa a perceber os pixels dela. Essa é a borboleta da esquerda. A imagem bitmap define uma matriz de pixels e não podemos definir o que existe entre um pixel e outro, por isso sempre existe um limite na resolução máxima de uma imagem bitmap. Por não podermos ter certeza das cores reais entre um pixel e outro, as ações de rotacionar, esticar, inclinar também são operações destrutivas em um bitmap.

A borboleta da direita é vetorial, por isso podemos aumenta-la, rotaciona-la, inclina-la e etc sem problema. Na imagem vetorial temos um plano 2D e pontos (que chamamos de nós) ligados entre si. Um conjunto de nós interligados definem um caminho. Se você aumentar o zoom, você aumenta a escala do desenho. Os nós se afastam e as linhas entre eles ficam maiores. O nível de detalhismo pode diminuir, mas a imagem não fica turva.

Ok! Vamos desenhar com um editor de texto?

Vamos ver na prática o que é esse tal de SVG. Abra um editor de texto plano, isto é, um editor de texto sem formatação (no GNU/Linux use o GEdit ou KEdit, no Windows use o Bloco de Notas), e escreva isso: Desenho

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

  <circle cx="100" cy="100" r="90" stroke="#000" stroke-width="10" fill="#FD0" />

  <path stroke="#000" stroke-width="10" d="M 80,60 L 80,120" />
  <path stroke="#000" stroke-width="10" d="M 120,60 L 120,120" />

  <path stroke="#000" stroke-width="10" fill="none" d="M 40,120 C 50,180 150,180 160,120" />

</svg>
Salve esse texto como desenho.svg e abra-o com seu Firefox ou com o nosso querido Inkscape. Você verá aquele rostinho amarelo sorridente. Mas como? Vamos aos detalhes...

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

Essa é a tag documento (a mãe de todas as outras) do SVG. O que são tags? bem, leia sobre isso na Wikipédia: http://pt.wikipedia.org/wiki/Tag_(programação)

Sobre os atributos:

<circle cx="100" cy="100" r="90" stroke="#000" stroke-width="10" fill="#FD0" />

Circle é um dos elementos primitivos do SVG. Este elemento ajuda a definir um círculo mais facilmente aproveitando as características especiais deste elemento geométrico. Poderíamos fazer o mesmo desenho com nós formando um caminho circular, mas seria desnecessariamente mais complicado.

Sobre os atributos:

<path stroke="#000" stroke-width="10" d="M 80,60 L 80,120" />

Este é o elemento que te dá total liberdade de definição de formas. Nele você define uma coleção de nós e como eles se ligam entre sí.

Só precisamos ver sobre o atributo d aqui. O valor dele sempre começa com M que significa "mover para". na seqüência colocamos a primeira coordenada x,y para posicionar o primeiro nó. Existem várias formas de ligar esse ponto ao ponto seguinte, isso informamos com a letra que vem em seguida. O L significa "linha para" e depois dele colocamos a coordenada do nó seguinte e entre eles temos uma linha reta http://www.w3.org/TR/SVG11/paths.html#PathData

<path stroke="#000" stroke-width="10" fill="none" d="M 40,120 C 50,180 150,180 160,120" />

Note que nesse path definimos fill="none". Isso porque, por padrão, todo elemento tem preenchimento preto e a curva do sorriso provê área para esse caminho e tendo área, tem pintura de preenchimento. none significa nenhum, assim retiramos o preenchimento.

Esse atributo d já está um pouco mais complicado que o primeiro. E ainda temos apenas dois nós, imagine desenhar um rosto. É por isso que precisamos de uma ferramenta de desenho para o trabalho artístico. Mas estudar o formato SVG ainda é válido para sabermos o que está acontecendo por traz do editor e o que podemos criar com programas... Esse conhecimento é subsidio para uma imaginação plausível. wink

Bézier Animado

Opa! Voltando ao caso deste d. O primeiro nó está na posição 40,120 e a linha que o liga ao seguinte é uma curva bézier, definida com a letra C. Nessa curva a linha é atraída por pontos no espaço chamados alças de controle, um vinculado ao no onde sai a linha e outro ao nó onde ela chega. Por isso temos três coordenadas após o C, a primeira é a alça do nó de saida, a segunda é a alça do nó de chegada e a terceira é o nó de chegada em sí. Veja na animação ao lado como as curvas bézier são modificadas com a movimentação das alças e nós.

</svg>

E como você já deve saber, tags de fechamento não recebem atributos.


Conheça os outros elementos do SVG e detalhes de suas características na especificação da W3C.


SVG na Web

O formato SVG foi criado para ser o padrão de imagem vetorial da Web (mas claro que não está restrito a este fim). Você já pode publicar imagens SVG em qualquer página Web que serão vistas por usuários de Firefox, Opera, Konqueror e outros. Infelizmente o IE sempre fica um tanto distante dos padrões, mas existe um plugin da Adobe que permite visualizar essas imagens no IE também.

Você é um Webdesigner antenado? Então com certeza conhece os benefícios e usa bastante CSS, pois então saiba que você pode usar folhas de estilo em SVG também. Estilo inline, classes formatadas em um arquivo CSS separado... quase tudo como no HTML, claro que aqui temos alguns atributos diferentes, dada a natureza do formato.

Para tornar aplicações web mais ricas, Screenshot mesclagem.xml aproveite o fato de que XHTML e SVG podem ser mesclados, via XMLNamespace, em um único arquivo, como um único código. Quer saber como? Copie o código abaixo e salve em um arquivo com o nome mesclagem.xml. Com este exemplo você verá como é simples mesclar estes formatos e acessar os elementos com as mesmas técnicas de sempre.

Este exemplo modifica apenas o conteúdo de um elemento de texto e a cor de um elemento círculo, mas qualquer atributo de qualquer elemento pode ser modificado (seja o preenchimento, posição, tamanho, formato, etc...). E como já conhecemos no HTML, no SVG também podemos criar novos elementos com o método createElementNS. Com SVG temos dinamismo e interação livre e de alta qualidade para a web. wink

Para saber mais:

E agora... O que faço com esse conhecimento?

Artigo em construção

Existem vários fins onde o SVG pode ser muito bem usado. Serão apresentados algumas possibilidades de uso na seqüencia, mas tudo depende da sua imaginação.

Gráficos Dinâmicos

HTML dinâmico já não é segredo nenhum. Com o início da Web surgiu a idéia do CGI, para gerar código HTML no momento da requisição de uma página qualquer, entregando um conteúdo adequado ao visitante. Foi o início da interação na Web.

Imagens dinâmicas não são tão comuns, mas já são bastante usadas. Provavelmente você já viu aqueles testes para garantir que apenas seres humanos consigam postar comentários em blogs. Aquelas imagens são criadas por programas no servidor Web, no momento da sua visita por programas como o ImageMagick ou a biblioteca GD. A grande diferença é que gráficos criados no lado do servidor ainda tem uso bastante limitado e exigem muito do servidor, mas com SVG novas portas se abrem para o desenvolvimento Web. Enquanto a criação dinâmica de HTML se resume a criação de um arquivo de texto, o qual só será renderizado pelo ciente (o navegador), a criação dinâmica de imagens na Web tem se resumido a criação de imagens bitmap que são renderizadas no servidor, e o produto final (binário) é enviado para o navegador, ocupando, em geral, muito mais banda que o necessário para a informação representada.

Estamos falando muito de Web aqui, mas a criação de gráficos dinâmicos não se restringe a Web e o uso de SVG na a web não se restringe a geração dinâmica, como já foi bem dito anteriormente. Bem, vamos ver logo uma forma de criarmos um SVG dinamicamente. O exemplo abaixo, chamado svg.php, é um simples código, hã... é... PHP (wow!) para criar dinamicamente um círculo verde, cujo raio é definido por uma variável enviada pelo visitante.

<?
  header("Content-type: image/svg+xml");
?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="<?= $_GET["raio"] ?>" fill="green" />
</svg>
Se você visitar o script acima com uma URL como esta: http://meu.site/svg.php?raio=50 , você verá um círculo verde com 50 pixels de raio. Note que é preciso redefinir o Content-type, pois o PHP por padrão informa que o conteúdo é HTML e o navegador acreditaria nisso.

Um bom uso deste conhecimento é a criação gráficos estatísticos automaticamente. Como já é feito pelo Google:
http://code.google.com/webstats/index.html (mas isso não é um exemplo de beleza)

Jogos

Interação com o Usuário em Desktop

Aulas de Matemática

Objetos Educacionais

"Objetos educacionais podem ser definidos como qualquer recurso, suplementar ao processo de aprendizagem, que pode ser reusado para apoiar a aprendizagem. O termo objeto educacional (learning object) geralmente aplica-se a materiais educacionais projetados e construídos em pequenos conjuntos com vistas a maximizar as situações de aprendizagem onde o recurso pode ser utilizado."
Fonte: "Reusabilidade de Objetos Educacionais"
M FABRE, LMR Tarouco, FR Tamusiunas - Renote-Revista Novas Tecnologias na Educação. Porto Alegre: …, 2003



create new tag

ArtigoForm edit

Título O que é SVG?
Autor AurelioAHeckert
Data 13/03/2008
rev 17 em 12 Nov 2013 por AurelioAHeckert
Editar Anexar Versões Mais...

Todo material do sítio Inkscape Brasil é propriedade do grupo Inkscape Brasil e pode ser reproduzido livremente, desde que permaneça livre e a fonte seja citada, seguindo os termos da licença Creative Commons (by-sa).

Inkscape é um Software Livre, distribuido sobre Termos GNU-GPL.

eXTReMe Tracker
Inkscape - Open Source vector graphics editor SVG - Scalable Vector Graphics TableLess - Coerência, Simplicidade e Acessibilidade no código HTML Esse documento é XHTML 1.0 Valido! Esse documento contém CSS-2 Valido! Debian - GNU/Linux TWiki - Ambiente Web Colaborativo Colivre - Cooperativa de Tecnologias Livres