32x32のドット絵をSVGで包んで拡大する

フルオンチェーンNFTは画像をオンチェーンにする必要があります。画像のサイズがガス代に直結するので できるだけ小さいサイズ にしたいですが、 32x32のドット絵という制約下ならなにか工夫できるかも？ ということでやってみました。

サンプル画像

以下のサンプル画像をEthereum Goerliテストネットに やっつけコントラクト でデプロイして確認しました。

属性	値
フォーマット	GIF
画像サイズ	32x32ピクセル
カラー	インデックスカラー、128色
データサイズ	1,139バイト

SVGのパスに変換してみる

直感的にはパスに変換するとむしろ大きくなるんじゃないかな？というところですが、変換してくれる素晴らしいサイトがあったので、とりあえずやってみました。
ドット絵用 svg コンバーター

属性	値
フォーマット	SVG
データサイズ	10,904バイト

まあそうですよね。

GIFのまま

サンプル画像のGIFをそのまま使ってみました。テストネットのOpenSeaで見るとこんな感じ。

32x32ですね😂
大きく表示して欲しいですが、そのためにデータサイズはあまり大きくしたくはありません。

SVGで包んで拡大する

そこでタイトルです。
画像はそのまま32x32で使い、SVGのimageタグで拡大してみました。
widthとheight、 image-renderingにpixelated を指定すると、変に補正がかからずドット絵としてはいい感じに拡大してくれます。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="1280">
  <image xlink:href="data:image/gif;base64, ＜Base64にした画像データ＞ width="1280" height="1280" image-rendering="pixelated"/>
</svg>

属性	値
フォーマット	SVG
データサイズ	1,774バイト

これなら大きく表示してくれました😁

参考サイト

• 【保存版】フルオンチェーンNFTの作り方_完全版（入門レベル）