Understanding how SVG g elements are used

HTML & CSS
1

When is it necessary to use g, and when is it not necessary to use g?

Am I doing this right?

Is placing a g necessary in this code, or is it not necessary?

  <style>
 
  .initialf line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .initialf circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
</style>

 <svg class="initialf" width="260" height="245" viewbox="0 0 260 245">
<g>
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
</g>
<g>
    <circle cx="135" cy="122" r="24.5"></circle>
</g>

  </svg>
2

What documentation are you looking at, and what about it did you not understand?

3

The SVG element is a container used to group other SVG elements. Transformations applied to the element are performed on all of its child elements, and any of its attributes are inherited by its child elements. It can also group multiple elements to be referenced later with the element.

4

Which way is more appropriate for this?

I know 1 is less code than 2.
It seems like the inclusion of element g in this code, I may not need in this instance.

1.)

  .initialf {
    stroke-width: 6;
    stroke: #89cff0;
    fill: red;
  }
  
<svg class="initialf" width="260" height="245" viewbox="0 0 260 245">
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
    <circle cx="135" cy="122" r="24.5"></circle>
</svg>

2.)

<style>
  .line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
</style>

<svg width="260" height="245" viewbox="0 0 260 245">
  <g class="line" >
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
  </g>
  <g class="circle" >
    <circle cx="135" cy="122" r="24.5"></circle>
  </g>

</svg>
5

I just figured out another way this can be done.

  line, circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: red;
  }

<svg width="260" height="245" viewbox="0 0 260 245">
  <line x1="4" y1="122" x2="29" y2="122"></line>
  <line x1="38" y1="122" x2="108" y2="122"></line>
  <line x1="83" y1="91" x2="188" y2="151"></line>
  <line x1="135" y1="61" x2="135" y2="182"></line>
  <line x1="82" y1="152" x2="187" y2="91"></line>
  <line x1="148" y1="98" x2="183" y2="38"></line>
  <line x1="187" y1="31" x2="199" y2="9"></line>
  <line x1="148" y1="145" x2="183" y2="205"></line>
  <line x1="188" y1="213" x2="200" y2="233"></line>
  <circle cx="135" cy="122" r="24.5"></circle>
</svg>
6

In svg the <g> element means group as you may have read already.
So you wouls use g when you need to create separate groups of objects within the svg, for example to apply common styles to all objects within their groups. Or they may be used like layers, so you can apply styles to either show or hide different layers of the image.

1 Like
7

But I don’t think I would need to do that in this case, group styles in g here cause the styles aren’t changing.

So, I think I’m safe to leave it like this.

  line, circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: red;
  }

<svg width="260" height="245" viewbox="0 0 260 245">
  <line x1="4" y1="122" x2="29" y2="122"></line>
  <line x1="38" y1="122" x2="108" y2="122"></line>
  <line x1="83" y1="91" x2="188" y2="151"></line>
  <line x1="135" y1="61" x2="135" y2="182"></line>
  <line x1="82" y1="152" x2="187" y2="91"></line>
  <line x1="148" y1="98" x2="183" y2="38"></line>
  <line x1="187" y1="31" x2="199" y2="9"></line>
  <line x1="148" y1="145" x2="183" y2="205"></line>
  <line x1="188" y1="213" x2="200" y2="233"></line>
  <circle cx="135" cy="122" r="24.5"></circle>
</svg>
8

If I was doing something like this, then I would group them in g.

  .line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .circle {
    stroke-width: 6;
    stroke: red;
    fill: blue;
  }


<svg width="260" height="245" viewbox="0 0 260 245">
  <g class="line" >
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
  </g>
  <g class="circle" >
    <circle cx="135" cy="122" r="24.5"></circle>
  </g>

</svg>
1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.