Элемент G

<g> SVG элементапредставляет собой контейнер, используемый для группировки других элементов SVG. Он также может сгруппировать несколько элементов, которые будут ссылаться позже с <use> элемента.

Пример:

<svg xmlns="http://www.w3.org/2000/svg">
     xmlns:xlink="http://www.w3.org/1999/xlink"
    <g stroke="green" fill="white" stroke-width="5">
        <circle cx="40" cy="40" r="30"/>
        <circle cx="60" cy="40" r="30"/>
        <circle cx="80" cy="40" r="30"/>
        <circle cx="100" cy="40" r="30"/>
    </g>
</svg>

Наследование стилей и трансформаий

Трансформации, применяемые к <g> элемента выполняются на всех его дочерних элементов, и любой из его атрибутов наследуются его дочерними элементами.

Пример

<g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000">
    <rect    x="10"  y="10" width="100" height="50" />
    <circle cx="150" cy="35" r="25" />
    <circle cx="250" cy="35" r="25" style="stroke: #009900; fill: #00ff00;"/>
</g>

  1. SVG
  2. HTML