hic et nunc // advanced SVG NFTs

UPDATE: Support for HTML “packages” have been added. Please see the template here.

Great package by neelts available here for packaging interactive SVGs.

hit et nunc (“here and now” in Latin) is a decentralized app (dApp) based on the Tezos blockchain for minting Non Fungible Tokens (NFTs).

There are many and varied marketplaces for NFT generation, distribution and sale, but this one is different for a few reasons:

• open to anyone
• runs on Tezos so transactions are cheap — and carbon footprint is low!
• it allows more than images and video

The last item, that it allows more than images (JPGs / GIFs) and video, is a little more complex currently than simply uploading any kind of file. It does handle display of glTF for display of 3D objects for example, but does not have a way to have interactive applications …

… or does it? Yes it does. That’s why you’re here!

The easiest way to get interactive or generative art onto hit et nunc is to include it in an SVG. These are generally simply used as vector graphics on the web, but have some advanced abilities which allow us to further embed images, Javascript and HTML inside these SVGs.

Examples

All examples can be copy/pasted into a text file and saved with file extension “.svg” and they will run in your browser — easy!

A Simple SVG

Displays a large red circle in the middle of a black screen.

Adding Javascript

SVG supports embedded Javascript but there are some things to note.

• You must wrap your JS in CDATA as SVG should be valid XML.
• Accessing the document is a little different than in an HTML: document.documentElement
• Not everything will work as expected. It sometimes depends on how this SVG was embedded into a page. On hic et nunc it will probably work as expected, but give it a try and explore.

This displays a large red circle on a black screen. But this time it moves to the right once a frame, and jumps back to the left when it leaves the screen.

Display an image in the SVG

Adding a raster image to your SVG isn’t too hard but here are some things to remember:

• You will have to add a xmlns:xlink attribute to your SVG tag. See below.
• Because you are creating an NFT you probably want to embed the image data inside the SVG itself so it isn’t lost at a later time. You can do this easily by encoding it as Base64. Again, see below.

This one just shows an TV test image centered on black.

Adding HTML (and an iFrame!)

So you want to display something more complex? How about some HTML, or even a whole other website inside an iFrame?!

Yep, we can do that! Again, there are a few things to keep in mind:

• Your HTML needs to be added to a foreignObject tag inside your SVG. It is likely this needs to be added inside something like a g tag.
• I have found you need to wrap your HTML content in a tag with an xmlns attribute defining it as xHTML content.
• If you have load another page in an iFrame inside the SVG the page you load may not have access to APIs it uses (CORS) or cookies it normally relies on, so only simple pages may load. It is also possible that the server you try to load your page from will simply refuse the connection (if you try apple.com this will happen).

P5JS

If P5JS (Processing in Javascript) is more your style then Twitter user vamoss created this great template (see original post).

Where to now?

Go make your first NFT on hit et nunc!

Note: some of these techniques may not work in the future, or may be superseded by better ways of doing things.