Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

svg

 

O elemento svg pode ser utilizado para englobar um fragmento independente de SVG dentro do documento atual (um documento HTML por exemplo), uma vez que o  svg não é o elemento raiz. Este fragmento independente tem sua própria janela de exibição e sistema de coordenadas.

Contexto de uso

CategoriasElemento recipiente, elemento estrutural
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação
Elementos descritivos
Elementos de forma
Elementos estruturais
Elementos de gradiente
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Exemplo

Considere a seguinte imagem SVG (representando a bandeira nacional da Itália):

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

Este fragmento pode ser incluído de forma independente em um documento HTML5 da seguinte maneira:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>

  <svg width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>

</body>
</html>

Atributos

Atributos globais

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGSVGElement.

Compatibilidade dos navegadores

Recursos Chrome Firefox (Gecko) IE Opera Safari
Suporte básico 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Recursos Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 3.0 1.0 (1.8) Não suportado (Yes) 3.0.4

A tabela é baseada nestas fontes.

Etiquetas do documento e colaboradores

 Colaboradores desta página: Sebastianz, caio, teoli, Haroldohc
 Última atualização por: Sebastianz,