Um exemplo de SVG

SVG é escrito usando XML.

Exemplo SVG

O exemplo a seguir é um exemplo simples de arquivo SVG. Os arquivos SVG devem ser salvos com a extensão .svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Ver exemplo (apenas para navegadores que suportam SVG)

(Para visualizar o código-fonte do SVG, abra este exemplo e clique com o botão direito do mouse na janela. Selecione “Ver código-fonte”.)

Explicação do código:

A primeira linha contém a declaração XML. Observe o atributo standalone! Este atributo determina se este arquivo SVG é “independente” ou contém referências a arquivos externos.

standalone="no" significa que o documento SVG fará referência a um arquivo externo - aqui, é o arquivo DTD.

As linhas segunda e terceira fazem referência a esta DTD externa SVG. A DTD está localizada em “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. A DTD está localizada no W3C e contém todos os elementos SVG permitidos.

O código SVG começa com o elemento <svg>, incluindo a tag de abertura <svg> e a tag de fechamento </svg>. Este é o elemento raiz. As propriedades width e height podem definir a largura e a altura deste documento SVG. A propriedade version pode definir a versão do SVG usada, e a propriedade xmlns define o espaço de nomes do SVG.

O <circle> do SVG é usado para criar um círculo. As propriedades cx e cy definem as coordenadas x e y do centro do círculo. Se essas propriedades forem ignoradas, o ponto será definido como (0, 0). A propriedade r define o raio do círculo.

As propriedades stroke e stroke-width controlam como a contorno da forma é exibido. Definimos a contorno do círculo como 2px de largura, com borda preta.

A propriedade fill define a cor dentro da forma. Definimos a cor de preenchimento como vermelha.

A função das tags de fechamento é fechar o elemento SVG e o documento em si.

Notas:Todos os tags de abertura devem ter tags de fechamento!