Loading an external SVG file.

[Salitehkat]

Hi,
Is it possible to load in "rect" an external SVG file instead of an image? (cross fingers..)
Ive been looking some examples, like this one. [https://github.com//issues/27]

and tried to change it to and svg file instead but no success.

Thanks lots in advance for any help.

[Salitehkat]

For anyone please refer here:

here

[iangilman]

Did you get it to work using the CodePen example? That example uses the Snap library to help out, but presumably it's possible without an extra library if you want.

Anyway, the basic idea is you open up the external SVG and pull elements out of it and drop them into the SVG attached to the OpenSeadragon viewer.

[Salitehkat]

I found the Snap library and did the work. It took me ages to understand the positioning and size of the svg but im on the way. Thanks !

[iangilman]

Glad to hear it's working out :)

[vortice3D]

Hi Salitehkat.

Could you please explain more in deep how have you made to have the referred Codepen working?

Even resolving the CORS issue (downloading and playing it all from a local HTTP server) and with not console errors, it still doesn't show any SVG at all for me.

Best regards.

[vortice3D]

Hi again Salitehkat:

Forgive me my last comment. I've finally succedeed to have it working (only a mistake with paths).

BTW, Any advice about your statement: "It took me ages to understand the positioning and size of the svg"?

Best regards.

[Salitehkat]

Hi, honestly didnt finish understanding it completely. Sometimes it works, sometimes it doesnt. What ive been concluding is that if your svg file measures 300px width, you have to put the same width in the viewer part

var viewer = OpenSeadragon({ id: "contentDiv", prefixUrl: "//openseadragon.github.io/openseadragon/images/", tileSources: [{ tileSource: tileSource, width: 300 }] });

This will show the svg same size as your viewport (like 1:1).

ps: My page is 100% width.

Finally ive seen that some svg grabbed form the internet work much better. MIne sometimes show, sometimes they dont, and the positions are not clear. So I have to check well about making proper svg.

here is a guideline that helps.

Im still experimenting. Ill post each success (if any ;).

suerte!

[vortice3D]

Hi Salitehkat; and thank you very much for your support.

At the moment I've been able to show basic SVGs but, as you say, other more complicated files (with symbols) are not shown completely. This is strange because if I drop that SVG file directly on the browser (FF, Chrome, IE,...) it is shown flawless (?).

Other aspect of this developing is that I'd prefer not to use any third parties SVG lib, and implement the functionality with my own vanilla JavaScript; but well, when I have all this working with Snap, will be the time to deal with it.

Thanks for your time.

P.S. BTW, the guideline you are mentioning is a very good reference.

[iangilman]

One thing to note about that codepen is that it's assuming there's just a single element at the top of the SVG that needs copying over (a g). In reality, some SVGs have a lot of elements that aren't grouped into a g, or maybe there are a bunch of groups or whatever.

Another thing to keep in mind is the SVG has its own idea for how big it should be drawn (i.e. the coordinates of all of its elements). You may need to wrap the whole thing in a transform to adjust it as you need.

[vortice3D]

Ok, Ian:

Now I have all working and w/o the help of any third party lib, as I prefer The loading mechanism is a standard Ajax procedure and I can position and scale all with the help of a syntax like this:
g.setAttribute("transform", "translate(0.4,0.3)scale(0.0025)");

The truth is that in all this process of having the SVG (g blocks indeed) embedded fine, the use of FF Document Inspector was of a great help.

However, a strange think happens, and I'd like to ask you about it: the SVG is only shown briefly (of course with a correct style, position and size) and then immediately hidden behind (I suppose as I can´t see it) the OSD image.

Do you have an idea of what can be happening here with the SVG element? I'm tried to set z-index to a large value (i.e. 9999) w/o any different behavior.

Thanks for your time.

P.S. BTW I'm using also a standard OSD overlay (in order to show a focus rect styled via CSS), which is shown w/o problem over the image.

[vortice3D]

Hi again:

Please, forgive my last comment.

The apparent "hiding" of SVG elements was only a temporal visualization effect.

The SVG elements seems to be shown first, at the center of the still-not-shown image (where I have my viewport focused) and then re-positioned (transform applied) to their final coordinates.

In my case that coordinates where at the top of the image and out of my view.

[vortice3D]

And again here:

Well, to complete my last comment, doing the things in a proper way, that is, waiting to have the image loaded before loading the SVGs, by means of:

_viewer.addHandler('open', function() { ... _loadSVG(...); ... }

avoids the "phantom" effect.

My fault.

Thanks for your time.

[iangilman]

Fantastic! Glad to hear you're getting it figured out. Looks like you were able to sort it all out :)

I wonder if you might be able to share some of the knowledge you've gained doing this... I don't know if it would be a blog post or some sample code or a plugin, but I'm guessing you're not the only one who would like to be able to add SVG like this!

[vortice3D]

Ok Ian, as soon as I have all the modules working together I'll try to follow your recommendation.

Well, I feel like I've kidnapped this Salitehkat 's thread for my own purposes. In that case I wanted to apologize.

Best regards.