SVGView

SVG から Data URI へのコンバーター

CSS または HTML でインライン SVG を使用するためのコンパクトな Data URI を作成します。小規模なアセットや迅速な埋め込みに最適です。 SVG ファイルを開いてすぐに変換できます。

SVG ファイルをドラッグ＆ドロップ

またはクリックして選択、もしくは SVG コードを貼り付け

.svg ファイルのみ対応
Ctrl+V / Cmd+V で SVG コードを貼り付け

SVG から Data URI へのコンバーターを使用する理由

Base64 と URL エンコーディングの選択

SVG to Data URI を使用すると、互換性とサイズに応じて Base64 出力と URL エンコード出力を切り替えることができます。 Base64 はあらゆるコンテキストに対して安全ですが、URL エンコードにより単純な SVG が短くなり、差分で読みやすくなります。

コピー可能Data URI 出力

SVG to Data URI は、すぐに使用できる data:image/svg+xml 文字列をフォーマットし、ワンクリックでコピーを提供します。 #、%、引用符などの文字がエスケープされるため、出力は手動でクリーンアップしなくても HTML 属性、CSS、または JSON で機能します。

どこにでも埋め込み

出力は、電子メール内の img src、CSS 背景画像、インライン スタイル、またはスタイル ブロックで機能します。アセットをインラインに保つと、余分なリクエストが回避され、最小限のオーバーヘッドで小さな UI 要素を配布するのに役立ちます。

クリーンな SVG による小さな文字列

SVG から Data URI への変換は、出力を短く保つために最適化された SVG とうまく組み合わせます。メタデータを削除し、パスを簡素化し、未使用の ID を削除して、最終的な文字列がコンパクトでコード レビューで読みやすい状態を維持できるようにします。文字列が短いほど、構成ファイルに保存しやすく、行の折り返しが少なくなります。

ローカルのプライベート処理

SVG to Data URI は完全にブラウザ内で実行されるため、ファイルがデバイスから流出することはありません。これは、クライアント作業、内部アイコン、および外部サーバーにアップロードできないアセットにとって安全です。

チームのための高速イテレーション

このツールは、UI の貼り付け、変換、コピー、更新などの迅速な反復を行うのに十分な速さです。スピードが重要な設計システムのワークフロー、ドキュメント サイト、プロトタイピング セッションに適しています。

SVG を Data URI に変換する方法

1

SVG を追加する

ファイルをドラッグ アンド ドロップするか、SVG マークアップを貼り付けます。 SVG to Data URI はソースをローカルにロードし、正確な出力のために viewBox、ID、および色を保持します。 SVG ファイルを開いてすぐに変換できます。

2

エンコーディングを選択してください

互換性を最大限に高めるには Base64 を選択し、短くて読みやすい文字列を得るには URL エンコードを選択します。 SVG to Data URI は出力を即座に更新するため、コピーする前に長さを比較できます。

3

コピーして埋め込む

結果をコピーし、HTML、CSS、または JSON に貼り付けます。 SVG to Data URI 文字列は、img src、background-image、または inline style 属性に使用できます。

SVG Data URI FAQ

SVG Data URI とは何ですか?いつ使用する必要がありますか?
SVG to Data URI は、SVG を URL 文字列内に直接埋め込むため、別のファイルをホストせずにインラインで使用できます。これは、外部リクエストが制限されているアイコン、小さなイラスト、電子メール テンプレートに役立ちます。
SVG から Data URI へ: Base64 または URL エンコード、どのように選択すればよいですか?
SVG to Data URI は両方をサポートします。 Base64 はすべてのコンテキストにとって最も安全な選択ですが、単純な形状の場合は URL エンコードの方が短いことが多く、ソース管理での編集や差分の確認が容易です。
SVG Data URI は CSS 背景画像で機能しますか?
はい。 SVG to Data URI は、background-image: url(...) 内に配置できる data:image/svg+xml 文字列を出力します。これは、パターン、アイコン、装飾的な UI アセットの一般的なパターンです。
変換は非公開ですか?
SVG to Data URI はブラウザでローカルに実行されるため、アセットがデバイスから離れることはありません。これにより、独自のロゴやクライアント アイコンが安全に保たれ、ロックダウンされたネットワークでの使用が可能になります。
SVG はどのくらいの大きさまで対応できますか?
SVG to Data URI は最大 10MB のファイルを処理できます。非常に大きな SVG では長い文字列が生成されるため、最適化するか外部ファイルを使用する方が現実的です。
変換する前に最適化する必要がありますか?
はい。 SVG が最適化されると、SVG から Data URI への結果は短くなり、信頼性が高くなります。不要なメタデータと空白を削除して、HTML または CSS をコンパクトに保ちます。
カラーとビューボックスは保持されますか?
SVG to Data URI は viewBox、塗りつぶし、ストローク、ID をそのまま維持するため、レンダリングされた出力はソースと一致します。 currentColor または CSS 変数に依存する場合は、変換する前にそれらを SVG 内に保持してください。
SVG to Data URI Converter はダウンロードせずに無料で使用できますか?
はい。 SVG to Data URI Converter はブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。
SVG to Data URI Converter を使用するにはアカウントが必要ですか?
いいえ。SVG から Data URI へのコンバーターは、サインアップせずにブラウザで即座に動作し、ファイルはローカルに残ります。

関連する SVG ツール

これらのツールを使用して SVG とData URI をペアにして、埋め込む前にアセットをプレビュー、最適化、または変換します。クリーンなソースでは、より短く信頼性の高い文字列が生成されます。

SVG ビューア

SVG をData URI に変換する前にソースをプレビューして、サイズ、色、viewBox の設定を確認できます。

ツールを開く

SVG オプティマイザー

SVG to Data URI の前に SVG オプティマイザーを実行して、マークアップを縮小し、最終的な文字列をコンパクトに保ちます。

ツールを開く

SVG からCSS背景へ

グラデーション、マスク、またはアイコン用の再利用可能な CSS スニペットが必要な場合は、SVG to CSS Background を使用します。

ツールを開く

SVG から PNG

SVG to Data URI が長すぎて、レガシー コンテキストのラスター フォールバックが必要な場合は、SVG to PNG を使用します。

ツールを開く

SVG to React

テスト後にコンポーネントに変換すると、アプリ内で配信方法を比較できます。

ツールを開く

関連 SVG ブログ

SVG ワークフロー、トラブルシューティング、本番運用の実践記事を続けて読めます。