SVG HTML - Os 10 principais exemplos de SVG HTML com sintaxe e código

Índice:

Anonim

Introdução ao HTML SVG

Usar imagens em HTML é incrível para sites ricos em multimídia. Tudo o que você precisa fazer é adicionar uma tag ao código HTML e viola, seu navegador exibirá e até adicionará um link à imagem de sua escolha. Fica um pouco preocupante em situações em que você sabe que a imagem ou o diagrama será ampliado porque um JPG.webp ou PNG não mostrará mais detalhes depois que o zoom ultrapassar a resolução. SVG é a solução para esse problema. SVG significa Scalable Vector Graphics. Como o nome sugere, eles podem ser ampliados conforme necessário e os detalhes nunca desaparecem. Os SVGs não são exclusivos da tecnologia da Web, mas poder usá-los em HTML é realmente legal.

O SVG é útil para diagramas, vetores, tabelas e gráficos no navegador. Vamos aprender sobre como você pode usá-los em detalhes aqui.

Sintaxe de incorporar SVG em HTML

Assim como o uso de telas no HTML5, existe uma tag simples que você pode usar para incorporar SVG nas páginas HTML5. A sintaxe é a seguinte:


…. …. …. ….

Exemplos de SVGs em HTML

Agora, vamos dar uma olhada em alguns exemplos de vetores que podem ser criados e incorporados no HTML5:

Exemplo # 1 - Desenhando um retângulo via SVG em HTML

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 2 - Desenhando um quadrado com cantos arredondados em SVG

Para um quadrado com cantos arredondados, teremos que definir o raio dos cantos com o uso de rx, ry, além do tamanho e das dimensões do quadrado.

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 3 - Desenhando um círculo em SVG com contorno e arquivamento de cores dentro dele

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 4 - Desenhando uma linha reta com SVG em HTML5

Podemos usar a tag para desenhar uma linha reta nos SVGs HTML5, também é possível definir a cor, a espessura da linha e a posição da mesma.

Código:




Resultado:

Exemplo # 5 - Desenhando um eclipse via SVG em HTML5

Podemos usar a tag para desenhar um eclipse em SVGs HTML5, a cor e a posição dele também podem ser definidas juntamente com o raio.

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 6 - Criando um polígono com SVG em HTML5

A tag pode ser usada em SVGs para criar polígonos. Na tag, somos obrigados a mencionar as posições de cada ponto. Cores de preenchimento, espessura do contorno etc. também podem ser definidas no código.

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 7 - Criando uma polilinha com SVG em HTML5

A polilinha é usada para desenhar uma forma que consistirá apenas de uma linha reta. Lembre-se de que essas linhas também devem estar conectadas. Aqui está um exemplo de implementação de polilinha no HTML5.

Código:




Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 8 - Desenho de texto com SVG em HTML5

O texto pode ser necessário em qualquer SVG em muitas situações, como rotular um gráfico, etc. Felizmente, existe uma tag no SVG que pode ser usada. O texto pode ser definido em qualquer posição no SVG e você também pode personalizar sua cor e outros detalhes.

Código:



Here is an example, it's very examply
Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 9 - Desenhando uma estrela com SVG em HTML5

Agora que terminamos o básico, vamos criar uma estrela que será criada com a ajuda do SVG.

Código:



style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.


style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.

Resultado:

Exemplo # 10 - Usando Gradiente Linear no SVG

Você pode usar o Gradiente linear e radial no SVG com muitas linhas HTML Canvas. O gradiente deve ser aninhado na tag. Essa tag é marcada na tag SVG para indicar seu uso. Vamos dar uma olhada em um exemplo que usa Gradient em um eclipse.

Código:







Sorry but this browser does not support inline SVG.

Resultado:

Conclusão

No caso de sites em que diagramas e gráficos devem ser usados, os SVGs são um salva-vidas. A maioria dos navegadores modernos também suporta SVG, além de serem escaláveis. Outro benefício do uso do SVG é o tamanho do arquivo. Por ser apenas um pouco de código, os SVGs podem ter um espaço muito pequeno na memória e na largura de banda consumidas em comparação com as Imagens tradicionais.

Artigos recomendados

Este é um guia para HTML SVG. Aqui discutimos a introdução e os 10 principais exemplos de HTML SVG com explicação e implementação de código. Você também pode consultar os seguintes artigos para saber mais -

  1. Novos elementos do HTML5
  2. SVG vs EPS
  3. Blocos HTML
  4. Quadros HTML