私は

ライブアライブ（リメイク版） 攻略メモ帳
https://livealivem.stars.ne.jp/

というゲーム攻略サイトをやっているんですが、リメイク版発売だ！　攻略サイト作ったるぞ！　という時に、アイコンやらロゴやらは当初、普通に画像ファイル（png）で作るつもりでいました。
が、実際に作って表示してみたら、PCからは綺麗に見えるけど、スマホだと解像度が低く見えてしまう。
そりゃ、パソコンのディスプレイといったら1920×1080で21.5インチ（幅50cmくらい×高さ37cmくらい）。1ドットが目視で確認できる。
でもスマホは、1920×1080で4インチやら5インチやらのサイズの画面。1ドットが目視できるようなサイズじゃありません。
これによって、PCではドットが目立たない画像でも、スマホではなんかドットが見えてしまう、ぼやけた汚い画像になる。
うむ、これはよろしくないな。

ちょっと話が横にそれますが……
一昔前、つまりガラケーが出たばかりの頃だと、画像ファイルを載せるにもガラケーの仕様やら通信周りの関係で、サイズをできるだけ小さくしましょうなんて言われていたのですが、スマホが出たら今度は逆転現象が起きたという、不思議な話ですね。
パソコン用とケータイ用に別ページ用意したり、画像サイズ調節して2種類画像用意したり……
今でもパソコン用とケータイ用に別ページあるウェブサイトもありますが、でも一般的には、「どんなデバイスから見てもOKなレスポンシブデザインでWebページを作りましょう」な流れなのかな。
ゲームの公式サイトなんかで、パソコンでブラウザの横幅変えながら閲覧するとレスポンシブになっているのがわかります。ライブアライブはじめ、最近のスクエニさんのゲームの公式サイトとか、カプコンさんもそう（逆転裁判関係のページとかも）。

ということで、わざわざパソコンとケータイで別の画像を用意する必要がないSVG（Scalable Vector Graphics）を使おうってことにしました。
SVGは、簡単に言うと「画像の設計図が文字と数字で記されているので画像として拡大縮小しても汚くならない」のです。



これらは実際に攻略サイトに載せているアイコンをかなり大きめに表示してますが、jpgだからちょっと画質的な問題があるだけでｗ、拡大してもぼやけた感じになりません。
実際、スマホで攻略サイトをピンチアウトして拡大しても、SVGで作っているアイコン類は綺麗に拡大されるはずです。
上のアイコンはゲームのスクリーンショットを見ながら、Inkscapeというフリーのドローソフトでせっせと作りました。
https://inkscape.org/ja/
できるだけ似せたつもりだけど、たまにうさんくさいのも混ざってる。ｗ

半分はInkscapeの練習ついでで作ったのですが、もうひとつは、攻略サイトにアイコン載せておかないとわかりにくいだろうな、とプレイしていて思ったからですね。
SFC版は日本語版しかないので、状態異常やらバフ・デバフ関係のアイコン表示が日本語（漢字とか）になっており、日本人にはとてもわかりやすいのですが、リメイク版は多言語対応なので画面のアイコンやら何やら、記号と英語が飛び交っています。
（ぶっちゃけると、HP吸収時に「32 ABSORB」と表示が出て、「あ、あぶ、あぶそーぶって何だっけ」って一瞬焦ったし。ｗ）

で、リメイク版のステータス関係のアイコンがちょっとややこしいなと感じたんですね。
素早さと回避、どっちがどっちか、今でもたまに「ん？」ってなりますし……
ゲーム内に説明は載っているんだけど、SFC版だったら「力」「速」「体」「知」と漢字一文字でぱっとわかったことが、今回は「このマーク何だったっけ？」ってなりそうな気がする。というか私がそういう状態だ。
基本的に「自分の使い勝手が良いようにしたい」というのが第一なので、攻略では、できるだけアイコンと説明を併記することにしました。
そういう意味でもSVGでアイコンを作っておく必要があったのです。

あと、昨今はファビコン（favicon）もSVGに対応してくれたので、SVGで作りました。
ただ、センスは全然ないけどな！ｗ
攻略サイトの名前やら何やら、めちゃくちゃテキトーでセンスの欠片もない。
あまりにセンスがないため、公式さんとは何も関係がない個人サイトだということがよくわかるからいいか。ｗ

～おまけ～

SVGだと簡単な記号の類なら作りやすいです。
じゃあ、キャラのドット絵だってそんなに難しくないんじゃね？
ドット絵は正方形の集合体ですからね。
ってことを思いつく人は当然たくさんいらっしゃる訳でしてｗ、ドット絵をSVGに変換するコンバーターはネット上にたくさん公開されています。
しかもライブアライブのキャラのドット絵は公式サイトなどで公開されている……
まあ、あれこれやれるよっていう話でした。ｗ
（ただ、これはあまりにもそのまますぎるので、攻略サイトのキャラアイコンに使うにしてもどうなんだという話で……ｗ　あと、元のpngファイルの方が容量としては小さいため、用途によってはSVGにする意味があったりなかったり）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="36">
	<defs>
		<g id="dots">
		<path d="M11 0h1v1h-1zM9 2h1v1H9v2h1v1h1v1h-1V6H9V5H8V3h1zm3 0h1v1h-1zm7 0h1v1h-1zm-6 2h1v1h1v1h-1V5h-1zm3 0h1v1h1v1h-1V5h-1zm3 1h1v1h-1zM6 6h1v1h1v1h1v1H8V8H7V7H6zm6 0h1v1h-1zm5 1h1v1h1v1h-1V8h-1zm-2 2h1v1h1v1h-1v-1h-1zm5 0h1v1h-1zM7 10h1v1H7zm11 0h1v1h-1zM6 12h1v1H6zm3 0h1v1H9zm7 0h1v1h-1zm2 0h1v1h-1z" fill="#252520"/>
		<path d="M12 0h1v1h-1zm4 1h1v1h-1v1h-1V2h1zm-6 1h1v1h-1zm2 2h1v2h-1zm2 0h2v1h-2zm5 0h1v1h-1v1h-1V5h1zm-9 1h1v1h-1v1H9V6h1zm4 1h2v1h1v1h-1V7h-2v1h-1V7h1zM7 9h1v1H7zm2 1h1v1H9zm-3 3h1v1H6zm3 1h1v1H9zm7 0h1v1h-1z" fill="#993916"/>
		<path d="M13 0h1v1h-1v1h2V1h1V0h1v1h-1v1h-1v1h-1v1h-1V2h-1V1h1zm4 2h1v1h1v1h-1v1h-1v1h1v1h1V6h1v2h1v1h-1v1h1v1h-1v2h-1v1h-2v-1h2v-2h1v-1h-1V9h1V8h-2V7h-1V6h-2V5h2zm-4 3h1v2h-1v1h-1V7h1zM5 9h1v1h1v1h1v1h1v-1h1v1H9v2H7v-1h1v-1H7v-1H6v-1H5zm10 1h1v1h1v-1h1v1h-1v1h-1v-1h-1v1h-1v-1h1zm-4 1h1v1h-1zm-1 3h1v1h1v1h-1v1H9v7h1v-2h2v1h-1v2H9v-1H8v-2H7v-1h1v-4h1v-2h1zm5 0h1v1h1v2h1v4h1v1h-1v2h-1v1h-2v-2h-1v-1h2v2h1v-7h-2v-1h-1v-1h1zM5 16h1v1h1v1H5v2H4v-2h1zm15 0h1v2h1v2h-1v-2h-2v-1h1zM3 23h1v3h1v1h2v-1h2v1H7v2H6v1H5v-1H4v-1H3v-3H2v1H1v1h1v1H1v-1H0v-1h1v-1h1v-1h1zm19 0h1v1h1v1h1v1h1v1h-1v1h-1v-1h1v-1h-1v-1h-1v3h-1v1h-1v1h-1v-1h-1v-2h-2v-1h2v1h2v-1h1zm-9 2h1v4h1v2h1v1h-1v3h1v1h-1v-1h-1v-4h-2v4h-1v1h-1v-1h1v-3h-1v-1h1v-2h1v-2h1zm-8 2H4v1h1zm17 0h-1v1h1zM6 28H5v1h1zm15 0h-1v1h1zm-7 1h-1v1h1zm-8 2h2v1H7v1H6v2h1v1H6v-1H5v-2h1zm12 0h2v2h1v2h-1v1h-1v-1h1v-2h-1v-1h-1z" fill="#171717"/>
		<path d="M10 1h1v1h-1zM7 3h1v1H7v2H6V4h1zm2 0h1v2H9zm3 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm3 0h1v1h-1v1h-1V4h1zm-8 3h1v1h-1zm5 0h1v1h-1zm2 0h1v1h-1zM5 7h1v2h1v1H6V9H5zm4 0h1v1H9zm2 1h1v1h-1v1h-1V9h1zm3 0h1v1h-1zm3 0h1v1h-1zM8 9h1v1H8zm11 1h1v1h-1v1h-1v-1h1zM8 11h1v1H8zm1 2h1v1H9zm7 0h1v1h-1z" fill="#443a28"/>
		<path d="M11 1h1v1h-1zm5 1h1v1h-1v1h-1V3h1zm-6 1h1v2h1v1h-1V5h-1zM8 5h1v1H8zM6 7h1v1h1V7h1v1h1v1H9V8H8v1H7V8H6zm8 0h2v1h1v1h-1V8h-2zm5 1h1v1h-1v1h-1V9h1zM8 10h1v1H8zm-1 2h1v1H7z" fill="#e7590e"/>
		<path d="M11 2h1v3h-1zM7 4h1v1H7zm0 2h1v1H7zm3 1h1v1h-1zM6 8h1v1H6zm9 0h1v1h2v1h-2V9h-1zM9 9h1v1H9z" fill="#ffa616"/>
		<path d="M7 5h1v1h1v1H8V6H7zm4 2h1v1h-1v1h-1V8h1z" fill="#ffe92a"/>
		<path d="M12 8h1v1h1v1h-1V9h-1zm-1 2h1v1h1v1h1v1h1v1h-1v1h-2v-1h-1v-1h1v-2h-1zm2 3h-1v1h2v-1zm0 4h1v1h-1v1h-1v-1h1zm1 2h1v1h-1zm-9 3h1v1H5zm15 0h1v1h-1zM7 24h1v1H7zm11 0h1v1h-1z" fill="#f2c387"/>
		<path d="M13 8h1v1h-1zm0 3h1v1h-1zm-2 3h1v1h-1zm3 0h1v1h-1zm-3 3h1v1h-1zm3 0h1v1h-1v1h-1v-1h1zm-3 2h1v1h1v1h-1v-1h-1zm3 1h1v1h-1zm-8 1h1v1H6zm13 0h1v1h-1z" fill="#aa562d"/>
		<path d="M11 9h1v1h-1zm3 0h1v1h-1v1h-1v-1h1zm3 2h1v1h-1zm-7 2h1v1h-1zm5 0h1v1h-1zm-3 4h1v1h-1v1h1v1h1v1h-1v-1h-1v-1h-1v-1h1zm2 1h1v1h-1zm-9 3h1v1h1v1H6v-1H5v2H4v-2h1zm15 0h1v1h1v2h-1v-2h-1v1h-1v-1h1zM6 25h1v1H6v1H5v-1h1zm13 0h1v1h1v1h-1v-1h-1z" fill="#d78751"/>
		<path d="M12 9h1v1h-1zm5 3h1v1h-1zm-4 7h1v1h-1zm-2 1h1v1h-1zm-5 6h1v1H6zm13 0h1v1h-1z" fill="#80331c"/>
		<path d="M10 10h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1z" fill="#4c1f12"/>
		<path d="M10 11h1v1h-1zm5 0h1v1h-1zm-2 11h1v1h-1zm-4 5h1v1H9zm7 0h1v1h-1zm-9 2h1v1h1v1H7zm11 0h1v2h-2v-1h1z" fill="#aab0aa"/>
		<path d="M10 12h1v1h-1zm5 0h1v1h-1zm-3 1h2v1h-2zm-5 2h1v1H7zm11 0h1v1h-1zM7 25h1v1H7zm11 0h1v1h-1z" fill="#e8f0e9"/>
		<path d="M11 12h1v1h-1zm3 0h1v1h-1z" fill="#703b1f"/>
		<path d="M6 14h1v1H6v1H5v-1h1zm2 0h1v1H8zm9 0h1v1h-1zm2 0h1v1h1v1h-1v-1h-1zM8 16h1v1H8v1H7v-1h1zm9 0h1v1h1v1h-1v-1h-1z" fill="#093232"/>
		<path d="M7 14h1v1h1v1H8v-1H7zm11 0h1v1h-1v1h-1v-1h1zm-8 18h1v1h-1zm5 0h1v1h-1z" fill="#077562"/>
		<path d="M6 15h1v1h1v1H7v-1H6zm13 0h1v1h-1v1h-1v-1h1z" fill="#6ff2e5"/>
		<path d="M12 15h2v1h-2zm-9 7h1v1H3zm4 0h1v1H7zm11 0h1v1h-1zm4 0h1v1h-1zM8 24h1v2H8zm9 0h1v2h-1z" fill="#52180f"/>
		<path d="M6 16h1v1H6zm13 0h1v1h-1z" fill="#16b9a6"/>
		<path d="M11 16h1v1h-1zm3 0h1v1h-1zm-3 5h1v1h-1zm3 0h1v1h-1zm-1 2h1v1h-1zm-2 2h1v2h-1zm3 0h1v2h-1zm-4 3h1v2h-1zm5 0h1v2h-1z" fill="#313132"/>
		<path d="M12 16h1v1h-1zm-1 7h1v1h-1zm3 0h1v1h-1zm-4 2h1v1h-1zm5 0h1v1h-1z" fill="#5b5b5c"/>
		<path d="M13 16h1v1h-1zm-1 7h1v1h-1v1h-1v-1h1zm2 1h1v1h-1zm-4 2h1v2h-1v3H9v-3h1zm5 0h1v2h1v3h-1v-3h-1z" fill="#474748"/>
		<path d="M9 17h1v1H9zm7 0h1v1h-1zM5 18h1v1H5zm15 0h1v1h-1zM9 21h1v2H9zm7 0h1v2h-1zM6 23h1v1H6v1H5v-1h1zm13 0h1v1h1v1h-1v-1h-1zM8 33h1v1h1v1H9v-1H8zm9 0h1v1h-1v1h-1v-1h1zM6 34h1v1H6zm13 0h1v1h-1z" fill="#5f818a"/>
		<path d="M10 17h1v2h-1zm5 0h1v2h-1zm-8 2h1v1H7zm11 0h1v1h-1zm-8 2h1v1h-1zm5 0h1v1h-1zM4 25h1v1H4zm17 0h1v1h-1zM5 28h1v1H5zm15 0h1v1h-1zm-10 6h1v1h-1v1H7v-1h3zm5 0h1v1h3v1h-3v-1h-1z" fill="#27323b"/>
		<path d="M6 18h1v2H5v-1h1zm3 0h1v3H9zm7 0h1v3h-1zm3 0h1v1h1v1h-2zM6 24h1v1H6zm13 0h1v1h-1zM7 34h2v1H7zm10 0h2v1h-2z" fill="#95b3b7"/>
		<path d="M7 18h1v1H7zm11 0h1v1h-1zm-8 1h1v2h-1zm5 0h1v2h-1zM5 23h1v1H5v1h1v1H5v-1H4v-1h1zm2 0h1v1H7zm2 0h1v1H9zm7 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h1v1h-1v1h-1v-1h1v-1h-1zM7 33h1v1H7zm2 0h1v1H9zm7 0h1v1h-1zm2 0h1v1h-1z" fill="#405560"/>
		<path d="M3 20h1v2H3zm19 0h1v2h-1zm-9 9h1v1h-1z" fill="#393500"/>
		<path d="M4 20h1v1H4zm17 0h1v1h-1z" fill="#c69718"/>
		<path d="M5 20h2v1H5zm14 0h2v1h-2z" fill="#f4da46"/>
		<path d="M7 20h1v1H7zm11 0h1v1h-1zM4 21h1v1H4zm17 0h1v1h-1z" fill="#786209"/>
		<path d="M12 21h2v1h-1v1h-1zm-3 4h1v2H9v3H8v-3h1zm7 0h1v2h1v3h-1v-3h-1z" fill="#c8d0c8"/>
		<path d="M12 24h2v1h-1v2h-1v2h-1v-2h1zm-5 3h1v2H7v2H6v-2h1zm7 0h1v2h-1zm4 0h1v2h1v2h-1v-2h-1zm-8 3h1v1h-1v1H8v-1h2zm5 0h1v1h2v1h-2v-1h-1z" fill="#222223"/>
		<path d="M2 25h1v3H2v-1H1v-1h1zm21 0h1v1h1v1h-1v1h-1z" fill="#313131"/>
		<path d="M7 32h1v1H7zm2 0h1v1H9zm7 0h1v1h-1zm2 0h1v1h-1z" fill="#9d0f32"/>
		<path d="M8 32h1v1H8zm9 0h1v1h-1z" fill="#cf374e"/>
		<path d="M6 33h1v1H6zm4 0h1v1h-1zm5 0h1v1h-1zm4 0h1v1h-1z" fill="#5e031f"/>
		</g>
	</defs>
	<use xlink:href="#dots"/>
</svg>

↓



上は、

ドット絵SVG化スクリプト:改訂3版
http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm

を使用させていただきました。