SVG no HTML5

SVG (Scalable Vector Graphics) é um formato baseado em XML para descrever gráficos bidimensionais como formas — pontos, linhas, curvas e texto — em vez de uma grade de pixels. Como o navegador renderiza um SVG a partir de uma descrição matemática, ele permanece nítido em qualquer tamanho e em qualquer densidade de tela, razão pela qual ícones, logotipos, gráficos e diagramas são frequentemente entregues como SVG.

O HTML5 oferece várias maneiras de colocar SVG em uma página, e cada uma faz uma troca diferente em relação a acesso ao DOM, cache, estilização e fallback. Esta página percorre todos os métodos comuns de incorporação e ajuda você a escolher entre eles.

Se você é completamente novo no formato, comece com a introdução ao SVG. Para uma lista completa de elementos e atributos, consulte a referência SVG.

SVG inline

O método mais poderoso é escrever a marcação SVG diretamente no seu HTML. Como o SVG passa a fazer parte do documento, cada forma é um nó real do DOM: você pode estilizá-la com CSS, manipulá-la com JavaScript e responder a eventos em caminhos individuais.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Experimente Você Mesmo »

Vamos entender o código:

Um SVG inline sempre começa com a tag <svg> e termina com </svg>.
width e height definem o tamanho da caixa SVG na página (em pixels CSS).
viewBox="0 0 300 200" define o sistema de coordenadas interno: os valores são min-x min-y width height. O navegador dimensiona essas unidades de usuário para caber na width/height exibida, portanto um viewBox é o que torna o gráfico verdadeiramente escalável e responsivo. (Remova o width/height e o SVG se expandirá para preencher seu contêiner, mantendo a proporção do viewBox.)
xmlns="http://www.w3.org/2000/svg" declara o namespace SVG. É obrigatório quando o SVG é servido como um arquivo .svg independente; dentro do HTML5, o navegador geralmente o infere, mas incluí-lo mantém a marcação portável.
O elemento <circle> desenha um círculo. cx e cy são as coordenadas x/y do seu centro (com padrão 0,0 se omitidos), e r é o raio.
stroke e stroke-width controlam o contorno — aqui uma borda roxa de 5px. fill define a cor interior, aqui rosa.

O SVG possui um conjunto de elementos de formas básicas que você combina para construir um gráfico. Veja a lista de elementos de forma SVG abaixo.

Perigo

SVG é XML, portanto todo elemento deve ser fechado corretamente. Tags de fechamento automático como <circle ... /> precisam da barra final, e tags contêiner como <svg> precisam de um </svg> correspondente.

Acessibilidade para SVG inline

SVG decorativo pode ser ocultado das tecnologias assistivas com aria-hidden="true". Quando o gráfico carrega significado, exponha-o:

Adicione role="img" para que os leitores de tela tratem todo o <svg> como uma única imagem.
Dê a ele um <title> (um nome acessível curto) e, se necessário, um <desc> (uma descrição mais longa), então referencie-os com aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Note que <title> e <desc> são elementos SVG especiais, não texto visível — <title> não é o mesmo que o <title> HTML no cabeçalho do documento.

Incorporando um arquivo `.svg` externo

A marcação inline aumenta o seu HTML e não pode ser cacheada separadamente. Quando você tem um recurso reutilizável, mantenha o SVG em seu próprio file.svg e o referencie. Há quatro maneiras comuns de fazer isso.

Como uma imagem com `<img>`

A abordagem mais simples e amplamente suportada. O SVG se comporta como qualquer outra imagem — é cacheado, pode ter carregamento tardio e é fácil de usar.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Desvantagens: você não pode acessar os elementos internos do SVG a partir do CSS ou JavaScript da página, e scripts dentro do SVG não são executados. Isso é geralmente exatamente o que você quer para ícones e logotipos. Sempre forneça texto alt. Veja o guia de <img> e imagens HTML.

Como um objeto com `<object>`

<object> carrega o SVG como um documento separado, portanto seus scripts internos são executados e você pode acessá-lo via contentDocument. Ele também oferece conteúdo de fallback natural entre as tags.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Desvantagens: a interação via script entre os documentos está sujeita à política de mesma origem (CORS), e a estilização do SVG a partir da folha de estilos da página pai não se aplica. Leia mais no capítulo da tag HTML <object>.

Como um embed com `<embed>`

<embed> também carrega o SVG como um documento externo. É semelhante ao <object>, mas não pode fornecer conteúdo de fallback (não tem tag de fechamento nem nós filhos).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Prefira <object> em vez de <embed> quando precisar de um fallback. Consulte a tag HTML <embed> para detalhes.

Como um `background-image` CSS

Quando o SVG é puramente decorativo, defina-o como plano de fundo CSS. Ele é cacheado e mantém seu HTML limpo, mas é invisível para tecnologias assistivas e inacessível por script.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

Você pode até mesmo inserir um pequeno SVG inline como uma URI de dados: background-image: url('data:image/svg+xml,...').

SVG inline vs. arquivo externo

Capacidade	`<svg>` inline	Externo (`img`/`object`/`embed`/CSS)
Estilizar formas com CSS da página	Sim	Não (apenas `<object>`/`<embed>` via CSS interno)
Manipular formas individuais via script da página	Sim	Limitado / bloqueado por CORS
Cacheado separadamente do HTML	Não	Sim
Reutilizável entre páginas sem copiar e colar	Não	Sim
Mantém o HTML pequeno	Não	Sim

Regra geral: opte por SVG inline quando precisar animar, tematizar ou interagir com o gráfico (ícones que mudam de cor ao passar o mouse, gráficos interativos). Use um <img src="*.svg"> externo para logotipos estáticos e imagens decorativas que você reutiliza pelo site.

SVG vs. imagens raster

SVG é um formato vetorial; PNG, JPEG, GIF e WebP são formatos raster (pixel).

Independência de resolução. O SVG escala para qualquer tamanho sem borramento e sem arquivos @2x/@3x separados — ideal para ícones, logotipos e arte linear em telas de alta densidade de pixels.
Arquivos pequenos para arte simples. Gráficos planos com poucas formas são frequentemente muito menores como SVG, e o texto dentro deles permanece selecionável e pesquisável.
Editável e manipulável via script. SVG é texto, então ele aparece em diffs de controle de versão e pode ser animado.

Quando SVG é a escolha errada: fotografias e imagens ricamente detalhadas. Uma foto descrita como milhares de formas seria enorme e lenta para renderizar — prefira JPEG ou WebP. O SVG também se destaca para geometria nítida, enquanto efeitos complexos por pixel pertencem aos formatos raster ou ao elemento <canvas>.

Elementos de forma SVG

O SVG inline fornece um conjunto de formas prontas que você combina para criar gráficos:

retângulo <rect> — retângulos e retângulos com cantos arredondados
círculo <circle> — círculos definidos por um centro e raio
elipse <ellipse> — ovais com raios x/y separados
linha <line> — um segmento reto entre dois pontos
polilinha <polyline> — uma série conectada de segmentos retos
polígono <polygon> — uma forma fechada a partir de uma lista de pontos
caminho <path> — linhas e curvas arbitrárias, a forma mais flexível

Veja também

Prática

Qual método permite estilizar e manipular formas SVG individuais com o próprio CSS e JavaScript da página?

Escrever o SVG inline com um elemento <svg> no HTML.Incorporar o SVG com <img src='logo.svg'>.Definir o SVG como um background-image CSS.Referenciar o arquivo SVG com <embed>.