I am using [SVG.js](http://svgjs.com) and trying to make some manipulations with SVG. I was previously working with canvas but I was very disappointed with the quality of the images it was generating so I've decided to use pure SVG.

I managed to change everything into a pure SVG approach, everything except one thing: rotation.

I cannot make it work. I would love to use what the SVG.js library offers, but that didn't work. I also have tried fiddling with the elements inside but also without success.
The best link I found up to this point was [this one](https://www.noupe.com/development/better-positioning-and-transforming-with-nested-svgs.html) but although he manages to rotate the images separately, it does not show how to rotate everything together (which is my case)

**What I want**

I want to be able to rotate an SVG image which I've created in Inkscape (fairly simple)

**Problem**

No rotation at all, through several methods and opinions on the internet.

**What I've tried**

* using the **transform** attribute with **rotate(45)**
* using the SVG.js built in method
* reading about how rotation cannot be applied to <g> tag
* reading about how the SVG rotation is different from the CSS in respect to its coordinate system (e.g. [this link from css-tricks](https://css-tricks.com/transforms-on-svg-elements/))

**Example of problem**

Here I have a simple SVG of a player which I put as a JS variable. The image is created and moved to the coordinates = (50, 50). Finally I try to rotate it 45 degrees. (Which does not help)

```js
const player = '<svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="http://www.w3.org/2000/svg">&gt;\n' +
    ' <g transform="translate(-172.04 62.213)">\n' +
    '  <g transform="matrix(.429 0 0 .429 160.68 -80.101)">\n' +
    '   <g stroke="#000">\n' +
    '    <path d="m39.592 42.246c-4.5716 0.02368-12.788-1.0453-12.77 6.7945 0.01784 7.8398 12.788 6.8319 12.788 6.8319s12.667 1.041 12.681-6.9252-8.1273-6.7249-12.699-6.7012z" fill="#ff2a2a" stroke-width=".20436px"/>\n' +
    '    <circle cx="39.556" cy="49.061" r="7" fill="#ffb380" stroke-width=".26458"/>\n' +
    '   </g>\n' +
    '  </g>\n' +
    ' </g>\n' +
    '</svg>';

    if (SVG.supported) {
     const drawArea = SVG('svgDrawArea').size(300, 300);

      const group = drawArea.nested();
      group.svg(player);
      group.move(50, 50);

      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }

```

```css
#svgDrawArea{
  /* background-color: red; */
  height: 300px;
  width:300px;
  border: 1px solid black;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<div id="svgDrawArea"></div>
```

I would be happy if someone can explain why the rotation does not work or to point me to somewhere where I can clarify myself on the why!