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 »
classstyleexternalResourcesRequired
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!
| 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.