En esta entrada veremos un elemento muy útil para trabajar con los SVG que es el elemento <symbol>; este elemento ahorra mucho trabajo y permite agrupar series de figuras básicas para pintarlos empleando el elemento <use>.
El elemento <symbol> y <use> en los SVG
Tomando nuestro logo de Android el cual armamos en una entrada anterior Construyendo nuestro propio logo Android con SVG en HTML, se definimos (o mejor dicho, las figuras que componen el logo de Android) dentro del elemento <symbol> y luego simplemente se pinta el logo con el elemento <use>; primero recordemos el HTML de nuestro logo Android SVG/HTML:
<svg>
<!--cabeza-->
<ellipse cx="170" cy="100" rx="50" ry="45"></ellipse>
Su navegador no soporta SVG :/s
<!--antena izquierdo-->
<rect x="197" y="0" width="4" height="30" rx="3" ry="3" id="antena1"></rect>
Su navegador no soporta SVG :/
<!--antena derecho-->
<rect x="124" y="77" width="4" height="30" rx="3" ry="3" id="antena2"></rect>
Su navegador no soporta SVG :/
<!--ojos-->
<circle cx="150" cy="80" r="7"></circle>
Su navegador no soporta SVG :/
<circle cx="190" cy="80" r="7"></circle>
Su navegador no soporta SVG :/
<!--pierna izquierdo-->
<rect x="140" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--pierna derecho-->
<rect x="180" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--brazo izquierdo-->
<rect x="90" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--torzo-->
<rect x="120" y="90" width="100" height="120" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--brazo derecho-->
<rect x="230" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<rect x="115" y="100" width="110" height="10" id="b"></rect>
Su navegador no soporta SVG :/
</svg>Agrupando las figuras del logo con el elemento <symbol>
Ahora veamos cómo agrupar todos las primitivas que conforman nuestro logo de Android con el elemento <symbol>:
<symbol id= "android" viewBox= "0 0 500 500">
<!--cabeza-->
<ellipse cx="170" cy="100" rx="50" ry="45"></ellipse>
Su navegador no soporta SVG :/s
<!--antena izquierdo-->
<rect x="197" y="0" width="4" height="30" rx="3" ry="3" id="antena1"></rect>
Su navegador no soporta SVG :/
<!--antena derecho-->
<rect x="124" y="77" width="4" height="30" rx="3" ry="3" id="antena2"></rect>
Su navegador no soporta SVG :/
<!--ojos-->
<circle cx="150" cy="80" r="7"></circle>
Su navegador no soporta SVG :/
<circle cx="190" cy="80" r="7"></circle>
Su navegador no soporta SVG :/
<!--pierna izquierdo-->
<rect x="140" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--pierna derecho-->
<rect x="180" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--brazo izquierdo-->
<rect x="90" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--torzo-->
<rect x="120" y="90" width="100" height="120" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<!--brazo derecho-->
<rect x="230" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
Su navegador no soporta SVG :/
<rect x="115" y="100" width="110" height="10" id="b"></rect>
Su navegador no soporta SVG :/
</symbol>Mostrando el logo de Android con el elemento <use>
Pero con el HTML definido anteriormente no es suficiente para mostrar el logo de Android; para mostrar el logo es necesario emplear el elemento <use> colocando el identificador del elemento <symbol> dentro del atributo xlink:href:
<symbol id= "android">
…
</symbol>
<use xlink:href= "#android" ... />Cambiando el color del trazado
Es posible cambiar el color del trazado usando el atributo fill:
<use xlink:href= "#android" fill= "DarkOrange" width= "250" height= "250" />Aunque para nuestro logo no es necesario.
Colocando todo junto:
Al colocar todo lo visto anteriormente, obtenemos:
Su navegador no soporta SVG :/s Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/
Redimensionando y replicando nuestro logo
Finalmente, empleando repetidas veces el elemento <use> como se muestra en el siguiente HTML:
<use xlink:href= "#android" width= "150" height= "250" />
<use xlink:href= "#android" width= "300" height= "500" />
<use xlink:href= "#android" width= "600" height= "1000" />La verdadera ventaja al definir el logo de Android dentro del elemento <symbol> es poder cambiarle el tamaño y pintarlo tantas veces como queramos.
Podemos pintar tantos logos de Android como queramos (tres para nuestro ejemplo) y definiendo su ancho (width) y largo (height) para variar sus dimensiones (redimensionar los logos) obtenemos:
Su navegador no soporta SVG :/s Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/
Podemos definir tantos elementos <use> como logos de Android queramos pintar.
El atributo viewBox
Si te fijas, empleamos el atributo viewBox en el elemento <symbol>; este atributo permite controlar el tamaño de los elementos dentro del SVG; el atributo está compuesto de los siguientes valores:
min-xmin-ywidthheight
Por lo tanto, si el valor min-x y min-y son iguales al width y height del SVG existe una relación 1:1 en donde cada pixel ocupará exactamente el tamaño del píxel, pero si por el contrario, si el valor de min-x y min-y son width/2 y height/2 del width y height del SVG; es decir:
min-x = width/2
min-y = height/2Entonces cada pixel ocupa el doble de su espacio (una relación 1:2); es decir, dos píxeles.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter