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

Categorias	Elemento recipiente, elemento estrutural
Conteúdo permitido	Qualquer 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 de processamento condicional »
Atributos centrais »
Atributos de eventos do documento »
Atributos de eventos gráficos »
Atributos de apresentação »
class
style
externalResourcesRequired

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGSVGElement.

Compatibilidade dos navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Desktop
Dispositivo móvel

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.

Última modificação:

Mar 23, 2019, by MDN contributors

svg