SVGプレースホルダー生成

SVGプレースホルダー生成器の仕組み

このツールでできること

SVGプレースホルダー生成器は、カスタムの寸法、背景色、テキストオーバーレイ、フォント設定を備えた軽量なベクターのプレースホルダー画像を作成します。SVGマークアップを直接出力し、HTMLやCSSに埋め込めるBase64のdata URIとしても出力します。SVGは解像度非依存で通常1KB未満のため、ネットワークリクエストなしで即座に読み込まれます。

開発者によくある利用シーン

フロントエンド開発者は、実画像が用意できる前にレイアウトのスペースを確保し、累積レイアウトシフト（CLS）を避けるために、プロトタイピング中にSVGプレースホルダーを使用します。デザインシステムでは、アバターのフォールバック、サムネイルのスケルトン、レスポンシブ画像コンテナに役立ちます。メール開発者は、メールクライアントにより外部画像の読み込みがブロックされる可能性があるHTMLテンプレートに、data URIのプレースホルダーを埋め込みます。

データ形式、型、またはバリエーション

出力は、塗りつぶし矩形と中央配置のテキスト要素を含む標準的なSVG 1.1ドキュメントです。data URI版は、このSVGをBase64文字列としてエンコードし、imgのsrc属性、CSSのbackground-imageプロパティ、またはインラインHTMLで直接使用できるように 'data:image/svg+xml;base64,' を先頭に付けます。寸法はピクセルで指定しますが、SVGはベクター形式のため、ピクセル化せずに任意のコンテナサイズへスケールします。

よくある落とし穴とエッジケース

Data URI は、埋め込まれているドキュメントとは独立してブラウザにキャッシュされないため、同じプレースホルダーを多数のページで使うと、単一の外部ファイルをキャッシュする場合と比べて総転送量が増えます。非常に長いテキストラベルは、寸法が小さい場合に SVG の viewBox からはみ出すことがあります。一部の古いメールクライアントは SVG の Data URI をサポートしておらず、壊れた画像アイコンにフォールバックします。Content Security Policy (CSP) ヘッダーは、img-src に 'data:' が含まれていない場合、インラインの Data URI をブロックすることがあります。

コードではなくこのツールを使うべき場面

このブラウザツールを使うと、ビルド依存関係を追加せずに、ワイヤーフレーミングやプロトタイピング中に単発のプレースホルダー画像を素早く生成できます。本番環境で動的にプレースホルダーを生成する場合（例: ユーザーがアップロードした画像のフォールバック）には、サーバーサイドの SVG テンプレート化、または画像最適化パイプラインと統合でき、実際の画像からぼかした低品質画像プレースホルダー（LQIP）を生成できる plaiceholder のような専用サービスを使用してください。