Embedding Hype inside an SVG with an export script 🤯

Cescomare · March 16, 2021, 11:21pm

I report here parts of a technical conversation that I was having with @jonathan:

I've discovered that you can upload SVG on some NFT markets (most of them store the file on IPFS with Piñata), this will make most of the people think about uploading still vector images...but SVG can do a lot more! You can use CSS3 to animate them and even use JS!

It's a weird thing (probably to fight XSS?) that browsers stop JS (including CSS interactions :hover :click ...but not animations) if the SVG is included by <img>, but there's a fix for that:

So basically SVG are basically "wrapped web 3.0 pages"! So I started to do a bit of research and I found out that you can embed even common HTML using the <foreignObject> tag!
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

So I asked @jonathan if could be possible to embed...Hype (of course)! He made some preliminary tests and it seems working!
Of course making an export script able to make a single SVG with all external files inline (using base64 for images) would be challenging...but I thought this could be the right place to find the right people interested on doing weird experiments like this!

Think about selling directly your interactive Hype projects through NFT markets as unique pieces stored on IPFS, that would be interesting IMO!

jonathan · March 17, 2021, 2:09am

Actually I might have spoken to soon... my initial testing was probably more in the context of an inline <svg> tag within an HTML document where it appears to work. I'm now seeing that it doesn't display if used in an <img src = "file.svg"> tag, which I assume is what the NFT platforms will do? I recommend more testing on this to see where foreignObjects do/don't work. I didn't see any errors in the console that would give me more info.

MaxZieb · March 17, 2021, 7:21am

Its not weird at all… it was a bad idea from the get go… people consider SVG as an image or decorative element to encapsulate vector scalable source material with the USP being lossless scaling. It was conceived as markup and so the creators can go crazy on the format. Putting JavaScript in there opens pandoras box as people upload it to all sorts of places considering this to be just an image. Just look at the forum … most user here are keen on "no code" and we are already talking about a subset of people interested in (web) technology. The general web user uses apps and CMS systems as a black box. Pressing buttons and never inspecting the content of files.

This is the compromise web browsers made. Even though the "bad idea" prevails as there might be some legitimate use cases in including SVG directly … declaring a SVG decorative (in this case as an image) will render it non interactive and in most cases even sandboxed. I was dealing with this when writing Export To Hype for Illustrator (used internally, still to be release to the public) as even loading external resources like web fonts is considered a violation of the sandbox (there are exceptions).

Cescomare · March 17, 2021, 11:20am

That's not a problem, you can open the SVG in a tab and it works perfectly: markets now consider SVG just as images (so they use <img> instead of <object> and of course it's good JS is disabled. This situation can change at any time (I already spoke with the dev of a market and they are investigating) and with little efforts (just using <object>). We're talking about switch a tag to avoid the sandbox or put a button in order to open the SVG in a new window/tab and get the full SVG abilities.

IMO the important points are:

making an interactive project with no coding skill can be done with Hype
storing it in a single SVG file seems to be technically possible
what is really missing is just an export script to make the process easy for everybody
in this way whatever Hype project can be uploaded on IPFS and sold in NFT markets
everything else is just about communication and presentation

drewbullen · March 17, 2021, 11:25am

Interesting!