SVG no HTML

Você pode embrutar o elemento SVG diretamente em uma página HTML.

Embrutar SVG diretamente em uma página HTML

Aqui está um exemplo simples de gráfico SVG:

Desculpe, seu navegador não suporta SVG embutido.

Este é o código HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Meu primeiro SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Experimente você mesmo

Explicação do código SVG:

  • A imagem SVG começa com o elemento <svg>
  • As propriedades width e height do elemento <svg> definem a largura e a altura da imagem SVG
  • O elemento <circle> é usado para desenhar círculos
  • As propriedades cx e cy definem as coordenadas x e y do centro do círculo. Se cx e cy não forem definidos, o centro do círculo será definido como (0, 0)
  • A propriedade r define o raio do círculo
  • As propriedades stroke e stroke-width controlam a exibição da contorno da forma. Vamos definir o contorno do círculo como uma "borda" verde de 4 pixels
  • A propriedade fill define a cor interna do círculo. Vamos definir a cor de preenchimento como amarelo
  • Fechar etiqueta </svg> imagem SVG

Atenção: Como o SVG é escrito em XML, todos os elementos devem ser fechados corretamente!