Right-click-save-face Part 2

Continuing to clear up a common misconception about NFTs

This is essay 5 of 7 for The Tech Progressive Writing Challenge. Check out build_ to join the conversation.

Last time, we showed how to look up a specific NFT on the blockchain, determine if its data is stored on-chain or off-chain, and decode the data into a format that’s a bit easier for humans to decipher. We were able to determine that our example NFT has a name, description, attribute called “Love,” and an image associated with it. We were able to decode the image data, but it still looked like gibberish. In this post we’ll take a closer look at the svg image format and demonstrate a way to make better visual sense of the data.

If you’ve ever done any web programming, the decoded svg image data might look familiar

So, what should we do in this situation? Previously, we determined that the image data is stored in the SVG file format. If we take a look at the Wikipedia page for the SVG file format, we find that there is a helpful example showing 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

It turns out that all of the information needed to draw the image is present in the XML text, including 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 is a pretty basic example, and there are many more capabilities we could utilize when working with SVG images, such as:

• Color gradients
• Opacity settings
• Stretching or rotating an image

These are all things that are utilized by the SVG embedded in my NFT as it exists on the blockchain. We could walk through the code line-by-line and come up with a decent idea of how the final image should look, but that’s pretty time consuming. Instead, let’s just skip directly to the next step where we enlist the aid of a website to do the heavy lifting for us, and translate this code into an image that can be represented visually.

So, taking the raw svg data, let’s paste it into the Code box on https://www.freecodeformat.com/svg-editor.php, and click the Draw button. Now we can see what the NFT image should look like:

Let’s go ahead and check the image output on OpenSea, where we can confirm that the images match.

Let’s recap what we learned!

NFTs can exist entirely on-chain. We showed how the NFT data is stored, and how to decipher it. Next time someone goes for the right-click-save-as argument, point them this way.

This is only the start of our exploration of the web3 space.

Until next time, stay safe in the metaverse.