目的
- 誰でも気兼ねなく自由に使える画像がほしい
- 法的リスクを極限まで減らす
- 改変、再配布、商用など一切の制約なし
- モナコインの布教に貢献したい
そのためには次のことを満たす必要があると考えました。
目標
- ライセンスをCC0にする
- ファイルサイズを小さくする
- 一覧できてダウンロードできるページを作る
- SVGでレスポンシブ対応する
- SVGでlight/darkモード対応する
- PNGでフォールバックする
ライセンス
CC0です。ここにある画像はDMD様の素材を元に私が改変したものです。
技術
light/darkモード
SVGには明暗モードに対応しているものがあります。OSのlight/darkモードに応じて色が変化します。
Chromeブラウザではこれをテストできます。その手順は以下の通りです。
- デベロッパツールを開く(Ctrl+Shift+I)
- デベロッパツール右上⚙⋮❌のうち⋮をクリックする
- More tools→Renderingをクリックする
- デベロッパツール下にあるRenderingタブをクリックする
Emurate CSS media feature prefers-color-shceme
の所までスクロールする- その下にあるコンボボックスからテストしたいカラースキームを選ぶ
- prefers-color-shceme: light
- prefers-color-shceme: dark
- SVGがその状態に応じた色になる
SVG
light/dark + フォールバック
SVGは<img>
で表示すると内部のスタイルが適用されず、light/darkモードが適用されない。そこで<object>
を使うと解決する。<object>
でPNGにフォールバックするにはネストする。以下のように。
<object data="some.svg"
type="image/svg+xml"
width="64"
height="64">
<object data="some.png"
type="image/png"
width="64"
height="64">
</object>
</object>
light/dark + フォールバック + リンク
リンクやボタンにするには上記を<a>
で囲む。
<a href="#"><object data="some.svg" ... </object></a>
だがこれはクリックできない。そこで以下CSSを追加する。
a {
display: inline-block;
}
object {
pointer-events: none;
}
情報源は以下。
投げモナ
Mpurse API で投げモナするときは以下。
await window.mpurse.sendAsset(
'MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu',
'MONA',
0.114114,
'plain',
'Good job!')
これを<a>
の中に入れる。
<a href="javascript:/*await*/ window.mpurse.sendAsset('MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu', 'MONA', 0.114114, 'plain', 'Good job!')" title="投げモナする">
<object ...></object>
</a>