SVGプレースホルダー画像をサイズと文字付きで作成する方法

用途と入力内容を確認する

仮の画像を置いてレイアウトを確認したいときは、SVGプレースホルダー画像を作成すると便利です。幅と高さ、表示文字、背景色、文字色を指定でき、生成結果にはSVG画像と、そのSVGをもとにしたインライン画像データ表現が含まれます。実際の写真やイラストを用意する前に、画像欄の比率やラベルの見え方を確認できます。

項目を入力して生成する

1. 幅と高さを入力します。省略時は幅400、高さ300です。入力値は幅と高さごとに、1未満なら1、2000を超えるなら2000に収まるよう調整されます。
2. 画像内に表示する文字を入力します。文字の初期値は空の文字列で、空などの値として扱われる場合は、有効な幅と高さを「×」で結んだラベルに切り替わります。
3. 背景色と文字色を指定します。初期値は背景色が#cccccc、文字色が#333333です。色を変えないときは、初期値のまま進めます。
4. 生成を実行し、表示されたSVGプレースホルダー画像を確認します。利用先に応じて、SVGまたはインライン画像データ表現を選びます。入力した文字は、表示用テキストと画像の代替テキストに入る前にHTMLエスケープされます。

出力を読み取り用途に合わせる

結果は、指定した寸法と色を反映したSVG形式のプレースホルダー画像です。表示文字を入力した場合はその文字がラベルになり、空などの値では有効な寸法を示す表示に変わります。範囲外の寸法を入力した場合、入力値そのものではなく調整後のサイズが使われます。

インライン画像データ表現は、作成されたSVGをもとにした結果です。これは完成した画像素材ではないため、レイアウト確認後に実際の画像へ差し替える前提で利用します。文字に記号を含めた場合も、出力に表示される文字はHTMLエスケープされた形で扱われます。

使用例

商品ページの画像欄が600×400で表示されるか確かめるため、指定した寸法と「商品画像」のラベルで作成します。

幅600、高さ400、表示文字「商品画像」、背景色#eeeeee、文字色#222222を入力して生成します。

600×400のSVGプレースホルダー画像と、そのSVGをもとにしたインライン画像データ表現が得られます。

制限事項

• 出力はSVGプレースホルダー画像と、そのSVGをもとにしたインライン画像データ表現です。完成した写真やイラストの作成には使いません。

よくある間違い

• 寸法が1未満または2000超だと、入力した数値と結果のサイズが一致しない場合があります。幅と高さをそれぞれ1から2000までにして、もう一度生成してください。

よくある質問

サイズを入力しないとどうなりますか？

幅を省略したときは400、高さを省略したときは300が適用されます。入力した寸法は方向ごとに1から2000までの範囲へ調整されます。

表示文字を空欄にすると何が表示されますか？

表示文字の初期値は空の文字列です。空などの値として扱われた場合は、生成時点の有効な幅と高さを「×」で結んだラベルが表示されます。

背景色と文字色は変更できますか？

背景色の初期値は#cccccc、文字色の初期値は#333333です。別の色を指定すると、生成されるSVGにその値が反映されます。