Interactive SVG using <object>?

I’m trying to embed an interactive, SVG-based, data visualization. I’m generating SVG from a separate system, (but still in the same second-level domain as my Discourse installation.) I’ve tried bringing the SVG in using an OBJECT tag…

<object type="image/svg+xml" data="full_URL_to_foo.svg">
(appears if object load fails)
</object>

If I simply bring that SVG (it’s dynamically generated each time) in with an IMG tag, the visual appears, but (as I expected) there’s no interactivity…

<img src="full_URL_to_foo.svg">

Thoughts or pointers where I can buy some clues re SVGs and Discourse? :slight_smile:

1 Like

The easier way to get this working is using an iframe. Add the SVG domain to the allowed_iframes site setting and add it to a post using HTML.

5 Likes

hmmmm, so that’s the easy way.

Is there a hard way I can try?

…because I want to have links in the SVG that change the browser location. Links in the SVG, in an IFRAME, change what’s shown in the IFRAME . . .

I suspect that embedding j/s in the topic, just before the IFRAME, and calling a j/s function in the page onclick in the SVG… that’s not going to work either.

Am I making sense? Should I be adding some thin j/s code ala Mitigate XSS Attacks with Content Security Policy and then trying to call that from within the SVG in the IFRAME? …or is “in the IFRAME” an airtight fortress?

Maybe I should be asking how I can directly inline the SVG into the page? Then use theme-component injected j/s to interact with my other server to dynamically update the SVG?

Cluebat please :slight_smile:

2 Likes

Putting the svg in the post marked by a sorrounding special div and using a theme-component to make it into an object tag using the decorateCooked callback may work. Check Developer’s guide to Discourse Themes

3 Likes

…in case anyone is following along, decorateCooked() is deprecated. I’m fiddling with decorateCookedElement() instead.

1 Like

I’m up against CORS/Access-Control-Allow-Origin. I’m not familiar with how that works…

I have two sites—the Hosted Discourse site (forum.moversmindset.com) and an Apache-based Wordpress site (moversmindset.com). Note that there’s no obvious content on the Wordpress site—it’s all generating RSS feeds, serving media, etc. If you go to the domain, it’ll just send you to the forum.

I have a directory, that serves SVG-type replies to GET request. For example (not the real url) https://moversmindset.com/foo/bar.php

In my Discourse theme I’m experimenting with script code. (eventually to be a proper plugin) It calls api.decorateCooked() on particular DIVs that have some data-custom added to them. So inside the function called by decorateCooked() I’m doing what amounts to

$.get(‘https://moversmindset.com/foo/bar.php’ … bla bla blah

So I want to retrieve the SVG and then append it to the DOM. But my browser error console says:

Question:

Does that mean I have to configure CORS on the Discourse installation or over on the Apache/Wordpress?

I do have https://moversmindset.com configured as allowed in CORS on Discourse.

2 Likes

I think it’s on this side. Can you take a look at Access-Control-Allow-Origin - HTTP | MDN if you haven’t already and see if that gives you any clues?

4 Likes

teeny tiny steps, but YES!

I had to add an Access-Control-Allow-Origin header on the apache/WP server. That made the j/s (sourced from the Discourse platform) happy. Thanks.

3 Likes