Em HTML5, você pode incorporar elementos SVG diretamente em suas páginas HTML.
Embed 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> Tente você mesmo " SVG Code explanation:
- Uma imagem SVG começa com um <svg> elemento
- A largura ea altura atributos do <svg> elemento definir a largura e altura da imagem SVG
- O <circle> elemento é usado para desenhar um círculo
- Os atributos cx e cy definir o xey coordenadas do centro do círculo. Se cx e cy são omitidos, o centro do círculo está definido para (0, 0)
- A r atributo define o raio do círculo
- Os atributos de traço e acidente vascular cerebral de largura controlar como o contorno de uma forma aparece. Nós definir o contorno do círculo para a "fronteira" verde 4px
- O fill atributo refere-se à cor dentro do círculo. Nós definir a cor de preenchimento para amarelo
- O fechamento </svg> tag fecha a imagem SVG
Nota: Desde SVG é escrito em XML, todos os elementos devem ser devidamente fechado!