SVG のプレースホルダ画像を Data URI として生成します。サイズ・色・ラベルを指定し、SVG ソース・Data URI・img タグをそのままコピーできます。外部リクエストは一切ありません。
リクエストを伴わないプレースホルダ画像。 サイズ・色・ラベルを設定して、SVG ソース、Data URI、完成した img タグをコピーできます。外部から何も読み込まないため、オフラインでもデザインファイル内でもそのまま表示されます。
空欄のときは幅と高さを表示します。多くのプレースホルダはこれで十分です。
プレースホルダサービスは、問題が起きるその瞬間までは便利です。ドメインにレート制限をかけられる、社内プロキシに遮断される、飛行機の中でデモをする、あるいはサービスが黙って出力を変えてモックの半分がずれる。これらの障害はすべて同じ原因から来ています。プレースホルダが他人のサーバー上に存在することです。
SVG の Data URI にはその依存がありません。画像全体がマークアップ内の文字列なので、オフラインでも、メールクライアントでも、静的エクスポートでも、3 年後のスクリーンショットでも同じように描画されます。レイテンシのコストもゼロです。DNS 参照も接続もラウンドトリップもありません。開発中に 1 ページへ 20 枚のプレースホルダを置くなら、この差ははっきり体感できます。
このツールが出力する Data URI は base64 ではなくパーセントエンコードです。どちらも正当ですが、SVG にはパーセントエンコードのほうが既定として優れています。理由は二つあります。
一つ目はサイズです。base64 はデータ量をおよそ 3 分の 1 増やしますが、パーセントエンコードは実際にエスケープが必要な少数の文字だけを展開します。SVG はほぼ ASCII なので、結果的に短くなることが多いのです。二つ目は可読性です。スタイルシートの中のパーセントエンコードされた SVG は、見ればそれと分かりますし、色をその場で直したり誤字に気づいたりできます。base64 の塊はデコードしなければ何も読み取れません。
パーセントエンコードで唯一注意が要るのはシングルクォートで、本ツールが明示的にエスケープしているのはそのためです。CSS の url() 値はシングルクォートで囲まれることが多く、SVG 内のエスケープされていないアポストロフィは値を途中で終わらせてしまいます。
生成される SVG には明示的な width / height 属性と、それに一致する viewBox の両方が含まれます。この組み合わせは意図的です。width と height はブラウザに固有サイズを与え、画像のレイアウト前にガタつくのを防ぎます。viewBox は同じ画像を CSS で指定した任意のサイズにきれいに拡大縮小できるようにします。
ベクター形式なので、ラベルはどの倍率でも鮮明なままです。高 DPI ディスプレイで文字がぼやけることも、2x 用の別素材を用意する必要もありません。コンテナいっぱいに広げたい場合は CSS で width: 100%; height: auto を指定すれば、viewBox が縦横比を保ちます。縦横比を無視して固定サイズにしたい場合は、生成された属性をそのまま残せばブラウザがそれに従います。