Creating a dynamic SVG NFT that updates in real-time based on-chain data

4 min readMar 11, 2022

For the past year, NFTs have been the surprise breakout use case that has onboarded millions of new uses to crypto and web3. The majority of NFTs currently consist of static images sometimes with predefined changes that get “revealed”. But as programmable smart contracts, ERC-721s are capable of so much more.

IPFS hosted NFT images

A common criticism of NFTs is that they are “ just a link to picture that’s not even on the blockchain”. For many famous projects like Bored Ape Yacht Club this is true.

The ERC-721 standard expects a tokenURI to return metadata including an image link. In the case of Bored Apes, the metadata is stored on IPFS. We can see this by querying the tokenURI of the Bored Ape contract directly on Etherscan.

TokenURI for token 969 returns an IPFS link

That link returns the full metadata for the NFT including the image which is also on IPFS.

As a side note and a rather philosophical point, NFTs are receipts and not the images themselves. Check out EveryNFTEver for a good succinct explanation.

On-chain SVG NFTs

While IPFS hosted metadata and images are more common, there exists an alternative type of NFTs where the data is stored fully on-chain directly in the smart contract. Instead of a link, the tokenURI returns an encoded json data including svg data that can be rendered in browser.

The most famous example of an SVG NFT is Loot.

White text on a black background. This image is not from IPFS but instead an encoded svg file that the browser can render. There are that are fully on-chain and don’t rely on any external links. The full contract can found on Etherscan, but below is the relevant segment.

Overriden tokenURI function in Loot Contract

The SVG data is programmatically generated, encoded and returned by the contract.

Reading On-chain data

Loot is a simple example but it illustrates the difference versus IPFS hosted images. Because the logic to determine the SVG is executed on chain, it opens opens up a bunch of possibilities.

We can read data from other smart contracts and include it in the SVG! The data would be automatically updating reading every time the render function is called! This makes the SVG image composable and reactive on data changes on chain.

Proof of Concept BuidlGuidl NFT

As a proof of concept, I wrote a simple dynamic SVG NFT for members of the BuidlGuidl.

BuidlGuidl NFT Demo

The idea is to be a badge NFT, the which reads the wallet’s ENS name, balance and work stream contract balance. And displays them in a nice minimalist way.

The ENS name and balances update each time the NFT is rendered.

Check it out on OpenSea. The full contract can be found here

External Contracts: Simple Stream and ENS Reverse Record

Most of the code is pretty self-explanatory. An interesting bit is using interfaces to interact with the two external contracts. Very common for other types of smart contracts but not for NFTs.

The first external contract is an ETH stream that each BuidlGuidl member has. The mint function mintItem(address streamAddress) expects a contract address which withdraws to the minters wallet. This contract’s balance is shown in the SVG.

The second is the Ethereum Naming Service’s Reverse Record contract that resolves the ENS name (if any) associated with the minter’s address.

Wallet binding on mint

The other quirk is the token id. Inspired by Ross Campbell’s Soulbound NFT idea, instead of regular integers the tokenId is a uint256 version of their address. Thus even if the token is transferred to another wallet, the associated address and data it looks up on chain will stay tied to the original minter’s address. Bound NFTs are an interesting as they are valueless for resale (since the display is tied on the minter) but at the same time can be immensely valuable to the bearer as an on-chain credential cannot be bought only earned.

Summary

We covered a bunch of topics:

IPFS vs on-chain SVG NFTs
Dynamic on-chain inputs for the SVG
The BuidlGuidl Tabard
Wallet bound NFTs

Hopefully this example illustrates the potential for NFTs beyond static images and inspires you to build your own. There’s lots of possibilities: redeemable tickets that expire, on-chain credentials, membership badges, achievements…