SVGコードをCSSで使えるData URI形式に変換、またはData URIをSVGに戻せる 開発者向け無料オンラインツールです。
SVG ↔ Data URI 変換ツールとは？
本ツールは、SVGコードをCSSやHTML内で直接扱える「Data URI（Base64形式など）」へ相互変換するためのデベロッパー向けツールです。 SVGファイルを外部画像として読み込む代わりに、CSSの background-image やReactの img src に直接埋め込むことで、HTTPリクエスト数を削減し、Webサイトの高速化を実現します。 また、独自の最適化（Minify）機能により、コード内の不要な空白や改行を自動で除去し、最も軽量な状態で書き出します。
こんなシーンで便利です
CSSでのアイコン管理
擬似要素（::before/::after）のcontent属性やbackground-imageにアイコンを埋め込み、画像ファイルを増やさずにUIを構築したい時。
Webサイトの高速化（LCP対策）
ロゴや小さな装飾パーツをData URI化してHTML/CSSに含めることで、ブラウザの画像読み込み待ちをなくし、表示速度を向上させます。
ReactやVueでのコンポーネント化
SVGを直接JSXに書くのが面倒な場合、Data URI形式に変換して定数化。コンポーネントのソースコードをスッキリ保ちます。
既存Data URIの編集
「デコード機能」を使えば、既存のCSSにある謎のData URI文字列を元のSVGコードに戻し、色や形の微調整が可能です。
使い方は簡単 3ステップ
- 変換モード（エンコード / デコード）を選択し、ソースを貼り付けます。
- 「Result & Preview」エリアで、画像が正しく表示されるか確認します（背景色変更も可能）。
- 用途に合わせて、通常のURI、CSS用、React用の各ボタンからコピーして使用します。
※SVGタグ内の xmlns=\ http://www.w3.org/2000/svg\ が欠けていると表示されない場合がありますのでご注意ください。
ご利用時の注意点
- ファイルサイズにご注意：複雑なSVG（パスが多い、写真が含まれるなど）をData URI化すると、CSS自体のサイズが肥大化し、逆にパフォーマンスを損なう可能性があります。
- プレビュー機能：透明なSVGも見やすいように、プレビュー窓の背景を「透明・白・黒」から切り替えることができます。
- 自動最適化：変換時に不要なメタデータや空白を自動で削除しますが、 id や class は意図せず消さないよう最小限のMinifyに留めています。
SVGの実装方法とData URI形式の比較
Web制作におけるSVGの扱い方と、Data URI（エンコード）を使用するメリットをまとめました。
| 実装方法 | Data URI形式の特徴 | 適した利用シーン |
|---|---|---|
| CSS Background | url('data:image/svg+xml,...') | 擬似要素のアイコン、背景パターン |
| HTML Imgタグ | <img src='data:image/svg+xml,...'> | ロゴ、装飾用グラフィック |
| React / Next.js | const icon = 'data:image/svg+xml,...' | コンポーネント外部への定義・再利用 |
| Markdown |  | GitHub/Notion等のドキュメント埋め込み |
| Base64 Encode | data:image/svg+xml;base64,... | 旧ブラウザ対応や、バイナリ混在時 |
【SVG Data URI化のSEO・パフォーマンスへの影響】
SVGをData URI形式に変換してCSSに直接埋め込む最大のメリットは、HTTPリクエスト数の削減です。小さなアイコンや装飾を1つのCSSにまとめることで、ブラウザの並列ダウンロード制限に左右されず、ページの初期表示（LCP）を高速化できます。
【Base64とURLエンコードの使い分け】
本ツールは、可読性が高くファイルサイズの増大を抑えられる「UTF-8 URL Encoding」を推奨しています。base64 変換は、特定の環境（一部の古いメールクライアントや特殊なライブラリ）でプレーンなSVGコードが拒否される場合にのみ使用するのが一般的です。
【デコード機能の活用】
他サイトのCSSを解析している際に見かける data:image/svg+xml... という長い文字列。本ツールの「デコード（復元）機能」を使えば、瞬時に元のSVGタグに変換可能。viewBox の確認や、 fill 色の変更などのリライト作業に便利です。
フロントエンド開発のビルドプロセスとCDNキャッシュを最適化する埋め込み戦略
単なるコード変換に留まらず、モダンなフロントエンドフレームワークでのアセット管理や、HTTP/2以降のネットワーク環境に最適化された画像配信の技術設計について解説します。
インラインSVGとData URIのレンダリングブロック特性における技術的トレードオフ
SVGファイルを直接HTMLに埋め込むインライン形式はDOMツリーの一部として評価されるため、数が増えるとDOMの階層が深くなりパース速度に影響を与えます。
一方で、本ツールで生成したData URIをCSSに集約すると、DOMツリーをクリーンに保ちながらブラウザのCSSOM（CSS Object Model）の構築プロセスに画像データをシームレスに統合できるため、大量のアイコンを扱うUIシステムにおいて初期レンダリングの遅延を抑える効果があります。
Next.jsやViteなどのビルドツールにおけるインライン化の閾値設定と自動化の仕組み
モダンなビルド環境では、小さな画像アセットを自動的にData URIへ置換する機能が備わっています。
例えば、WebpackやViteのアセットモジュール機能において、インライン化のしきい値を一般的に推奨される4キロバイト以下に一元設定しておくことで、開発時は個別のファイルとして保守管理しつつ、本番ビルド時には自動的に最適なData URIへと変換され、HTTPリクエストの最適化が自動的に完了します。
CDNエッジキャッシュの効率を高める外部CSSスタイルシートへのURI集約ロジック
Data URIをHTML（JSXなど）の内部に直接記述すると、画像データの変更がページ全体のキャッシュを無効化する原因になり、HTMLの転送量自体が増大します。
この問題を回避するためには、Data URIをすべてコンポーネント外部の共通CSSファイル、または独立したスタイル定義ファイルへ分離してください。
これにより、画像データを含んだスタイルシートのみが世界中のCDN（コンテンツ配信ネットワーク）のエッジサーバーに強力にキャッシュされ、インフラ側の帯域消費とサーバー負荷を最小限に抑えることが可能になります。
よくある失敗と対策
複雑なSVGパスや画像埋め込みデータを変換してCSSファイルサイズが肥大化
イラストや写真トレース、複雑なグラデーションを持つ大容量SVGファイルをData URI形式にエンコードしてCSSに直接記述すると、スタイルシート自体のサイズが数メガバイト単位に肥大化し、ブラウザのファーストペイント（初期描画スピード）を著しく低下させる失敗です。
💡 対策・解決策を見る▼
CSSのbackground-imageに埋め込んだSVGのfill（色）やstrokeが変更できない
Data URI化したSVGコードはCSS内にインライン画像として直接埋め込まれるため、CSSの「.icon:hover { fill: #blue; }」といった外部からのスタイル適用や動的なカラー変更が効かなくなり、ホバーエフェクトの実装などで手戻りが発生する失敗パターンです。
💡 対策・解決策を見る▼
Base64エンコードの乱用による不要なコード肥大化と可読性の低下
Data URI化する際にすべて「Base64形式」で変換してしまうと、プレーンテキストでのエンコード（UTF-8 URLエンコード）に比べてファイルサイズが約33%も増加し、ソースコードのファイル容量増加や保守性の低下を招くパフォーマンス上のミスです。
💡 対策・解決策を見る▼
ダブルクォーテーションの競合やエスケープ漏れによるCSS表示バグ・エラー
SVG内の属性（xmlnsやviewBoxなど）で使われているダブルクォーテーション（"）を、CSSの「background-image: url("data:...")」のように同じ二重引用符のままネストしてしまい、シンタックスエラー（構文エラー）を起こしてアイコン画像が表示されなくなる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.変換するために貼り付けたSVGコードが外部に漏洩する心配はありませんか
A. 一切ありません。本ツールは完全ローカル処理型の安全設計を採用しています。入力されたSVGコードやデコード対象のデータはサーバーへ送信されず、データベースへの保存も行われません。すべての処理はユーザーのブラウザ内だけで完結し、ページを閉じれば即座にデータは完全消去されます。
Q.変換モードのエンコードとデコードはどのように使い分ければよいですか
A. SVGコードをCSSやHTMLに埋め込めるData URI形式に変換したいときはエンコードモードを使用します。逆に、すでにCSSなどに記述されているData URI文字列から元のSVGタグやコードを復元して編集したいときにはデコードモードを選択してください。
Q.プレビューエリアで変換後のSVG画像が正常に表示されない原因は何ですか
A. SVGコードの最外枠にあるSVGタグ内に、xmlns属性の記述が欠けている可能性があります。ブラウザがData URIを画像として正しくレンダリングするには、指定の記述が必須となるため、ソースコードに属性が含まれているかを再度確認してください。
Q.透明な背景のSVGアイコンを見やすく確認する機能はありますか
A. はい、あります。プレビューエリアには背景色の切り替え機能が搭載されており、透明なSVGデザインでも視認しやすくなるよう、プレビュー窓の背景色を透明、白、黒の3パターンから選択して切り替えることができます。
Q.変換をおこなうとSVGコード内のクラス名やID名が勝手に消去されますか
A. いいえ、消去されません。本ツールの自動最適化機能は、コード内の不要なメタデータ、改行、空白などを自動で削除して軽量化しますが、CSSでの制御や識別に必要なid属性やclass属性は意図せず消さないよう最小限の圧縮に留める仕様となっています。
Q.出力されるData URIはどのようなボタンから取得して利用できますか
A. 変換結果は用途に合わせて専用のボタンからワンクリックでコピーできます。通常のURI形式のほか、CSSの背景画像にそのまま貼り付けられるCSS用、そしてJSXに直接定義できるReact用の各ボタンが用意されています。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。