External SVG loaded but not displayed

[PlekszyGladz]

Hi,
I'm quite new to OpenSeadragon so I'm currently trying to set up a small example page with OpenSeadragon and SVG-Overlay to gain better understanding of it. Applying an overlay with d3 (like the one on the example page) works just as it should.
But the overlay does not show at all when I try and load a external file. It is correctly loaded and appended to the <g>-Element as seen here:

<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="721" height="966">
  <g transform="translate(36.0480700651691,64.99999999999946) scale(618.7738610903659) rotate(0)">
    <svg width="200" height="600" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green"></circle>
    </svg>
  </g>
</svg>

I accidentally dragged and dropped the inner <svg>-Node out of the <g>-Element and then it suddenly displayed the overlay, but of course it won't zoom and pan with the image like that. I tried the same with larger, more complex SVG-Files from across the internet and they all behave the same.

Do you have any idea what I am doing wrong or what is causing this. There must be something I overlooked because the SVGs all seem to be OK...

Thanks in advance for any help!

[iangilman]

Seems like loading external SVGs is a popular feature request! We should definitely integrate some code for doing that. @vortice3D maybe that's something you can help with, based on the knowledge you've gained?

@PlekszyGladz you might take a look at the threads for #29 and #28 for additional information.

At any rate, I'm pretty sure you can't nest an SVG element inside of another SVG element, so what you'll need to do is pull all of the elements out of the external SVG element and place them in the overlay SVG element. With your above example, that would look something like this:

<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="721" height="966">
  <g transform="translate(36.0480700651691,64.99999999999946) scale(618.7738610903659) rotate(0)">
    <circle id="greencircle" cx="30" cy="30" r="30" fill="green"></circle>
  </g>
</svg>

[PlekszyGladz]

I tried to implement your advice resulting in the following, just like you predicted:

<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="721" height="966">
  <g transform="translate(16.736743838685612,7.63307764020814e-14) scale(687.5265123226287) rotate(0)">
    <circle id="greencircle" cx="30" cy="30" r="30" fill="green"></circle>
  </g>
</svg> 

however the graphics still don't show.

As for the nested SVG elements: this should be possible (see here for example). The graphics are displayed when I manually move the inner SVG out of the g-Element like this:

<svg>
  <g>...</g>
  <svg>...</svg>
</svg>

The same holds in the first example: As soon as i manually move everything outside <g> it renders just fine. So I guess the problem has to do something with this <g>- Tag or maybe its has something to do with the absolute pixel values of the svg?

[vortice3D]

Hi PlekszyGladz:

Nested svg can be "technically" possible but a non very good practice in terms of semantics (whether it can be applied to pure graphical items) and prone to reference/size errors for sure. I have experience with it.

About the not shown circle usually is a problem of scales, too much large or too much small.
Try to tweak it manually in the g OSD container, directly with the aid of Web Inspector on FF or Chrome.

[iangilman]

@PlekszyGladz Keep in mind that the SVG overlay uses the OSD viewport coordinates. Have you done anything to change your viewport coordinates? If not, the width should go from 0 to 1, in which case your circle at 30 is way outside of the viewable space. Either change your viewport coordinates to fit or scale your circle down.

For more information on viewport coordinates, see:

http://openseadragon.github.io/examples/viewport-coordinates/