Latest web development tutorials

exemplos SVG

exemplos SVG simples

A SVG exemplo gráfico simples:

Aqui está o arquivo SVG (salvo com o arquivo SVG SVG extensão):

<?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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

SVG análise de código:

A primeira linha contém a declaração XML. Observe que a propriedade independente! Este atributo especifica se o arquivo SVG "está sozinho", ou contém uma referência a um arquivo externo.

standalone = "não" significa que documento SVG tem uma referência a um arquivo externo - neste caso, o DTD.

A segunda e terceira linha faz referência ao externa SVG DTD. O DTD está localizado em "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". O DTD está localizado W3C, que contém todos os elementos SVG permitidos.

código SVG <svg> elemento inicial, incluindo transformando tag <svg> e a marca de fechamento </ svg>. Este é o elemento raiz. largura e altura atributos pode definir a largura e altura deste documento SVG. atributo de versão define a versão SVG utilizado, atributo xmlns define o namespace SVG.

O SVG <círculo> é usado para criar um círculo. cx e atributos cy definir o centro do círculo coordenadas x e y. Se você ignorar essas duas propriedades, então o ponto é ajustado para (0, 0). atributo R define o raio do círculo.

acidente vascular cerebral e acidente vascular cerebral atributo de largura controla como o contorno da forma. Nós contorno do círculo é definida como 2px de largura, bordas pretas.

preencher propriedade de cor é definido dentro da forma. Nós definir a cor de preenchimento para vermelho.

Fechando tag fecha o elemento SVG raiz e do próprio documento.

Nota: Todas as marcas de abertura deve ter marcas de fechamento!