Update: In the time between my original Discord thread and this post, someone has offered me 1.2 Ethereum for my NFT. That is currently worth about $4000 USD. 🤯

pfp #61

I recently had a conversation about NFTs with some friends from outside the space, and ended up doing a discord thread on the topic. I wanted to share that writeup here as well, in case it helps anyone else make sense of this whole space. In this case, I was writing for a group of philosophers, so it does wax a bit philosophical at the end!

I recently minted an NFT. It currently exists in my wallet. I could look at the data a few different ways. First, I could view its raw data by interfacing directly with the blockchain. If we want to move up a level of abstraction, we could interact with the smart contract on a website like EtherScan. Here, I can enter the address for a wallet, transaction, token, etc, and view information on it in a nicely parsed format. EtherScan itself interfaces directly with the blockchain on their backend, and serves nicely formatted data up as a service to developers and individual users. Here is the interface for the smart contract for my NFT: https://etherscan.io/token/0x75c3b1035b1898dc96c22481f886a80adfd69c7a?a=61#readContract

If you scroll down to the “tokenURI” section and expand it, you can enter my token ID (61) and click the “Query” button to see the Uniform Resource Identifier (URI) for my token. The URI is used to specify either the location of data to be associated with the NFT (so, a website URL), or the data itself, which is the case here. If you check out my token’s URI, it looks like complete gibberish unless you speak a verify specific language called Base64.

tokenURI response as base64-encoded json data

Luckily, we don’t need to learn how to speak Base64, there are websites that translate this language into something that’s a bit more readable. We can decode the tokenURI data for my NFT on [https://www.base64decode.net.](https://www.base64decode.net./) If I copy and paste the Base64-encoded data from my token into the website, I can get a better sense of what that data represents. Let’s see what we have:

Ok, so it looks like we can see that the NFT exists on the blockchain as an actual entity in and of itself, it is not pointing elsewhere. It has a name, a description, and an attribute named “Love” with a value of 16. There’s also more Base64 data! There are hints in this data as to how we should interpret it. Those hints are used both by people and software when it comes time to decide how to process a given blob of data. This one looks like it’s an image:

The “data:image/svg+xml;base64” prefix tells us that this data should be interpreted as an image, in a graphics file format known as SVG (Scalable Vector Graphics) that is written in XML (Extensible Markup Language). The SVG format allows resizing of an image without loss in resolution. If you’ve ever tried scaling an image that uses a Vector format (such as a .jpeg or .png file), you’ll know that the results are generally pretty pixelated and terrible looking. XML is another language that both humans and machines can read, and much readily than Base64.

So, taking what we already know, let’s copy this hidden Base64-encoded data we just uncovered (not including the “data:image/svg+xml;base64” prefix) and paste in back into the same Base64 decoding website as before. Here is the result:

Let’s take a minute to orient ourselves here. So far we’ve located my specific NFT token on the blockchain, extracted the data it contained, and decoded it into a format that we can somewhat understand. We know it’s an entity that has a name, a description, an attribute named “Love” with a value of 16, and an image that is associated with it. When we decoded the image data, we found something that’s more readable, but not by much.

If you’ve ever written a webpage (or accidentally clicked “view source” on a webpage), the revealed text might look familiar, but for the vast majority this will still just look like gibberish. So, what should we do in this situation? Well, luckily we live in the 21st century and Wikipedia is just a hop away. If we take a look at the Wikipedia page for the SVG file format, we find that there is a helpful example that shows the relationship between these cryptic strings of text and their representation as an image:

Screenshot of example code from the Wikipedia page for Scalable Vector Graphics

All of the information needed to draw the entire image is present in the XML text, including setting the position, dimensions, and color of the various visual elements. Ignore the strange syntax in the text, and let your eyes pass over it until they pick out familiar words. Then, see if you can identify where or how that word relates to the example image. Do you see where the orange circle, as represented in the image above, is defined in the XML text?

Screenshot of code to define an orange circle

This example is pretty basic, and doesn’t show many of the capabilities we could utilize, such as color gradients, opacity settings (allowing visual layers to be represented with varying degrees of transparency to the layers below), and image component manipulation (stretching, rotating, etc). These are all things that are utilized by the SVG embedded in my NFT as it exists on the blockchain.