HTML SVG: guia para gráficos vetoriais escalonáveis

HTML SVG é uma combinação de duas tecnologias:

  • HTML – HTML significa Hypertext Markup Language, que é a linguagem de marcação padrão usada para criar páginas da web.
  • SVG – SVG é uma linguagem de marcação usada para criar gráficos vetoriais.

Combinando ambos, é possível criar páginas da Web com gráficos vetoriais escaláveis ​​que são exibidos em um navegador.

Neste artigo, exploraremos os fundamentos do HTML SVG e como criar gráficos vetoriais escaláveis ​​usando exemplos.

Índice-

HTML SVG: o que é?

Scalable Vector Graphics, ou SVG , é um formato de arquivo popular usado para criar gráficos vetoriais que podem ser ampliados ou reduzidos sem perda de qualidade.

SVG é uma linguagem de marcação baseada em XML e é usada para criar imagens baseadas em vetores que podem ser exibidas na web.

As imagens SVG são diferentes de outros formatos de imagem como JPEG ou PNG , que são baseados em raster.

As imagens baseadas em raster são compostas de pixels individuais e, quando você as amplia, elas se tornam pixeladas.

As imagens SVG, por outro lado, são compostas por formas vetoriais, que podem ser ampliadas ou reduzidas sem perda de qualidade.

HTML SVG – Introdução

Para usar SVG em HTML, você precisa adicionar a tag <svg> ao seu código.

A tag <svg> é usada para definir um contêiner para gráficos SVG. Dentro da tag <svg>, você pode adicionar várias formas e elementos usando outras tags SVG, como <rect>, <circle>, <line> e <path>.

Aqui está um exemplo de um código SVG básico:

<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" />
</svg>

O código acima criará um contêiner SVG de 100 × 100 e adicionará um retângulo a ele. O retângulo tem uma coordenada x de 10, uma coordenada y de 10, uma largura de 80 e uma altura de 80.

Atributos HTML SVG

Os elementos HTML SVG podem ter vários atributos que definem sua aparência e comportamento.

Abaixo estão alguns dos atributos mais comuns usados ​​em SVG:

Atributos Visão geral
largura e altura Esses atributos definem o tamanho do contêiner SVG.
preencher e traçar O atributo fill define a cor do interior do elemento, enquanto o atributo stroke define a cor do contorno do elemento.
opacidade Este atributo define o nível de transparência do elemento, com valor 0 sendo totalmente transparente e 1 sendo totalmente opaco.
transformar Esse atributo é usado para aplicar transformações ao elemento, como dimensionamento, rotação e translação.

Criando Formas com HTML SVG

O SVG fornece várias tags que podem ser usadas para criar várias formas, incluindo retângulos, círculos, elipses, linhas e polígonos.

Abaixo estão alguns exemplos de como criar essas formas usando SVG:

Círculo SVG

Use a tag para criar um círculo. Você pode definir as coordenadas do centro e o raio do círculo usando os atributos cx , cy e r .

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="6" fill="red"></circle>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Retângulo SVG

Use a tag <rect> para criar um retângulo. Você pode definir as coordenadas x e y , largura e altura do retângulo usando os atributos correspondentes.

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="80">
<rect width="300" height="80" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Polígono SVG

Use a tag <polygon> para criar um polígono. Você pode definir os vértices do polígono usando o atributo points, que consiste em uma série de pares x,y separados por espaços.

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="300">
<polygon points="5,37 50,5 95,37 20,99 80,99" style="fill:green;stroke:#333;stroke-width:2;fill-rule:evenodd;"></polygon>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estrela SVG

Desculpe, seu navegador não suporta SVG embutido.

Lamentamos, mas o seu navegador não suporta SVG embutido .

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></polygon>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

SVG Retângulo Arredondado

Desculpe, seu navegador não suporta SVG embutido.

Lamentamos, mas o seu navegador não suporta SVG embutido.

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="200">
<rect x="50" y="20" rx="20" ry="20" width="180" height="180" style="fill:red;stroke:black;stroke-width:5;opacity:0.3"></rect>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Animações SVG

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
animation-name: circleOrigin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes circleOrigin {
from { transform: rotate(270deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<svg width="150" height="150">
<circle cx="80" cy="80" r="50" stroke="#000" stroke-width="1" fill="green" class="circle"></circle>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O logotipo SVG pode ser definido da seguinte maneira:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<svg height="150" width="600">
<defs>
<lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</lineargradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Compatibilidade do navegador

A tabela abaixo indica qual versão do navegador suporta totalmente o HTML <svg> .

Elemento
<svg> 10,0 14.5 10,0 16,0 92,0

Diferenças entre SVG e Canvas

JavaScript desenha gráficos 2D na tela.

Cada elemento em SVG é acessível no DOM , ao qual você pode até anexar manipuladores JavaScript .

Quando você desenha formas em HTML, o SVG as armazena como objetos, os objetos SVG podem redesenhar automaticamente se seus atributos forem alterados.

Os pixels são gerados um a um na tela. Assim que um gráfico de tela é desenhado, o navegador o esquece. Qualquer objeto coberto por gráficos deve ser removido novamente se sua posição precisar ser alterada.

Se este artigo de alguma forma satisfez seus desejos educacionais, compartilhe esta informação significativa com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.