地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js

ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。

画像を用意する必要はありません。
簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。
さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！

holder.js
holder.js -GitHub

• holder.jsの特徴
• holder.jsのデモ
• holder.jsの使い方

holder.jsの特徴

holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。

MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。

holder.jsで生成されたダミー画像のキャプチャ

holder.jsを実際に使用してみました。
右クリックで画像を保存すると、SVG画像になっているのが分かると思います。

画像は作成していません。下記のコードを記述しただけです。

holder.jsのデモ

デモでは、holder.jsで生成されたダミー画像を確認できます。

デモページ

holder.jsの使い方

使い方は、簡単です。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

あとはダミー画像を配置したい場所にimg要素として記述するだけです。
まずは、基本となるシンプルなダミー画像から。

「src」に「holder.js」とサイズを記述します。
当ブログの背景と同系色なので、線をつけました。

テーマは6つ用意されています。
「theme=」のあとに、sky, vine, lava, gray, industrial, socialが利用できます。

テーマはオリジナルのものも作成できます。

ダミー画像にテキストを配置することもできます。

画像なので、背景画像としても利用できます。

レスポンシブ用の流体コンテンツにも対応しています。
パーセントは「%」ではなく、「p」で指定します。