Onchain SVGs

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.