SVG image generated in browser different in Illustrator

Question

I'm writing a web application which generates SVG images in the browser.

The SVG's I'm generating work fine in ever browser. However, when I download one of the SVG's and try to open it in Adobe Illsutrator, all the transformations are all over the place.

They are in fact so different that you have to zoom right out to see where the shapes are positioned.

This is the contents of the SVG, you can see it's pretty simple. Just a couple of nested SVG's and a few basic shapes:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="592" height="592" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg style="overflow:visible;" x="88.80000305175781" y="88.80000305175781" fill="#777777">
    <svg style="overflow:visible;" height="100px" width="100px">
      <rect width="100" height="100" style="stroke:#006600;" transform="scale(4.144 4.144)"></rect>
    </svg>
  </svg>
  <svg style="overflow:visible;" width="592" height="592" x="176.60000000000016" y="177.60000000000014" fill="#000000">
    <rect width="592" height="592" fill="rgba(0,0,0,0)" stroke="#bbbbbb" transform="scale(0.4 0.4)"></rect>
    <svg style="overflow:visible;" x="-0.0000015258789005656581" y="-0.0000015258789005656581">
      <svg style="overflow:visible;" height="48px" width="48px">
        <ellipse id="SvgjsEllipse1010" rx="24" ry="24" cx="24" cy="24" style="stroke:#006600;fill:#00cc00;" transform="scale(4.933333333333334 4.933333333333334)"></ellipse>
      </svg>
    </svg>
  </svg>
</svg>

I don't know the SVG spec inside out, but I'm doing anything particularly complex, so it all seems good to me. I can't see a reason why Illustrator would render it so differently to browsers.

Does anyone know why this is happening?

Edit

This is what it looks like in Illsutrator, as you can see the scaling and positioning is all off, the small square in the center is the 592 x 592 canvas area, so you can see who far I am zoomed out.

Answer 1

I suspect AI doesn't like/handle/expect nested <svg> elements. Try replacing them with groups. Those with x and y attributes may need to have a transform added to get it to look the same. Also if the overflow is important, you may need to tweak things further as that property is not valid for group elements.