Os exemplos abaixo sao alguns dos que sao explorados no curso X500 - Scalable Vector Graphics da Argo Navis. Exemplos similares sao usados em exercicios e demonstracoes.
Abra em browsers diferentes para conferir as diferencas. O resultado esperado deve ser similar ao PNG.
Nao foram feitas alteracoes para adaptar o codigo de forma que rode melhor em um browser ou outro, nem para adapta-los as extensoes JavaScript que permitem que alguns recursos sejam suportados em browsers que nao implementam SVG, como Internet Explorer 8 ou anterior.
Para ver o código-fonte, use o menu "Visualizar Fonte" ou "View Source" do seu browser.
| 1. Tabuleiro de xadrez com pecas (usa grupos, estatico). | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 2. Circuito Eletronico (usa symbol, estatico) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 3. Texto girando em volta de um c’rculo (animação SMIL) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 4. Texto SVG usando gradiente, sombra, brilho, filtros e efeitos de luz (estatico) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 5. Pontos coloridos aleatorios (interativo, com JavaScript externo: clique em um ponto para criar outros) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 6. Clique na figura alongada para ve-la mover-se (animação com JavaScript embutido) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 7. Peixe girando em órbita do sol (animação SMIL) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 8. Gr‡fico de torta gerado via XSLT (usa transform, estatico) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
| 9. Órbitas animadas de planetas trans-netunianos* (SMIL, gerado via XSLT) | SVG | PNG | Codigo | SVGWeb | Ample | canvg |
* A aplicacao que gera outros graficos similares a este esta online neste site: Gerador de Orbitas do Sistema Solar.
Legenda
