サイトを作るときに正式な画像がまだない場合、ダミー画像を使うことがあります。Unsplashの類はもちろん便利なんですが、ダミー画像のために開発中に余計な外部アクセスするのもなぁって思うんですよね。正直、グレーの1枚絵で十分だったりしますし。とはいえわざわざダミー画像作るのは最早めんどくさい。納品時にうっかり消し忘れたりするし、それが複数サイズあろうもんならもうやる気が…

とまぁそんなチンケな手間も、SVGでさっくり解消できます。

手順

1. SVG画像のコードをURLエンコードし、
2. data:image/svg+xml;charset=utf8, をエンコードしたSVGコードの頭に追加し、
3. それをsrcに挿入すればOK。

元のSVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195 120" fill="#cccccc"><rect x="0" y="0" width="195" height="120"></rect></svg>

URLエンコードしたSVG

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195%20120%22%20fill%3D%22%23cccccc%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22195%22%20height%3D%22120%22%3E%3C%2Frect%3E%3C%2Fsvg%3E

出来上がったimgタグ

<img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195%20120%22%20fill%3D%22%23cccccc%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22195%22%20height%3D%22120%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" width="195" height="120" alt="">

表示サンプル

解説

これで背景色が#cccccc、幅195 x 高さ120pxの四角が表示されます。数値を変えれば色やサイズも自由。一度作っておけば使いまわせるので、割と便利に使えますよ。もうちょっと凝ったのを自分で作ろう！という場合、SVGのURLエンコードはどこぞのサービスを使うか、ローカルにぶち込んだCyberChefにでもお願いすればOKです。

もちろんちゃんとしたダミー画像が欲しいシーンもありますし、適材適所ですね。しっかしSVG有能！文字列だけで画像が表示できるのってすごくパソコンらしくて素敵！

2022-02-14