W3docs
pt
Entrar

Introdução ao SVG

Aprenda o que é SVG, como funciona seu sistema de coordenadas, quando usá-lo em vez de Canvas ou imagens raster, e três formas de incorporar SVG no HTML.

SVG (Scalable Vector Graphics) descreve gráficos bidimensionais em XML. Em vez de armazenar uma grade de pixels coloridos (como JPEG, PNG ou GIF fazem), um arquivo SVG armazena as instruções para desenhar formas — linhas, curvas, círculos, retângulos e texto. O navegador lê essas instruções e renderiza a imagem de forma nítida em qualquer tamanho em que seja exibida, de modo que o resultado permanece perfeito em qualquer nível de zoom ou resolução de tela.

SVG é uma recomendação do W3C e se integra com outros padrões, como o DOM, CSS e JavaScript. Como cada forma é um elemento real no documento, você pode estilizá-la com CSS, animá-la e responder a cliques e hovers como faria com qualquer outro elemento HTML.

Esta página explica como o SVG funciona dentro de uma página HTML, como seu sistema de coordenadas está organizado, quando optar por SVG em vez de Canvas ou uma imagem raster, e as três maneiras padrão de incorporar um documento SVG.

Como o SVG funciona em uma página HTML

Uma imagem SVG é em si um pequeno documento XML. O elemento raiz <svg> contém elementos de formas filhos, e o navegador os pinta na ordem do código-fonte — elementos posteriores são desenhados sobre os anteriores, da mesma forma que camadas se empilham em um programa de pintura.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

O sistema de coordenadas

O SVG usa uma grade de coordenadas cuja origem (0, 0) é o canto superior esquerdo. O eixo x cresce para a direita e o eixo y cresce para baixo — observe que isso difere da convenção de y para cima que você pode conhecer da matemática.

  • Os atributos width e height no <svg> definem o tamanho da área de desenho em pixels.
  • Um atributo viewBox (por exemplo, viewBox="0 0 100 100") define o espaço de coordenadas interno, permitindo que o mesmo desenho seja dimensionado para se ajustar a qualquer tamanho renderizado.

No exemplo acima, o centro do círculo está em (50, 50) — o meio de um canvas 100×100 — e seu raio se estende 40 unidades em todas as direções.

Lendo os atributos do <circle>

Cada atributo no elemento <circle> controla um aspecto de como ele é desenhado:

AtributoSignificado
cxcoordenada x do centro do círculo (50)
cycoordenada y do centro do círculo (50)
rraio do círculo em unidades de usuário (40)
strokecor do contorno (green)
stroke-widthespessura do contorno em unidades de usuário (4)
fillcor que preenche o interior da forma (yellow)

Saiba mais sobre como pintar contornos em traçado SVG e veja todas as formas e atributos na referência de SVG.

SVG vs. Canvas vs. imagens raster

A escolha da tecnologia certa depende do que você está desenhando e de como vai mudar.

  • SVG é melhor para gráficos que devem permanecer nítidos em qualquer tamanho e que você deseja estilizar, animar ou tornar interativos: ícones, logotipos, gráficos, diagramas e mapas. Cada forma é um nó do DOM, por isso é acessível e fácil de manipular com scripts. Pode ficar lento quando uma cena contém dezenas de milhares de elementos individuais.
  • Canvas desenha pixels em um bitmap com JavaScript. Não tem DOM por forma, o que o torna eficiente para cenas que mudam rapidamente com muitos objetos — jogos, efeitos de partículas e visualizações de dados em tempo real — mas o resultado não escala sem redesenhar e é mais difícil de tornar acessível.
  • Imagens raster (JPEG, PNG, GIF, WebP) armazenam pixels fixos. São a escolha certa para fotografias e texturas complexas, mas ficam borradas ou pixeladas ao serem ampliadas e pesam mais em altas resoluções.

Uma regra simples: use SVG para arte vetorial independente de resolução e scriptável; use Canvas para renderização de pixels de alta frequência; use formatos raster para fotografias.

Incorporando SVG no HTML

Os arquivos SVG usam a extensão .svg e são suportados por todos os navegadores modernos. Existem três maneiras comuns de colocar SVG em uma página, cada uma com suas próprias vantagens e desvantagens.

<svg> inline

Escreva a marcação SVG diretamente dentro do seu HTML. Isso dá acesso completo a cada forma, para que você possa estilizá-la com CSS e animar ou manipular elementos individuais com scripts a partir da mesma página.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> com uma fonte SVG

Aponte um elemento <img> para um arquivo .svg externo. Isso é simples e cacheável, mas o SVG é tratado como uma imagem plana: seus elementos internos não podem ser estilizados ou manipulados com scripts a partir da página hospedeira.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

O elemento <object>

O elemento <object> carrega o SVG como um documento separado enquanto ainda expõe seu DOM para scripts, e permite fornecer conteúdo de fallback para navegadores que falham ao carregá-lo.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

Para mais informações sobre o próprio elemento inline, consulte a tag HTML <svg> e SVG no HTML5.

Criando imagens SVG

Você pode escrever SVG manualmente em qualquer editor de texto, o que é prático para ícones e formas simples. Para arte com muitas curvas e caminhos, um programa de desenho como o Inkscape geralmente é mais conveniente — ele exporta arquivos .svg limpos que você pode refinar manualmente. Para desenhar formas curvas por código, comece com o elemento path SVG, e para segmentos retos consulte o elemento linha SVG.

Tornando o SVG acessível

Quando um SVG transmite significado, forneça algo para que as tecnologias assistivas leiam. A abordagem depende de como o SVG está incorporado:

  • Para <svg> inline, adicione um <title> (e um <desc> mais longo opcional) como primeiros filhos, e marque a raiz com role="img". Referenciar o título com aria-labelledby vincula o nome acessível ao elemento.
<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  • Para um SVG carregado através de <img>, use um atributo alt descritivo, exatamente como faria para qualquer imagem.
  • Se o gráfico é puramente decorativo, oculte-o das tecnologias assistivas com aria-hidden="true" (inline) ou um alt="" vazio (em <img>) para que os leitores de tela o ignorem.

Você também pode adicionar texto acessível dentro de um desenho com o elemento texto SVG.

Vantagens de usar SVG

Comparado com formatos raster como JPEG e GIF, o SVG oferece vários benefícios:

  • Imagens SVG podem ser geradas e modificadas com qualquer editor de texto.
  • Imagens SVG podem ser manipuladas com scripts, indexadas, pesquisadas e comprimidas.
  • Você pode imprimir imagens SVG com alta qualidade em qualquer resolução.
  • Imagens SVG podem ser dimensionadas e ampliadas sem perda de qualidade.
  • Cada forma faz parte do DOM, portanto pode ser estilizada com CSS e animada.
  • SVG é um padrão aberto do W3C.

Prática

Prática
O que você pode dizer sobre SVG no HTML?
O que você pode dizer sobre SVG no HTML?
Prática
Quais afirmações sobre incorporação e uso de SVG estão corretas?
Quais afirmações sobre incorporação e uso de SVG estão corretas?
Was this page helpful?