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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,