joeax / svidget

A JavaScript framework for building cool data visualization widgets in SVG.
MIT License
232 stars 26 forks source link

<object> tag in html the only way to embed a phidget? #6

Open Kortenbach opened 3 years ago

Kortenbach commented 3 years ago

I would like to embed a svidget into an SVG. I was thinking along the lines of using the SVG < svg > tag or maybe even the < use > tag. Anyone tried this?

The reason for this is that I want to use the inkscape sprite-sheet as a way to store a bunch of svidgets and then use Inkscape to put them on my screen. This way I can use them in a way that is similar to using a movieclip in Flash. (5h later... I found that Issue #2 is basically the same question...)

joeax commented 3 years ago

Back 5-6 years ago when I created the library it was not possible to facilitate communication between 2 SVG documents. But you can pass params to the child SVG document using the <foreignObject> tag and query string params. It's just that it's a one-way, standalone process (no interaction or event handling):

<foreignObject x="40" y="40" width="300" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml" style="background: yellow">
        <object role="svidget" data="https://www.svidget.io/widgets/helloworld.svg?d=Fred+Flinstone" />
    </div>
</foreignObject>

That being said, I am currently working on a rewrite (see rewrite-2021 branch), so if I can reliably test nested, multilevel svidgets that can communicate with each other I will put in an upcoming release.

Kortenbach commented 3 years ago

2 way comm in nested SVGs? That would be awesome!

Kortenbach commented 3 years ago

What about the use tag? Could that be used to communicate with a svidget in some way?

joeax commented 3 years ago

Unfortunately no. It's similar to <img> in HTML where it treats it like an image and not an active document, so it won't execute scripts inside. I looked into this last night though and am looking at ways to abstract the details of foreignObject/object i.e. supporting something like this: <use type="svidget" href="/path/to/foo.svg>...</use>

Kortenbach commented 3 years ago

The idea here is to use Inkscape. Put the svidgets in a symbol library, drag the symbols onto your drawing (will result in use tags) and animate them. That would make Inkscape a bit like using Flash and it's "videoclips". Very nice...

Kortenbach commented 3 years ago

A few years ago I tried something with Inkscape files where (at runtime) I replaced all the USE tags with SVG tags containing the original content that's in the symbol tags. Ugly but it made things a little easier later on.

Kortenbach commented 3 years ago

The role="svidget" part of the <object> tag may not be legal to use since no "real" role is specified(?) It would be oke when a real role is included. Interresting read: https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html

Kortenbach commented 3 years ago

How is the rewrite coming along?