SVG rotate inside SVG

I'm working on a project that requires to export an SVG image (map) with symbols (also SVGs). I have found a simple library that helps me to do the export to PDF quite simply.

The way it is structures is basically like that.

svg (main svg area 9600x5060) -svg symbols (placed via x,y coordinates inside of 9600x5060) -svg symbols (placed via x,y coordinates inside of 9600x5060) ..... svg

So far everything works great!!

Now some of the symbols/icons need to be rotated (90, 180, 45, etc..).

Here is the main issue, the pivot point of each symbol seems to be 0, 0 from the parent svg, hope it makes sense when I say that.

Hope someone can help me and maybe it is not possible, I have not a whole lot of experience in SVG and it seems to behave a little different that other html elements.

I have tested a small snipped for demo:

.green {
  fill: none;
  stroke: green;
  transform: rotate(20deg);
}

<html>

<body>

  <h1>My first SVG</h1>

  <svg height="600" width="800" style="background-color:#cccccc;">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50" width="100" height="100" x="200" y="100" class="green">
        <g>
          <path class="a" d="M35.76,23.45a8.34,8.34,0,1,0-8.34,8.33A8.34,8.34,0,0,0,35.76,23.45Z" />
          <line class="a" x1="24.42" y1="15.68" x2="24.42" y2="43.8" />
          <line class="a" x1="30.42" y1="15.68" x2="30.42" y2="43.8" />
        </g>
      </svg>
  </svg>

</body>

</html>