Onchain SVGs

Overview of Aavegotchi's onchain data storing

Aavegotchi stores a lot of information onchain, such as the Aavegotchi's unique name, the numericTraits about the Aavegotchi, and other details. But unlike many NFT games, we actually store all of the SVG files themselves onchain.

SVG data are stored and retrieved with SvgFacet.sol and LibSvg.sol.

It costs less gas to store SVG data as contract data than to store it in contract storage. Normally contract bytecode is stored as contract data, but it is possible to store other data as contract data, as we are doing with SVG data.

Storing SVG as Contract Data

This function is used to store SVG data:

struct SvgTypeAndSizes {
  bytes32 svgType;
  uint256[] sizes;
}

function storeSvg(string calldata _svg, SvgTypeAndSizes[] calldata _typesAndSizes) 
  public 
  onlyDaoOrOwner

The _svg argument holds one or more SVG images as strings. It is more gas-efficient for _svg to contain multiple SVG images because _svg is stored as the entire contents of a contract. Creating a new contract has an up-front fixed gas cost of 32,000.

_typesAndSizes is used to say what category the SVG images are and contains size information so the _svg data can be broken into multiple SVG images.

svgType specifies the category of SVG images in _svg. Each SVG category has SVG images with unique incrementing identifiers that start at 0. SVG categories are used to distinguish different groups of SVG images. Here are SVG categories:

• aavegotchi

• collaterals

• eyeShapes

• wearables

The storeSvg function above calls the following function to actually store the _svg argument as contract data:

function storeSvgInContract(string calldata _svg) 
  internal 
  returns (address svgContract) {

storeSvgInContract contains the bytecode of a contract constructor function that returns data as a contract. storeSvgInContract uses the constructor function to create a contract consisting of _svg and returns the Ethereum address.

Retrieving SVG Data

External functions call the getSvg(bytes32 _svgType, uint256 _id) internal function from LibSvg.sol to get SVG data. _svgType is the SVG category. _id is the unique id of an SVG image.

Previewing Aavegotchis

You can request the SVG data needed to display any assortment of Aavegotchi traits and equipment in an image using the previewAavegotchi function. A breakdown of the arguments is followed by an example of using it in a JavaScript environment.

function previewAavegotchi(hauntId, collateralAddress, numericTraits, equippedWearables)

hauntId refers to the minting events of new Aavegotchi's, which increments from zero, so Haunt 1 is hauntId = 0. Different "haunts" have different varieties to their designs such as the collateral type and eye shape. The expected argument is a whole integer, for example supplying 0 is used to produce Aavegotchi's with Haunt 1 collateral / eye shapes available.

collateralAddress is equal to the token collateral's address that would be used to stake the Aavegotchi which further determines the color and style of its features. The expected argument is a string, such as 0x9719d867a500ef117cc201206b8ab51e794d3f82 which is the maUSDC address Polygon.

numericTraits: int16[6] is an array of 6 traits from 0-100 for newly-summoned Aavegotchis, the last two values in the array determine some visual features like eye shape and color. The expected format is an array of whole integers such as [ 1, 10, 50, 99, 0, 1]

equippedWearables: int16[16] indicated equipped items on the Aavegotchi by matching the svgId to the index of the array, if the svgId is zero then the slot has nothing equipped. The index of the item in the array determines what slot is matches, for example [ 0, 0, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0] produces a character with only a santa hat because the svgId of Santa Hat is 43, and the HEAD slot corresponds to the third index of the equippedWearables array.

Mappings for index of equippedWearables array

For complex outfits you can query a full list of item information from the subgraph under itemTypes.

Browser Example: CodeSandbox Playground

In a JavaScript environment for example, you could use the above function to create an image of an Aavegotchi and assign it as the source of an <img> element so it can be viewed in a browser.

import { SvgFacet__factory, contracts } from "@aavegotchi/sdk";
import { getDefaultProvider } from "ethers";

// 0x86935F11C86623deC8a25696E1C19a8659CbF95d on Polygon
const diamondAddress = contracts.addresses.diamond[137];
const provider = getDefaultProvider("https://rpc-mainnet.maticvigil.com");
const svgFacet = SvgFacet__factory.connect(diamondAddress, provider);

async function previewBlob() {

    const tokenId = 3; // getting an existing gotchi id
    const svgDataSpecific = await svgFacet.getAavegotchiSvg(tokenId);
    console.log(svgDataSpecific, `Summoned Aavegotchi`);

    const hauntId = 0;
    const collateralAddress = "0x9719d867a500ef117cc201206b8ab51e794d3f82"; //maUSDC
    const numericTraits = [99, 99, 99, 99, 99, 99];
    const equippedWearables = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

    const svgDataPreview = await svgFacet.previewAavegotchi(
        hauntId,
        collateralAddress,
        numericTraits,
        equippedWearables
    );
    console.log(svgDataPreview.length, `preview gotchi`);

}