SVGプレースホルダージェネレーター

SVG Placeholder Generator

Create lightweight SVG placeholder images with custom text and colors.

Width (px) Height (px)

Background color

Text color

Pick a color, or type any valid CSS value like transparent or rgba().

Label text

Font size (px)

Live preview (Scaled to fit)

SVG markup

Copy

Data URL (Base64)

Copy

モックアップ、ワイヤーフレーム、またはローディング状態用の軽量なプレースホルダー画像が必要ですか？SVGプレースホルダージェネレーターは、サイズ、色、テキストを選択して、シンプルで解像度に依存しないSVG画像をその場で作成します。

このツールの機能

• カスタム背景色とテキスト色で、サイズ（例：800×600）によるSVGプレースホルダーの生成。
• ライブプレビューの表示により、使用前にデザインを確認できます。
• <img>タグ、CSS背景、またはデザインツールで使用できる生のSVGマークアップとデータURL（Base64を含む）の両方を出力します。
• 読みやすさとパフォーマンスのために、寸法とフォントサイズを実用的な範囲内（幅/高さは約16〜4000px、フォントサイズは約6〜120px）に保ちます。

使い方

1. 幅と高さをピクセル単位で設定します。
2. 背景色、文字色、およびオプションのラベルテキスト（例：800×600 や Hero Image）を選択します。
3. プレビュー画像を確認します。
4. SVGマークアップまたは生成されたデータURLのいずれかをプロジェクトにコピーします。

画像は純粋なSVGテキストであるため、非常に小さく、あらゆる解像度で鮮明で、高速ロード用のプレースホルダーに最適です。