Toolipedia
JA
← すべてのテキストツール

SVGからデータURI

SVGをCSS背景や<img>タグで使えるデータURIに変換します。

  • 無料
  • 登録不要
  • どの端末でも使える

約SVGからデータURI

SVGをデータURIに変換して、CSSのbackground-imageやimgのsrcに使うと、追加のファイルリクエストを避けられます。URLエンコードされたSVGは、約3分の1大きくなるBase64より通常は小さくなります。小さなアイコンはインライン化に向いており、大きな画像はキャッシュ可能な別ファイルのほうが適しています。

SVGからデータURIの使い方

  1. SVGコードを貼り付けてください。
  2. エンコーディングと、CSSの背景やimg srcなどの、出力の種類を選択してください。
  3. データURIを、スタイルシートまたはHTMLにコピーしてください。

このツールを使う理由

別名

よくある質問

Base64とURLエンコードのSVGでは、どちらが小さくなりますか?

通常はURLエンコードのほうが小さくなります。Base64はデータを約33%増やすためです。それでも、古いツールの中にはBase64のほうが安全なものがあります。

データURIがCSSで機能しないのはなぜですか?

SVG内の引用符が、URLを囲む引用符と衝突することがあります。引用符の処理を自動で行う、CSS出力オプションを使ってください。

データURIとして使われているSVGの色を、変更できますか?

CSSのcolorではできません。画像は絵として扱われるためです。エンコードする前に、SVG内で塗りつぶしを変更してください。

SVGからデータURIは無料ですか？

はい。ToolipediaのSVGからデータURIは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

SVGからデータURI を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール