Lets put SVGs on chain and save over 60% in gas fees
cSVG is a dictionary compression/decompression library to put SVG data on the ETH blockchain for way less gas.
Lets take a look at the following SVG:
cSVG takes this a few steps further and stores properties and tags as indexes and uses fixed point floats stored in two bytes for decimal numbers and colors stores as 3 bytes to minimize on-chain storage. By using the cSVG library, this SVG is compressed into a much smaller array of bytes
The total size of this cSVG is 175 bytes. This results in more than 60% savings in gas to put this SVG on chain!
When it is time to render the image, calling the render function of the cSVG smart contract decompresses the cSVG into an actual SVG and returns it as a string. Below is the result
If the image above was stored on chain as svgId #1 and a red opaque circle was stored as #2, you can easily stack those images on top of eachother. The cSVG would be:
And the resulting image would be:
How toTake an SVGs and paste it into the upload form a few lines at a time. Use the Check SVG button and inspect the code of the SVG presented to you to ensure it is encoding properly.
Let me know if you have any issues cSVG saves a lot of space on-chain by compressing data. These savings come with some trade off's
- Nesting too deeply or having extremely complex paths will throw an error
- All numbers must be less than 1023 and more than -1024
- Decimals have a granularity of 0.03 (if you specify 1.04 it will automatically round to 1.03)
- All stroke and fill properties must be defined with a color code (#ff0000 etc)
- To make a stroke or fill transparent, set fill-opacity or stroke-opacity to 0