Tag HTML svg - Aprenda HTML

A tag <svg> é usada como contêiner para gráficos SVG.

SVG (Scalable Vector Graphics) é uma linguagem para gráficos bidimensionais baseada em XML. Ao contrário de formatos raster como PNG ou JPEG, uma imagem SVG é descrita por formas e coordenadas, e não por uma grade fixa de pixels — portanto, permanece nítida em qualquer tamanho e escala sem perder qualidade. O SVG também suporta interatividade, animação e acesso completo a cada elemento por meio do DOM.

Esta página aborda como incorporar SVG diretamente em HTML, o importantíssimo sistema de coordenadas viewBox, as formas de desenho básicas, como tornar o SVG acessível, os atributos do elemento <svg> e como o SVG se compara ao <canvas>.

Sintaxe de `<svg>`

A tag <svg> vem em pares. As formas que você deseja desenhar são escritas entre as tags de abertura (<svg>) e fechamento (</svg>).

Exemplo da tag HTML `<svg>`:

Tag HTML <svg>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Perigo

O atributo xmlns é exigido apenas no elemento <svg> externo de documentos SVG independentes (um arquivo .svg). Não é necessário para elementos <svg> internos nem ao incorporar SVG inline em um documento HTML.

Exemplo da tag HTML `<svg>` desenhando uma elipse:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Experimente Você Mesmo »

O viewBox e o sistema de coordenadas SVG

O viewBox é o conceito mais importante do SVG. Ele define o sistema de coordenadas no qual todas as suas formas são desenhadas, e é o que torna um SVG verdadeiramente escalável.

Os atributos width e height definem o tamanho da caixa SVG na página (em pixels CSS). O atributo viewBox, por sua vez, define o sistema de coordenadas interno usando quatro números:

viewBox="min-x min-y width height"

min-x, min-y — as coordenadas do canto superior esquerdo da área de visualização.
width, height — a largura e a altura da área de visualização em unidades de usuário.

O navegador então mapeia essa área de visualização interna para a width/height na tela, redimensionando conforme necessário. Assim, um círculo desenhado em cx="50" cy="50" com viewBox="0 0 100 100" sempre fica no centro, independentemente do tamanho em que o SVG for renderizado.

O exemplo abaixo desenha o mesmo círculo em dois SVGs. O primeiro usa apenas width/height, portanto as coordenadas são coordenadas de pixels e o círculo está vinculado a esse tamanho. O segundo adiciona um viewBox, de modo que o desenho escala para preencher uma caixa muito maior enquanto o código permanece idêntico:

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Como o segundo SVG separa o sistema de coordenadas (viewBox) do tamanho renderizado (width/height), você pode redimensioná-lo — inclusive via CSS — e todas as formas escalam proporcionalmente. Por isso o viewBox é essencial para ícones e ilustrações responsivos.

Formas SVG

Você cria desenhos SVG a partir de um pequeno conjunto de elementos de formas básicas inseridos dentro de <svg>. Cada um utiliza seus próprios atributos de coordenadas e dimensionamento:

<rect> — um retângulo, posicionado com x/y e dimensionado com width/height; rx/ry arredonda os cantos. Veja Retângulo SVG.
<circle> — um círculo definido pelo seu centro cx/cy e raio r. Veja Círculo SVG.
<ellipse> — como um círculo, mas com dois raios, rx e ry. Veja Elipse SVG.
<line> — uma linha reta de (x1,y1) até (x2,y2). Veja Linha SVG.
<polygon> — uma forma fechada definida por uma lista de points. Veja Polígono SVG.
<path> — a forma mais poderosa; seu atributo d codifica linhas, curvas e arcos para desenhar quase qualquer coisa. Veja Path SVG.

A maioria das formas compartilha os atributos de apresentação fill (cor interior), stroke (cor do contorno) e stroke-width (espessura do contorno). Para a lista completa de elementos e atributos, consulte a Referência SVG.

Acessibilidade

O SVG inline faz parte do DOM da página, portanto leitores de tela podem lê-lo — mas apenas se você fornecer texto acessível. Uma forma decorativa sem rótulo é anunciada de forma inútil.

Para SVG com significado (ícones, gráficos, logotipos), faça o seguinte:

Adicione um elemento <title> como primeiro filho — ele atua como o nome acessível (e é exibido como tooltip).
Opcionalmente, adicione um elemento <desc> para uma descrição mais longa.
Coloque role="img" no <svg> para que tecnologias assistivas o tratem como uma única imagem.
Referencie o texto com aria-labelledby ou use aria-label diretamente.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Se um SVG é puramente decorativo e não agrega informação, oculte-o das tecnologias assistivas com aria-hidden="true".

Diferenças entre SVG e Canvas

À primeira vista, SVG e Canvas fazem a mesma coisa: desenhar artes vetoriais usando pontos de coordenadas. No entanto, existem diferenças entre eles. Vamos analisá-las.

SVG é uma linguagem para descrever gráficos 2D em XML, enquanto Canvas é usado para desenhar gráficos 2D dinamicamente (com JavaScript).

SVG é como um programa de "desenho". O desenho é uma instrução de desenho para cada forma, e qualquer parte de qualquer forma pode ser alterada. Os desenhos são orientados a formas.

Canvas é como um programa de "pintura". Quando os pixels chegam à tela, esse é o seu desenho. Você só pode alterar as formas sobrescrevendo-as com outros pixels. As pinturas são orientadas a pixels.

SVG é baseado em XML, o que significa que cada elemento está disponível dentro do DOM do SVG. No SVG, a forma desenhada é lembrada como um objeto. No Canvas, o navegador esquece a forma desenhada imediatamente após ela ter sido renderizada. Se você precisar fazer alterações no desenho, deverá redesenhá-lo do zero.

Atributos

Atributo	Valor	Descrição
height	length, percentage	Define a altura do elemento SVG na página.
width	length, percentage	Define a largura do elemento SVG na página.
viewBox	min-x min-y width height	Define a posição e o tamanho do sistema de coordenadas interno (o viewport SVG).
preserveAspectRatio	alignment + meetOrSlice (veja abaixo)	Controla como o `viewBox` é escalado e alinhado quando sua proporção difere da caixa SVG.
x	length, percentage	Define a coordenada x de um contêiner SVG aninhado. Não tem efeito no `<svg>` mais externo.
y	length, percentage	Define a coordenada y de um contêiner SVG aninhado. Não tem efeito no `<svg>` mais externo.

Valores de preserveAspectRatio

Quando a proporção do viewBox não corresponde à caixa SVG, preserveAspectRatio decide como ajustá-lo. Ele recebe um valor de alinhamento opcionalmente seguido de um valor meetOrSlice:

Alinhamento (qual borda/centro ancorar):

none — esticar para preencher, ignorando a proporção.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (padrão), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet ou slice (como escalar):

meet (padrão) — escalar até que todo o viewBox caiba dentro da caixa.
slice — escalar até que o viewBox cubra toda a caixa, cortando o excesso.

Atributos removidos

Os atributos version, baseProfile, contentScriptType e contentStyleType eram usados no SVG 1.1, mas estão obsoletos/removidos no SVG 2 e não são mais necessários. O SVG 2 é a revisão atual da especificação SVG, mais integrada ao HTML e CSS; navegadores modernos renderizam SVG sem esses atributos.

Prática

Quais afirmações sobre a tag SVG estão corretas? (Selecione todas que se aplicam)

A tag SVG é um contêiner para gráficos vetoriais em HTML.Os gráficos SVG NÃO perdem qualidade ao ser ampliados ou redimensionados.Os gráficos SVG são baseados em pixels, como PNG ou JPEG.O atributo viewBox define o sistema de coordenadas interno do SVG.O atributo xmlns é obrigatório para SVG inline dentro de um documento HTML.

Sintaxe de <svg>

Exemplo da tag HTML <svg>:

Exemplo da tag HTML <svg> desenhando uma elipse: