Fórum | tutoriais mais recente desenvolvimento web
 

SVG Tutorial


SVG significa Scalable Vector Graphics.

SVG define gráficos vetoriais em formato XML.


Exemplos Em cada capítulo

Com o nosso "Try it Yourself" editor, você pode editar o SVG e clique em um botão para ver o resultado.

Exemplo SVG

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Tente você mesmo "

O que você já deve saber

Antes de continuar, você deve ter alguma compreensão básica do seguinte:

  • HTML
  • XML básica

Se você quer estudar estes assuntos primeiro, encontrar os tutoriais em nosso Home page .


O que é SVG?

  • SVG significa Scalable Vector Graphics
  • SVG é usado para definir gráficos baseados em vectores para a Web
  • SVG define os gráficos em formato XML
  • Gráficos SVG não perde qualquer qualidade se forem ampliada ou redimensionada
  • Cada elemento e todos os atributos em arquivos SVG podem ser animados
  • SVG é uma recomendação W3C
  • SVG integra com outros padrões W3C, tais como o DOM e XSL

SVG é uma Recomendação W3C

SVG 1.0 tornou-se uma Recomendação W3C em 4 de Setembro de 2001.

SVG 1.1 tornou-se uma Recomendação W3C em 14 de Janeiro de 2003.

SVG 1.1 (Second Edition) tornou-se uma Recomendação W3C em 16 de Agosto de 2011.


Vantagens SVG

Vantagens do uso de SVG sobre outros formatos de imagem (como JPEG e GIF) são:

  • As imagens SVG podem ser criados e editados com qualquer editor de texto
  • As imagens SVG pode ser pesquisado, indexado, roteirizado e comprimido
  • As imagens SVG são escaláveis
  • As imagens SVG podem ser impressas com alta qualidade em qualquer resolução
  • As imagens SVG são zoomable (and the image can be zoomed without degradation)
  • SVG é um padrão aberto
  • arquivos SVG são XML puro

O principal concorrente para SVG é o Flash.

A maior vantagem SVG tem mais de Flash é o cumprimento de outras normas (eg XSL and the DOM) . Flash depende de tecnologia proprietária que não é open source.


Criação de SVG Imagens

As imagens SVG podem ser criados com qualquer editor de texto, mas muitas vezes é mais conveniente para criar imagens SVG com um programa de desenho, como o Inkscape .