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 -
- Novos elementos do HTML5
- SVG vs EPS
- Blocos HTML
- Quadros HTML