SVGコードをBase64・URLエンコード形式のData URIへ変換し、CSSやReactにそのまま貼り付けられる形で出力します。 data:image/svg+xml から元のSVGへ戻すデコードにも対応した、開発者向けの無料オンラインツールです。
SVGをBase64・Data URIに変換してCSSに埋め込む無料ツール
本ツールは、SVGコードを「Base64」と「URLエンコード」の2形式のData URIへ相互変換するデベロッパー向けツールです。 CSSの background-image やReactの img src に直接埋め込むことでHTTPリクエスト数を削減し、表示速度を向上させます。 変換時にはXML宣言・コメント・metadataを自動で除去して軽量化し、両形式のバイト数を並べて表示するため、どちらを採用すべきかを数値で判断できます。data:image/svg+xml で始まる文字列からSVGコードへ戻すデコードにも対応しています。
こんなシーンで便利です
SVGアイコンをBase64に変換したいとき
ビルドツールやCMS、メールテンプレートなど、プレーンなSVGコードを受け付けない環境向けに、Base64形式のData URIをワンクリックで生成します。
CSSでのアイコン管理・背景画像化
擬似要素のcontentやbackground-imageにアイコンを埋め込み、画像ファイルを増やさずにUIを構築したい時に。CSS用のスニペットをそのままコピーできます。
Webサイトの高速化（LCP対策）
ロゴや小さな装飾パーツをData URI化してCSSに含めることで、画像の追加リクエストをなくし、初期表示までの時間を短縮します。
既存Data URIの解読・編集
CSSに書かれた長い data:image/svg+xml 文字列を元のSVGコードへ復元。url 記法やsrc属性ごと貼り付けても自動で抽出します。
使い方は簡単 4ステップ
- 変換モード（SVG → Data URI / Data URI → SVG）を選び、コードを貼り付けるかSVGファイルをドラッグ＆ドロップします。
- 出力形式で「URLエンコード」か「Base64」を選択し、必要に応じて圧縮・xmlns補完・色の一括変更をオンにします。
- プレビューで表示を確認し、サイズ比較でどちらの形式が軽いかを判断します。
- CSS・mask・JSX・Tailwindの各スニペットから、用途に合うものをコピーして貼り付けます。
※xmlns属性が無いとブラウザが画像として描画できませんが、初期設定で自動補完されるため、欠けているコードを貼り付けてもそのまま変換できます。
ご利用時の注意点
- サイズの目安：変換後が4KBを超えると画面に警告が表示されます。ビルドツールが自動インライン化する既定のしきい値を超えるため、外部ファイル化のほうが有利な場合があります。
- Base64とURLエンコードの差：Base64は仕様上おおよそ33%容量が増えます。互換性が必要な場合を除き、URLエンコードのほうが軽量です。
- 圧縮の範囲：XML宣言・DOCTYPE・コメント・metadataを削除しますが、id や class はCSS制御に必要なため保持します。
- 色の扱い：currentColor化はbackground-imageでは機能しません（Data URIは独立した文書として扱われるため）。CSSから色を変えたい場合は出力されるmask-image用スニペットをご利用ください。
Base64とURLエンコードの違い｜SVG Data URI形式の比較表
同じSVGでも出力形式によって容量と使える場面が変わります。実際の使い分けを整理しました。
| 出力形式・実装方法 | 記述例 | 容量の傾向 | 適した利用シーン |
|---|---|---|---|
| URLエンコード（推奨） | data:image/svg+xml,%3Csvg... | 最小。中身が読める | CSS背景、モダンブラウザ向け全般 |
| Base64エンコード | data:image/svg+xml;base64,PHN2... | 約33%増加 | メール、旧環境、テキスト混在を避けたい時 |
| CSS background-image | url("data:image/svg+xml,...") | 形式に依存 | 擬似要素のアイコン、背景パターン |
| CSS mask-image | mask-image + background-color | 形式に依存 | CSSから色を変えたいアイコン |
| JSX / img要素 | <img src="data:image/svg+xml,..." /> | 形式に依存 | React・Next.jsのコンポーネント |
| Tailwind CSS | bg-[url("data:image/svg+xml,...")] | 空白の再エンコードが必須 | ユーティリティクラスで完結させたい時 |
【Base64とURLエンコードの使い分けの基準】
SVGはバイナリではなくテキストであるため、Base64に変換する必然性は本来ありません。Base64は3バイトを4文字に変換する仕様上、おおよそ33%容量が増加します。そのため通常はURLエンコード形式が最適ですが、ビルドパイプラインやCMS、メールクライアントがプレーンなSVGコードを受け付けない場合には ;base64, 形式が必要になります。本ツールは両形式のバイト数を同時に表示するため、感覚ではなく実測値で選択できます。
【HTTPリクエスト削減とLCPへの影響】
SVGをData URI化してCSSに埋め込む最大のメリットはHTTPリクエスト数の削減です。小さなアイコンや装飾を1つのCSSにまとめることで、ブラウザの並列ダウンロード制限に左右されず初期表示を高速化できます。ただし埋め込んだ分だけCSS自体は重くなり、CSSはレンダリングブロック要素であるため、4KBを超える大きなSVGでは逆効果になります。
【デコードが必要になる場面】
他サイトのCSSを解析している際に見かける data:image/svg+xml;base64,... という長い文字列も、デコードモードに貼り付ければ即座に元のSVGタグへ戻せます。viewBox の確認や fill の色変更といったリライト作業に加え、CSS宣言やimg タグごと貼り付けても必要な部分だけが自動抽出されます。
SVGの圧縮・軽量化とCSS埋め込みで表示速度を最適化する実践テクニック
単なるコード変換に留まらず、SVGの容量削減、CSSからの色制御、ビルドツールとの連携まで踏まえた実務レベルの設計指針を解説します。
デザインツール書き出しSVGの不要データを削除してファイルサイズを削減する手順
IllustratorやFigmaから書き出したSVGには、XML宣言・DOCTYPE・生成ツール名のコメント・metadata要素が必ず含まれ、これだけで数百バイトから数キロバイトを占めることがあります。
本ツールの圧縮機能はこれらを自動で除去し、タグ間の改行やインデントも詰めたうえでエンコードします。
一方でid属性とclass属性は保持する設計としているため、CSSアニメーションやJavaScriptからの要素取得が壊れる心配はありません。
background-imageで色が変えられない問題をmask-imageで解決するCSS設計
Data URIとして埋め込まれたSVGは独立した文書として扱われるため、外側のCSSで指定したfillやcurrentColorは一切適用されません。
ホバー時の色替えやダークモードへの追従を実現するには、背景画像ではなくマスク画像としてSVGを指定し、背景色側で着色する手法が有効です。
この方法であれば1つのData URIを使い回しながら、CSS変数やテーマ切り替えだけで色を変更できます。
ViteやWebpackのインライン化しきい値とData URI手動生成の使い分け
モダンなビルド環境では、小さな画像アセットを自動的にData URIへ置換する機能が備わっており、インライン化のしきい値は4キロバイト前後が既定値として採用されています。
この自動化に任せる場合、開発時は個別ファイルとして保守でき、本番ビルド時のみ最適化される利点があります。
一方で、CSSの擬似要素やTailwindの任意の値記法のようにビルドツールの変換対象外となる箇所では、本ツールで手動生成したData URIを直接記述する必要があります。
CDNエッジキャッシュの効率を高める外部CSSへのData URI集約ロジック
Data URIをHTMLやJSXの内部に直接記述すると、画像データの変更がページ全体のキャッシュを無効化する原因になり、HTMLの転送量自体も増大します。
これを避けるには、Data URIをすべて共通の外部CSSファイルまたはCSS変数定義へ分離してください。
画像データを含むスタイルシートのみがCDNのエッジサーバーに長期キャッシュされ、HTMLは軽量なまま保たれるため、帯域消費とサーバー負荷を最小限に抑えられます。
SVGのBase64・Data URI変換でよくある失敗と対策
必要のない場面でBase64を選んでしまい、CSSのファイルサイズが約33%増える
SVGはテキストデータであるにもかかわらず、画像だからという理由で反射的にBase64を選んでしまうケースです。Base64は3バイトを4文字に変換する仕様上、必ず容量が約33%増加します。さらに変換後の文字列は人間が読めないため、後からviewBoxや色を確認したくてもソースコード上で判別できず、保守性も落ちます。
💡 対策・解決策を見る▼
デザインツールから書き出したSVGをそのまま変換して容量が肥大化する
IllustratorやFigmaの書き出しファイルには、XML宣言、DOCTYPE、生成ツール名のコメント、metadata要素、大量の改行とインデントがそのまま残っています。これらを削除せずにエンコードすると、実際の描画に一切寄与しないデータがData URIの文字列として丸ごとCSSに埋め込まれ、無駄な容量を消費します。
💡 対策・解決策を見る▼
CSSのbackground-imageに埋め込んだSVGのfillやstrokeが変更できない
Data URI化したSVGは独立した画像として扱われるため、外側のCSSでfillやcurrentColorを指定しても色は変わりません。ホバーエフェクトやダークモード対応を後から実装しようとした段階で、色ごとに別のData URIを量産する羽目になり、CSSがさらに肥大化するという二次被害が発生します。
💡 対策・解決策を見る▼
url記法やsrc属性ごとコピーしたData URIをデコードできず手作業で削っている
他サイトのCSSやHTMLから調査目的でData URIをコピーすると、background-image宣言やimg要素の記述が前後に付いてきます。一般的な変換ツールはこれをそのまま渡すとエラーになるため、前後の余計な文字を手作業で削る必要があり、長い文字列では削りすぎ・残しすぎのミスが起こります。
💡 対策・解決策を見る▼
Tailwind CSSの任意の値記法に貼り付けたらクラスが効かなくなる
Data URIには空白文字がそのまま残る場合があり、これをTailwindの任意の値記法でクラス名に記述すると、空白がクラスの区切りとして解釈されてスタイルが適用されません。原因が空白であると気付きにくく、エンコード方式の問題だと誤解して調査が長引きがちです。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.SVGをBase64に変換する方法と、URLエンコードのどちらを選ぶべきですか
A. 本ツールの画面上部にある出力形式の切り替えで、Base64とURLエンコードをワンクリックで切り替えられます。SVGはテキストデータであるため、通常はURLエンコード形式のほうが変換後のサイズが小さく済み、ソースコード上でも中身を読める利点があります。Base64は仕様上おおよそ33パーセント容量が増えますが、一部の古いメールクライアントやビルドツール、プレーンなSVGコードを受け付けない環境との互換性が必要な場合に選択してください。変換画面にはURLエンコードとBase64の両方のバイト数と差分が同時に表示されるため、実際の数値を見比べたうえで判断できます。
Q.変換するために貼り付けたSVGコードが外部に漏洩する心配はありませんか
A. 一切ありません。本ツールは完全ローカル処理型の安全設計を採用しています。入力されたSVGコードやデコード対象のデータはサーバーへ送信されず、データベースへの保存も行われません。ドラッグアンドドロップで読み込んだSVGファイルについても同様にブラウザ内だけで処理され、すべての変換はユーザーの端末上で完結し、ページを閉じれば即座にデータは消去されます。
Q.CSSに書かれた data:image/svg+xml の文字列から元のSVGコードに戻せますか
A. はい、戻せます。デコードモードに切り替えて貼り付けるだけで復元できます。Base64形式とURLエンコード形式のどちらにも対応しており、charset指定が付いたものも扱えます。さらに、background-image の url 記法のままや、img要素のsrc属性ごとコピーした状態で貼り付けても、Data URIの部分だけを自動で抜き出して復元しますので、余計な文字を手作業で削る必要はありません。
Q.プレビューエリアで変換後のSVG画像が正常に表示されない原因は何ですか
A. 最も多い原因は、SVGタグにxmlns属性の記述が欠けていることです。ブラウザがData URIを画像として描画するにはこの名前空間の宣言が必須となります。本ツールにはxmlnsを自動補完する機能が用意されており、初期状態で有効になっているため、属性が欠けたコードを貼り付けても自動的に補われます。それでも表示されない場合は、SVGタグの開始と終了が正しく対になっているか、また塗りの指定が背景色と同色になっていないかをご確認ください。
Q.変換後のSVGアイコンの色をCSS側から変更するにはどうすればよいですか
A. background-imageに埋め込んだData URIは独立した画像として扱われるため、外側のCSSからfillを指定しても色は変わりません。解決策は二つあります。一つ目は本ツールの色の一括変更機能で、変換前にfillとstrokeのカラーコードをまとめて置き換える方法です。二つ目は生成されるCSSマスク用のスニペットを利用する方法で、mask-imageとしてSVGを指定しbackground-colorで着色すれば、ホバー時の色替えやダークモードへの追従をCSSだけで制御できます。
Q.デザインツールから書き出したSVGはどの程度まで軽量化されますか
A. IllustratorやFigmaから書き出したSVGには、XML宣言、DOCTYPE、生成ツール名のコメント、metadata要素、余分な改行やインデントが含まれています。本ツールはこれらを自動で除去したうえで空白を圧縮するため、書き出し直後のファイルであれば数十パーセント単位で削減されることも珍しくありません。削減率は変換のたびにサイズ比較エリアへ表示されます。一方でid属性やclass属性はCSSやJavaScriptからの制御に必要となるため、意図せず消さないよう保持する仕様です。
Q.Data URI化したSVGはどれくらいのファイルサイズまでなら使ってよいですか
A. 一般的な目安は4キロバイト以下です。WebpackやViteといったビルドツールが小さな画像を自動的にインライン化する際の既定のしきい値がおおむねこの水準に設定されており、これを超えるとCSS自体が肥大化して初期表示の速度を損ないます。本ツールでは変換後のサイズが4キロバイトを超えた時点で画面上に警告が表示されますので、その場合はData URI化せず通常の外部SVGファイルとして読み込み、ブラウザキャッシュを活用する構成をご検討ください。
Q.出力されたData URIはどのような形式でコピーして利用できますか
A. 変換結果は用途別の専用ボタンからワンクリックでコピーできます。Data URI単体のほか、CSSのbackground-imageに貼り付ける形式、色をCSSで制御するためのmask-image形式、ReactのJSXにそのまま記述できるimg要素形式、そしてTailwind CSSの任意の値記法に対応した形式が用意されています。Tailwind向けの出力では空白文字が自動的にパーセントエンコードされるため、クラス名として正しく解釈されない問題も起こりません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。