SVG é um formato gráfico no qual as formas são especificadas em XML. O XML é então renderizado por um visualizador SVG. Hoje, a maioria dos navegadores da web (IE 9+, Chrome e Firefox, Opera) suportam SVG nativamente. Esta é apenas uma referência rápida sobre alguns elementos SVG comuns. A maioria desses exemplos são do tutorial de svg de Jenkov . Verifique a documentação do svg para mais informações

g (grupo)

O elemento SVG <g> é usado para agrupar formas SVG. Depois de agrupado, você pode transformar todo o grupo de formas como se fosse uma única forma.

<svg>        
    <g>
      <circle cx="30" cy="30" r="15" style="stroke:#000; fill:#000"/>
      <rect x="50" y="20" height="50" width="75"
          style="fill: #000"/>
    </g>    
</svg>

rect

Um elemento SVG <rect> representa um retângulo.

<svg>
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#006600; fill: #000"/>
</svg>

círculo

O elemento SVG <circle> é usado para desenhar círculos.

<svg>
  <circle cx="40" cy="40" r="24" style="stroke:#000; fill:#000"/>
</svg>

elipse

O elemento de elipse SVG é usado para desenhar elipses com a definição x e dy para o raio definido

<svg>
  <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: #ff6666;"/>
</svg>

linha

O elemento <line> SVG é usado para desenhar linhas

<svg>
<line x1="0"  y1="10" x2="0" y2="100" style="stroke:#006600;"/>
</svg>

polilinha

O elemento SVG <polyline> é usado para desenhar várias linhas conectadas

<svg>
    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

caminho

O elemento <path> SVG é usado para desenhar formas avançadas combinadas de linhas, arcos, curvas, etc. com ou sem preenchimento.

<svg>
    <path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/>
</svg>

texto

O elemento <texto> SVG é usado para desenhar texto em uma imagem SVG.

<svg>
  <text x="20" y="40">Example SVG text 1</text>
</svg>

animações

É possível animar formas em uma imagem SVG. Existem várias maneiras de animar formas SVG, incluindo:

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>

Aqui está um exemplo simples de animação de um círculo para se mover ao longo do eixo x.

<svg>
<circle cx="30" cy="30" r="25" style="stroke: none; fill: #000;">
    <animate attributeName="cx" attributeType="XML" from="30"  to="470" begin="0s" dur="5s" fill="remove" repeatCount="indefinite"/>
</circle>
</svg>