一、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>'
            )
        );
}

可以看到，這個影像是由多個部分組成的，例如定義啊，邊框文字啊， 中間內容啊，最后是SVG結束標簽，我們看下面一段代碼截圖：

這段代碼我只是一個簡單截圖，具體代碼大家可以看它github上的原始碼，我們可以看到輸出字串的第一行就是<svg width="290" height="500" viewBox="0 0 290 500" xmlns="http://www.w3.org/2000/svg"，這是SVG定義，然后它這個比較復雜，SVG中又嵌入了Base64編碼，見

Base64.encode(
    bytes(
        abi.encodePacked(
            "<svg width='290' height='500' viewBox='0 0 290 500' xmlns='http://www.w3.org/2000/svg'><rect width='290px' height='500px' fill='#",
            params.color0,
            "'/></svg>"
        )
    )
),

這段代碼應該是畫了一個寬290像素，高500像素的矩形，這個筆者對SVG并不是專業的，所以就不再研究具體怎么畫的了，

余下的代碼我們暫時不看了，總之一句話，它生成SVG原始碼的方法就是不停的使用abi.encodePacked函式將模板字串和相應的引數值組合在一起，最后組合成一個完整的svg原始碼字串，

三、UniswapV3中NFT的稀有屬性

再次提醒一下，UniswapV3中的NFT其實是你添加的流動性，千萬不要隨便送人（賣出）喲，同時，這個NFT還分稀有的還是普通的，那么什么樣的NFT才是稀有的呢？下面有判斷代碼：

function isRare(uint256 tokenId, address poolAddress) internal pure returns (bool) {
    bytes32 h = keccak256(abi.encodePacked(tokenId, poolAddress));
    return uint256(h) < type(uint256).max / (1 + BitMath.mostSignificantBit(tokenId) * 2);
}

代碼的第一步是將tokenId和交易對（池）地址組合一下進行哈希運算，然后計算的結果和某個運算結果相比較，我們來按代碼計算一下：

計算之前我們先要獲取對應fee的Pool地址，從上圖中我們可以看到，該NFT對應的交易對的兩種代幣及地址為：

• DAI：0x6b175474e89094c44da98b954eedeac495271d0f
• WETH：0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2
• fee：10000，因為我們的手續費率為1%，而分母為1000000，
• poolAddress：0xa80964C5bBd1A0E95777094420555fead1A26c1e

我們直接在Factory合約中查詢對應的池子地址，查詢地址為:
https://cn.etherscan.com/address/0x1f98431c8ad98523631ae4a59f267346ea31f984#readContract

點擊其中的getPool按鈕，輸入上面的地址和費率，點擊查詢按鈕，得到地址：0xa80964C5bBd1A0E95777094420555fead1A26c1e，這個就是我們的poolAddress了，

為了計算是否稀有，我們將上面的函式分解一下（內部的，無法直接呼叫），寫一個合約來計算，

// SPDX-License-Identifier: GPL-2.0-or-later
pragma solidity >=0.7.6;

import '@uniswap/v3-core/contracts/libraries/BitMath.sol';

contract RareTest{
    function getBytes(uint256 tokenId, address poolAddress) public pure returns (bytes32) {
        bytes32 h = keccak256(abi.encodePacked(tokenId, poolAddress));
        return h;
    }
    
    function getUint(bytes32 h) public pure returns(uint) {
        return uint(h);
    }
    
    function getResult(uint tokenId) public pure returns(uint) {
        return type(uint256).max / (1 + BitMath.mostSignificantBit(tokenId) * 2);
    }
    
    function isRare(uint256 tokenId, address poolAddress) public pure returns (bool) {
        bytes32 h = keccak256(abi.encodePacked(tokenId, poolAddress));
        return uint256(h) < type(uint256).max / (1 + BitMath.mostSignificantBit(tokenId) * 2);
    }
}

我們直接使用remix進行測驗（部署時選JavaScript VM)，分別呼叫上面的函式得到的結果為：

getBytes:  0x7510738a918c5116c753b45e7b5a58aa3994cf345e426f54cd9405b1fda306f6
getUint:   52949670273909147826988446709444914284054628203600607669243403349492999849718
getResult: 4631683569492647816942839400347516314130799386625622561578303360316525185597
isRare:    false

我們從上面的輸出是可以驗證我們的NFT不是稀有的，那么稀有的多了一個什么呢？代碼如下：

function generateSVGRareSparkle(uint256 tokenId, address poolAddress) private pure returns (string memory svg) {
    if (isRare(tokenId, poolAddress)) {
        svg = string(
            abi.encodePacked(
                '<g style="transform:translate(226px, 392px)"><rect width="36px" height="36px" rx="8px" ry="8px" fill="none" stroke="rgba(255,255,255,0.2)" />',
                '<g><path style="transform:translate(6px,6px)" d="M12 0L12.6522 9.56587L18 1.6077L13.7819 10.2181L22.3923 6L14.4341 ',
                '11.3478L24 12L14.4341 12.6522L22.3923 18L13.7819 13.7819L18 22.3923L12.6522 14.4341L12 24L11.3478 14.4341L6 22.39',
                '23L10.2181 13.7819L1.6077 18L9.56587 12.6522L0 12L9.56587 11.3478L1.6077 6L10.2181 10.2181L6 1.6077L11.3478 9.56587L12 0Z" fill="white" />',
                '<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="10s" repeatCount="indefinite"/></g></g>'
            )
        );
    } else {
        svg = '';
    }
}

可以看到，稀有的多了一段變形（影片），具體的效果我的不是稀有token就不知道了，也許SVG專業人員可以還原出來，

四、其它

好了，UniswapV3的NFT影像生成就簡單說到這了，

這里提一下我們以前演示EIP-2569時專門做了幾個漂亮的紀念幣（影像也是以SVG格式存在以太坊上），本來最后一個兒童節紀念幣可以免費領取的，但由于今年4月份以太坊柏林升級改動了部分操作的gas費用，現在out of gas無法領取了（其它紀念幣受此影響買也無法購買成功了），遺憾！！！，這里將地址放出來，有興趣的朋友可以去看看，

http://toh.best/latest