SVG em HTML | Tutorial com exemplos

O HTML5 fornece a tecnologia SVG (sigla de gráficos vetoriais escaláveis) para desenhar gráficos bidimensionais baseados em vetores em sites. Ao contrário de outros formatos de imagem (como PNG, JPG, etc.) SVG não depende dos pixels, em vez disso, utiliza dados vetoriais.

World Wide Web Consortium (W3C) recomenda a tecnologia SVG para desenhar gráficos em um site. Em html A tag é usada como um contêiner para gráficos SVG e, usando SVG, podemos desenhar caminhos, círculos, retângulos, etc. Este artigo o guiará sobre como trabalhar com imagens SVG e apresentará uma visão geral detalhada nos seguintes aspectos:

• Noções básicas de SVG
• Como desenhar linha SVG em html
• Como desenhar círculo SVG em html
• Como desenhar retângulo SVG em html
• Como desenhar retângulo arredondado de SVG em html
• Como desenhar o SVG Polygon em html
• Como desenhar svg eclipse html

Então vamos começar!

Noções básicas de SVG

Os gráficos vetores escaláveis ​​determinam os gráficos vetoriais/imagens baseados em XML para as tecnologias da Web. Os arquivos SVG podem ser animados e podemos integrá -los a outros padrões W3C como DOM e XSL. SVG fornece imagens de alta qualidade i.e. Se alguém zoom em uma imagem SVG, a qualidade da imagem não seria afetada.

Como desenhar linha SVG em html

Tag html pode ser usado dentro do Tag para desenhar uma linha. O exemplo abaixo do gol.

Exemplo

A seguinte peça de código desenha uma linha simples:

Linha SVG não suportada!

Aqui no trecho acima, x1, y1 são os pontos de partida da linha e x2, y2 são os pontos finais da linha. Enquanto especificamos a cor da linha no atributo de estilo:

A saída verifica se uma linha de cor azul é desenhada de acordo com as posições estabelecidas por seus atributos.

Como desenhar círculo SVG em html

Tag html pode ser usado dentro do Tag para desenhar um círculo.

Exemplo
O snippet abaixo dado permitirá que você guie para criar um círculo SVG:

Círculo SVG não suportado!

Especificamos o valor do eixo x e do eixo y como 40 e 50, respectivamente, juntamente com o raio de 30 pixels. A seguir será a saída:

A saída verifica se o círculo é desenhado em cor azul e cheio de cor cinza.

Como desenhar retângulo SVG em html

A tag pode ser usada dentro da tag para desenhar um retângulo.

Exemplo

O snippet de código a seguir define a largura, altura do retângulo SVG como 250, 100 respectivamente e o retângulo será preenchido com a cor cinza.

Especificamos a cor do golpe e a largura do golpe como azul e 5 respectivamente. A seguir será a saída:

Como desenhar retângulo arredondado de SVG em html

Temos que especificar os atributos RX, RY na tag para desenhar cantos arredondados svg retângulo.

Exemplo

Vamos estender um pouco o exemplo anterior e definir o valor de RX, RY como 10px para desenhar os cantos arredondados do retângulo SVG:

O trecho de código acima exibe a seguinte saída:

Como desenhar o SVG Polygon em html

HTML fornece uma tag para desenhar uma forma que tenha pelo menos 3 lados. Um atributo chamado "pontos" pode ser usado para especificar o eixo x e o eixo y de todos os lados.

Exemplo

Vamos considerar o seguinte snippet de código para entender como definir o eixo x e o eixo y de uma forma:

A tag pode ser usada para desenhar formas diferentes como uma estrela SVG ou qualquer outra forma fechada.

Como desenhar svg eclipse html

A tag é usada para desenhar uma forma de eclipse, é muito semelhante ao círculo. O círculo SVG tem um raio horizontal e vertical igual, mas no eclipse, o raio horizontal e vertical é diferente um do outro.

Exemplo

O trecho abaixo do dado demonstra como desenhar um eclipse em html onde rx = “150” é o raio horizontal e ry = "75" é o raio vertical do eclipse:

O trecho de código acima mostra o seguinte resultado:

A borda/golpe de cor azul e a forma de eclipse cheia de cinza verificaram que a tag funcionou corretamente.

Conclusão

Este artigo demonstrou como desenhar imagens básicas de SVG em html. Dentro da tag, várias tags podem ser utilizadas para desenhar diferentes imagens SVG, como ,,, e tags podem ser usadas para desenhar as linhas SVG, círculos, retângulos, polígonos e formato de eclipse, respectivamente, respectivamente. Dentro dessas tags, diferentes atributos como derrame e largura de derrame podem ser usados ​​para definir a borda e a largura da forma, respectivamente.