SVG em HTML
Você pode incorporar elementos SVG diretamente em suas páginas HTML.
Incorporar SVG diretamente em páginas HTML
Aqui está um exemplo de um gráfico SVG simples:
e aqui está o código HTML:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Explicação do código SVG:
- Uma imagem SVG começa com um elemento <svg>
- Os atributos de largura e altura do elemento <svg> definem a largura e a altura da imagem SVG
- O elemento <circle> é usado para desenhar um círculo
- Os atributos cx e cy definem as coordenadas xey do centro do círculo. Se cx e cy não estiverem definidos, o centro do círculo será definido como (0, 0)
- O atributo r define o raio do círculo
- Os atributos traço e largura do traço controlam como o contorno de uma forma aparece. Definimos o contorno do círculo para uma "borda" verde de 4px
- O atributo de preenchimento refere-se à cor dentro do círculo. Definimos a cor de preenchimento para amarelo
- A tag de fechamento </svg> fecha a imagem SVG
Nota: Como o SVG é escrito em XML, todos os elementos devem ser fechados corretamente!