Símbolos

facebook-svg gplus-svg twitter-svg

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>.



 
  
    Flor
    la descripción va aquí
    
    
    
    
    
    
    
    
  


Flor la descripción va aquí

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 ).



 
  
    Flor
    la descripción va aquí
    
    
    
    
    
    
    
    
    
  




 
 
 


Flor la descripción va aquí