SVGを貼ると、CSSの background-image に使える url(...) 形式のコードを作るツールです。 ブラウザで開くだけで動き、貼ったSVGは外部に送られません。 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力は、一般的なブラウザで表示できる形式を目安にしています。 実際の表示は、お使いのブラウザやサイトの環境でご確認ください。 ━━━━━━━━━━━━━━━━━━━━ この無料版で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ SVGを url("data:image/svg+xml,...") 形式に変換(background-image: の1行で出力) ◆ 出力のコピー ◆ 出力したコードでのプレビュー表示 ◆ 元のSVGと出力のサイズ表示 ◆ SVGは5KB(5,120バイト)までです。ファイルは1つずつの変換です ━━━━━━━━━━━━━━━━━━━━ 有料版（500円）で増えるもの ━━━━━━━━━━━━━━━━━━━━ ◆ SVGの軽量化(コメントや不要な要素の除去、数値の丸め) ◆ 色の一括置換 ◆ 複数ファイルのまとめて変換 ◆ CSS変数での出力 ◆ 5KBを超えるSVGの変換 有料版はこちらです。https://mall-aibou.booth.pm/items/8927348 ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. svg-datauri.html をダブルクリックして、ブラウザで開く 2. SVGのコードを貼る(.svgファイルのドラッグや「ファイルを選ぶ」も使えます) 3. 出てきたコードを「コピー」して、CSSに貼る ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・SVGの編集や作図はできません ・Base64形式の出力はありません(URLエンコード形式です) ・PNGやJPGなど、SVG以外の画像は変換できません ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　svg-datauri.html ／ README.txt TOOL BOX