We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

O elemento symbol é usado para definir um template que pode ser inicializado por um elemento <use>. A utilização de elementos symbol para gráficos que são usados várias vezes no mesmo documento acrescenta estrutura e semântica. Documentos que são ricos em estrutura podem ser renderizados graficamente, através da fala, ou do braille, e assim promover a acessibilidade. Note que o elemento symbol em si não é renderizado. Somente instâncias de um elemento symbol (por exemplo, uma referência à um elemento symbol feita por um elemento <use>) são renderizadas.

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

<svg>
<!-- definição de symbol NUNCA é renderizada -->
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<!-- renderização por elementos "use" -->
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>

Atributos

Atributos globais

Atributos específicos

Interface DOM

Esse elemento implementa a interface do SVGSymbolElement.

Compatibilidade

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!

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.5 (1.8) 9.0 9.0 3.0.4
Recurso 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

Essa tabela é baseada nessas fontes.

Veja também

Etiquetas do documento e colaboradores

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