Símbolos
El elemento <symbol>
es otra manera de agrupar objetos en SVG. A diferencia de <g>
( group ) el elemento <symbol>
aparece en pantalla solo si lo instanciamos con <use>
, y aunque no aparece en pantalla por si solo, es recomendable ponerlo, junto con las demás definiciones, dentro del elemento <defs>
.
Un ejemplo sencillo
En el siguiente ejemplo agrupamos dentro del elemento <symbol>
siete círculos y un trazado para representar una flor.
Solo el último circulo tiene definidos los atributos fill
( relleno ) y stroke
( trazo ).
Los demás círculos heredan estos atributos de <use>
.
Simbolos redimensionados
A diferencia de <g>
, el elemento <symbol>
soporta los atributos
viewBox y preserveAspectRatio,
y por tanto una vez dibujado un símbolo podemos generar replicas de dimensiones variables.
En el siguiente ejemplo utilizamos el mismo símbolo del ejemplo anterior, solo que esta vez tiene declarado el atributo viewBox
.
<symbol id="floral" viewBox="0 0 100 100">
Esto quiere decir que el símbolo, que es un rectángulo, tiene una anchura de 100px y una altura de 100px. La flor, exactamente como en el ejemplo anterior, aparece dibujada en el centro de este rectángulo. Además, para que las cosas sean más claras, el símbolo incluye un rectángulo transparente con un borde rojo que marca el margen del mismo.
A continuación reutilizamos el símbolo con <use>
. En este caso el elemento <use>
tiene declarado cuatro atributos más: width
( anchura ) height
( altura ) y las coordenadas del punto de inserción x
e y
.
Si reutilizamos con <use>
un grupo de elementos <g>
, los atributos width
y height
no afectan a la imagen resultante.
Por lo contrario, en el caso de <symbol>
, que ya tiene declarado el atributo viewBox
, utilizar los atributos width
y
height
resulta en un símbolo redimensionado.
En lo que concierne el punto de inserción x,y
, este se corresponde con la esquina izquierda arriba del sÍmbolo ( el pequeño circulo rojo del siguiente ejemplo ).