svg

Ir para:
  1. Contexto de uso
  2. Exemplo
  3. Atributos
  4. Interface DOM
  5. Compatibilidade dos navegadores
 

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

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.

Etiquetas do documento e colaboradores

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