> For the complete documentation index, see [llms.txt](https://docs.aavegotchi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aavegotchi.com/developers/aavegotchi-contracts/reading-from-aavegotchi-contracts/onchain-svgs.md).
# Fetching 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.
### **Previewing Aavegotchis**
You can request the SVG data needed to display any assortment of Aavegotchi traits and equipment in an image using the [`previewAavegotchi`](https://github.com/aavegotchi/aavegotchi-contracts/blob/master/contracts/Aavegotchi/facets/SvgFacet.sol#L291) 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.
For complex outfits you can query a full list of item information from [the subgraph](https://thegraph.com/explorer/subgraph/aavegotchi/aavegotchi-core-matic?version=current) under `itemTypes`.
#### Browser Example: [CodeSandbox Playground](https://codesandbox.io/s/laughing-kalam-lwmy3?file=/pages/index.js)
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 `![]()
` element so it can be viewed in a browser.
```typescript
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`);
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.aavegotchi.com/developers/aavegotchi-contracts/reading-from-aavegotchi-contracts/onchain-svgs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.