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.
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.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.
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
.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`);
}
Last modified 2yr ago