Dentro del ecosistema de etiquetas de SVG, la etiqueta <g> se puede utilizar como etiqueta de agrupación, muy similar a los elementos <div> en HTML, pero enfocado en el contexto de SVG. Permite organizar una serie de elementos dentro de una etiqueta contenedora que, por defecto, es visualmente transparente.
<svg viewBox="0 0 100 100" height="150">
<g>
<rect x="5" y="5" width="50" height="50" fill="indigo" />
<circle cx="50" cy="50" r="25" fill="deeppink" />
</g>
</svg>
svg {
background: #aaa;
}
Si lo deseas, recuerda que puedes incluir elementos
<g>en el interior de otros elementos<g>.
Aplicar características en grupo
Uno de los puntos clave de las etiquetas de agrupación <g>, es que muchos de los atributos indicados a dicho contenedor, se aplicarán a todos sus elementos hijos. Por ejemplo, veamos una muestra con el atributo transform, donde aplicaremos una transformación a todos los elementos contenidos del código de ejemplo anterior:
<svg viewBox="0 0 100 100" height="150">
<g transform="translate(20, 20)">
<rect x="5" y="5" width="50" height="50" fill="indigo" />
<circle cx="50" cy="50" r="25" fill="deeppink" />
</g>
</svg>
svg {
background: #aaa;
}
path {
stroke: black;
fill: none;
stroke-width: 3px;
}
text {
font-size: 3px;
}
Observa que mediante el atributo transform hemos realizado una transformación de traslación, moviendo todos los elementos del interior de la etiqueta <g> 20 unidades a la derecha y 20 unidades hacia abajo.
Veamos otro ejemplo, basado en el anterior, donde hemos retirado los atributos fill tanto del elemento <rect> como del elemento <circle>. Por otro lado, lo que hemos hecho es añadir el atributo fill al contenedor <g>, por lo tanto, se aplicará a ambos elementos:
<svg viewBox="0 0 100 100" height="150">
<g fill="indigo">
<rect x="5" y="5" width="50" height="50" />
<circle cx="50" cy="50" r="25" />
</g>
</svg>
svg {
background: #aaa;
}
Reutilización de elementos
Otro detalle interesante que podemos hacer con los elementos <g> es indicarle un nombre mediante un atributo id, y reutilizarlo para evitar repetir código, mediante la etiqueta <use>.
Observa el siguiente ejemplo, donde definimos un grupo <g> con el id con nombre shape. Un poco más abajo, utilizamos la etiqueta <use> que reutilizará el elemento indicado en el atributo href (observa que le indicamos la # porque es un ID). Este elemento reutilizado será exactamente igual al original, sin embargo, le hemos aplicado un valor de x e y diferente, por lo que lo movemos de sitio, y le hemos aplicado una transformación de escalado de 0.5 por lo que será de la mitad del tamaño que el original.
El resultado sería el siguiente:
<svg viewBox="0 0 100 100" height="150">
<g id="shape">
<rect x="5" y="5" width="50" height="50" fill="gold" />
<circle cx="50" cy="50" r="25" fill="orangered" />
</g>
<use x="115" y="115" href="#shape" transform="scale(0.5)"></use>
</svg>
svg {
background: #aaa;
}
Fíjate en este otro ejemplo, donde además utilizamos variables CSS para modificar los colores de los elementos del grupo:
<svg viewBox="0 0 100 100" height="150">
<g id="shape">
<rect x="5" y="5" width="50" height="50" fill="var(--primary-color, #777)" />
<circle cx="50" cy="50" r="25" fill="var(--secondary-color, #333)" />
</g>
<use x="115" y="115" href="#shape" transform="scale(0.5)"
style="--primary-color: gold; --secondary-color: lime"></use>
</svg>
svg {
background: #aaa;
}
Lo estamos haciendo directamente en los atributos fill y style de los elementos SVG, pero se pueden hacer con un bloque <style> y con código CSS si así lo preferimos.
Es importante tener en cuenta que aunque puedes reutilizar elementos utilizando
<g>y<use>combinados, es mucho mejor utilizar<g>simplemente para agrupar y reutilizar con las etiquetas<symbol>y<use>, que explicaremos más adelante.
