Agrupaciones

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.