Safari, foreignObjects and Nested SVGs

[swampthang]

Still working on the Self-Contained SVG app and ran across a Safari display issue. The codepen looks right in all browsers except Safari. Even works in Internet Exploder and Edge. There's an SVG (blue button) nested in the main SVG that should be visible over a base64 image that's inside a foreignObject. Structure is like this:

 

<svg width="728" height="200" xmlns="http://www.w3.org/2000/svg" version="2" viewBox="0 0 728 200">
  <style>
    <![CDATA[
      // styles go here
    ]]>
  </style>

  <foreignObject x="0" y="0" width="728" height="200">
    <div xmlns="http://www.w3.org/1999/xhtml" width="728" height="200" style="width: 728px; height: 200px">
      <div>
        <img src="data:image/jpeg;base64,base64DataGoesHere" />
      </div>
    </div>
  </foreignObject>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 124" x="150" y="37" preserveAspectRatio="xMinYMin meet">
    <g data-svg-origin="239 121" transform="matrix(1,0,0,1,0,0)" style="visibility: inherit; opacity: 1; transform-origin: 0px 0px 0px;" clickurl="https://aquickmarkewt.com" newwin="true">
      <g xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="M64 121.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" style="isolation:isolate" fill="#231f20" stroke="#231f20" stroke-miterlimit="10" opacity=".25"></path>
          <path d="M415 107.5H58A49.55 49.55 0 018.5 58h0A49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58h0a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc" stroke="#231f20" stroke-miterlimit="10"></path>
          <path d="M58 115.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" fill="#231f20" stroke="#231f20" stroke-miterlimit="10"></path>
          <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path>
          <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path>
          <path d="M444.6 18.4a49.24 49.24 0 019.9 29.6A49.55 49.55 0 01405 97.5H48a49 49 0 01-29.6-9.9A49.24 49.24 0 0058 107.5h357A49.55 49.55 0 00464.5 58a49.24 49.24 0 00-19.9-39.6z" fill="#166091"></path>
          <path d="M23.5 65A41.53 41.53 0 0165 23.5h357a40.79 40.79 0 0125.6 8.9A41.33 41.33 0 00415 16.5H58a41.46 41.46 0 00-25.6 74.1A40.79 40.79 0 0123.5 65z" fill="#47a8ea"></path>
        </g>
      </g>
      <text x="0" y="0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 251, 76, 0, 1);" data-svg-origin="-120 -39" transform="matrix(1,0,0,1,0,0)" class="">Button</text>
    </g>
  </svg>

  <script>
    <![CDATA[
      // all the javascript goes here
    ]]>
  </script>
  </svg>

Chris Gannon mentioned wrapping the SVG with a div and adding the xmlns attribute. I tried that and it works as long as there isn't any javascript (which has to be contained in a CDATA block). If you do, it complains about an Unexpected token right where the CDATA starts in the script tag.

Unexpected token '>'

I tried placing the nested SVG in a foreignObject, when you do, the SVG no longer appears. The pen that has all the javascript and animation in it is here in case anyone is interested...

See the Pen OJVQxzy by swampthang (@swampthang) on CodePen

 

If you inspect the elements tab in Safari's inspector on that page, you can drill down into the nested SVG and see the animation running and, selecting the g element that is animating, you can see the bounding box highlighting where it should show up. I saw where Jack told someone that Safari is the new IE. I believe it!

 

Any of you SVG gurus have any idea what needs to happen to be able to see the nested SVG in Safari?

See the Pen NWqyMVK?editors=1010 by swampthang (@swampthang) on CodePen

[ZachSaucier]

Nested SVGs are not well handled across browsers - you should avoid them whenever possible.

 

I hope someone is able to help, but I have my doubts that it's within our control to work around.

[PointC]

21 minutes ago, ZachSaucier said:

Nested SVGs are not well handled across browsers - you should avoid them whenever possible.

+1

 

This has been my typical experience with nested SVGs.

[swampthang]

26 minutes ago, ZachSaucier said:

Nested SVGs are not well handled across browsers - you should avoid them whenever possible.

In the app, I can convert SVGs into png images and it will work. But, I'm trying to avoid the file-size hit. You mention avoiding nested SVGs so I was thinking maybe I could create a <g> element and drop the contents of the SVG into it. I tried doing that but it doesn't display either. Safari. Grrrrr.

[swampthang]

Ok, I think I might have figured this out. I had to embed the foreignObject in a <g> element. I wrapped the image itself in a foreignObject. Seems to have fixed it!

See the Pen ExjQBWM?editors=1010 by swampthang (@swampthang) on CodePen