浅谈一下UniswapV3中的NFT图像生成

一、NFT与SVG

今年打开UniswapV3中的周边合约准备学习一下，突然发现了其中有一个NFTSVG.sol。看名字是用SVG来表示NFT，正好自己以前也有研究过NFT与SVG之间的应用联系，就打开源码大致看了一下，正是如此。

我们知道，NFT流行是从以太坊上的加密猫开始的，每个加密猫其实是一个ERC721的token，这个token又对应着一组数据结构，例如猫的主人，猫的眼睛颜色等。但是我们在前端显示的时候，这个猫眼睛到底是什么样子的，是前端图像组合的，也就是你的猫的图像其实是存于它们的网站上。后期有URL，每个token（猫）对应一个url地址，这个地址是一个猫的图像，因此，这里这个图像是存在于他们的服务器上。

这里就存在一个问题，当加密猫的前端和服务器关掉后，你还在哪能显示这只猫呢？答案是没有！那么我们能否把这个图像永存于以太坊之上呢？答案是肯定的！受制于以太坊存储限制，普通编码的图像并不方便直接保存在它的上面，并且也不方便修改。但是SVG可以，SVG虽然是矢量图像，但它更多的像是一段标准化代码，你甚至还可以在其中加入自定义标签。为此我们早些时候提出了直接将ERC20/721的token图像直接保存在以太坊上的EIP-2569提案，提案被pull的时间是2020年3月28号。这里是具体链接https://github.com/ethereum/EIPs/pull/2569 并且SVG是可交互式的，会对部分事件做出响应，例如点击，鼠标滑过等等。

UniswapV3中，也正是采用了这个方法（不能说是采用我们的方法）。将SVG的模板直接写死在代码中，然后采用abi.encodePacked函数将模板和对应位置的参数组合在一起，最后再转化为svg源码（字符串）输出。这样我们的NFT图像就可以直接在以太坊上获取了，即使Uniswap关门了也没有关系，你的token图像已经在以太坊上永存了。

二、UniswapV3中的NFT

我们先看一下UniswapV3具体的NFT图像（这里的NFT其实是代表用户添加某一个池子的流动性）： 从上图中我们可以看出这个NFT对应的池子为DAI/WETH，手续费是1% 笔者的运气还是差了一点点，只差一位数就是6666了。当然，这里是扯远了，ID就算全部是6也并没有额外用处。

三、UniswapV3的NFT生成代码

好了，图像看完了，我们具体来看UniswapV3上截取的两段代码： 第一段，外部接口，传入相应参数生成一个NFT的SVG图像：

function generateSVG(SVGParams memory params) internal pure returns (string memory svg) {
    /*
    address: "0xe8ab59d3bcde16a29912de83a90eb39628cfc163",
    msg: "Forged in SVG for Uniswap in 2021 by 0xe8ab59d3bcde16a29912de83a90eb39628cfc163",
    sig: "0x2df0e99d9cbfec33a705d83f75666d98b22dea7c1af412c584f7d626d83f02875993df740dc87563b9c73378f8462426da572d7989de88079a382ad96c57b68d1b",
    version: "2"
    */
    return
        string(
            abi.encodePacked(
                generateSVGDefs(params),
                generateSVGBorderText(
                    params.quoteToken,
                    params.baseToken,
                    params.quoteTokenSymbol,
                    params.baseTokenSymbol
                ),
                generateSVGCardMantle(params.quoteTokenSymbol, params.baseTokenSymbol, params.feeTier),
                generageSvgCurve(params.tickLower, params.tickUpper, params.tickSpacing, params.overRange),
                generateSVGPositionDataAndLocationCurve(
                    params.tokenId.toString(),
                    params.tickLower,
                    params.tickUpper
                ),
                generateSVGRareSparkle(params.tokenId, params.poolAddress),
                ''
            )
        );
}

可以看到，这个图像是由多个部分组成的，例如定义啊，边框文字啊， 中间内容啊，最后是SVG结束标签。我们看下面一段代码截图： 这段代码我只是一个简单截图，具体代码大家可以看它github上的源码。我们可以看到输出字符串的第一行就是', '' ) ); } else { svg = ''; } }

可以看到，稀有的多了一段变形（动画），具体的效果我的不是稀有token就不知道了。也许SVG专业人员可以还原出来。

四、其它

好了，UniswapV3的NFT图像生成就简单说到这了。

这里提一下我们以前演示EIP-2569时专门做了几个漂亮的纪念币（图像也是以SVG格式存在以太坊上）。本来最后一个儿童节纪念币可以免费领取的，但由于今年4月份以太坊柏林升级改动了部分操作的gas费用，现在out of gas无法领取了（其它纪念币受此影响买也无法购买成功了），遗憾！！！。这里将地址放出来，有兴趣的朋友可以去看看。

http://toh.best/latest