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="https://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
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.