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!
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.
- You must wrap your JS in
CDATAas SVG should be valid XML.
- Accessing the document is a little different than in an HTML:
- 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:xlinkattribute 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
foreignObjecttag inside your SVG. It is likely this needs to be added inside something like a
- I have found you need to wrap your HTML content in a tag with an
xmlnsattribute 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).
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.