SVG を Data URI に

SVG を CSS または HTML のデータ URI に変換します

URLエンコードまたはBase64のSVGデータURIと、CSS background-image、CSS mask-image、HTML img用のコードを生成します。SVGをアップロードせずに、マークアップの最適化、プレビュー、必要な形式のコピーができます。

ここにファイルをドロップ

新規ファイルの既定値を編集しています

エンコード

URL エンコードは URL に載せられない文字だけを変換するため、アイコンほどの大きさのファイルなら Base64 より 20〜30% 小さくなるのが普通で、マークアップも読める形のまま残ります。ビルド処理や CMS がパーセント記号を書き換える場合は Base64 を選んでください。

CSS 用のエスケープを追加

空白、アポストロフィ、丸括弧も変換するので、引用符なしの url(...) の中でも、Sass や Less の文字列の中でも安全に使えます。数バイト増えます。Base64 には不要です。

最適化SVG を最適化

出力を生成する前に、安全な最適化プリセットを実行します。

SVG を最小化（空白を削除）色を最適化メタデータを削除

スタイルcurrentColor を使う

fill と stroke を置き換えて、アイコンが周囲の文字色を引き継ぐようにします。単色の絵柄にだけ有効で、複数の色を使った SVG は 1 色にまとめられてしまいます。

プレビューはありません。ファイルを追加して選択すると結果が表示されます。

ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

SVG とは

SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。

SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。

SVG を Data URI としてインライン埋め込みするのはどんなとき

データ URI は、SVG 全体をスタイルシートまたはマークアップ内に配置するため、ブラウザーはそれを描画するための 2 回目のリクエストを必要としません。これは、箇条書き、矢印、山形、チェックボックスのチェックマーク、フッターのマークなど、小さな装飾的なアートワークに効果があります。 URL エンコードは、通常、SVG テキストの場合によりコンパクトですが、別のツールがそれを予期する場合には、Base64 が便利です。 CSS マスクは、SVG を要素独自の背景色のステンシルとして扱うため、単一の CSS 宣言で、状態ごと、テーマごと、またはコンポーネントごとに 1 つのモノクロアイコンの色を変更できます。

SVG を Data URI にオンラインで変換する方法

1
SVG ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
2
URL エンコードか Base64 を選び、先にマークアップを最適化するかどうかを決めます。5 つの出力とそれぞれのバイト数は、設定を変えるたびに更新されます。
3
必要なスニペットをコピーするか、「すべて保存」を押すと、背景とマスクのルールを収めた .css ファイルを SVG ごとに 1 つダウンロードできます。

プライバシー：ファイルはブラウザから出ません

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアントアートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問

URL エンコードの Data URI は Base64 より小さいですか？

通常は。 Base64 は生のバイトにエンコードのオーバーヘッドを追加しますが、URL エンコードはエスケープする必要がある文字のみを展開します。正確な違いは SVG マークアップによって異なるため、ツールでは両方のサイズが表示され、目の前のファイルについて比較できます。

CSS のマスクのルールは、どうやってアイコンの色を変えるのですか？

mask-image は SVG を型紙として使います。要素は自分の background-color を描き、どのピクセルを残すかはマスクが決めます。色は CSS 側から来るので、1 つの Data URI をどんな色にでもでき、ホバー用やダークモード用の見た目は background-color を変えるだけで済みます。マスクはアルファチャンネルだけを残して SVG 自身の色は捨てるため、単色の絵柄にしか使えません。Safari には今も -webkit-mask-image の接頭辞が必要で、生成されるルールにはそれも含まれています。

SVG を Data URI としてインライン埋め込みしないほうがよいのはどんなときですか？

ファイルが大きい場合、または共有されている場合。データ URI は、それを使用するすべてのスタイルシートまたはページにコピーされるため、単独でキャッシュすることはできず、ファイルが変更されるたびに再ダウンロードされます。多くのページにわたって再利用される大きなアートワークやアセットの場合、多くの場合、独自のキャッシュヘッダーを持つ個別の .svg ファイルがより良い選択となります。データ URI は外部からスタイル設定することもできないため、生成されたマスクルールはモノクロアイコンに役立ちます。