Elemento <symbol> SVG

O elemento <symbol> SVG é usado para definir símbolos reutilizáveis. A menos que seja referenciado por um elemento <use>, as formas aninhadas dentro do <symbol> não serão exibidas.

O elemento <symbol> SVG é usado para definir um objeto modelo gráfico reutilizável. A menos que seja referenciado por um elemento <use>, as formas aninhadas dentro do <symbol> não serão exibidas. O elemento <symbol> tem o efeito de usar múltiplas vezes, adicionando estrutura e semântica aos gráficos. Documentos ricos em estrutura podem ser apresentados de maneira mais vívida, como manuscritos ou braile, melhorando a acessibilidade. Observe que um elemento <symbol> em si não é exibido. Apenas a exemplo do elemento <symbol> (ou seja, um elemento <use> que referencia o symbol) pode ser exibido.

Exemplo de símbolo

Este é um exemplo simples de símbolo symbol:

<svg width="500" height="100">
　　　　<symbol id="shape2">
　　　　　　　　<circle cx="25" cy="25" r="25"　/>
　　　　</symbol>
　　　　<use xlink:href="#shape2" x="50" y="25"　/>
</svg>

O elemento <symbol> precisa de um id para que o elemento <use> o invoque.

reserveAspectRatio e viewBox

O elemento <symbol> pode ter os atributos prepareAspectRatio e viewBox. 　O <g> não pode ter esses dois atributos. Portanto, em comparação com o uso do elemento <g> dentro do elemento <defs>, o elemento <symbol> pode ser uma melhor maneira de reutilizar formas.