SVGを貼ると、CSSの background-image に使える url(...) 形式のコードを作るツールです。 軽量化、色の一括置換、複数ファイルのまとめて変換、CSS変数での出力もできます。 ブラウザで開くだけで動き、貼ったSVGは外部に送られません。 変換とコピーだけで足りる方(SVG 5KBまで)は、無料版もあります。https://mall-aibou.booth.pm/items/8927344 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力は、一般的なブラウザで表示できる形式を目安にしています。 実際の表示は、お使いのブラウザやサイトの環境でご確認ください。 軽量化は、見た目が変わらないことを目指していますが、SVGによっては変わる場合があります。 プレビューで確認してからお使いください。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ SVGを url("data:image/svg+xml,...") 形式に変換 ◆ 出力形式の切り替え(background-image: の1行 / url(...) のみ / CSS変数) ◆ SVGの軽量化(コメント、XML宣言、メタデータ、エディタ由来の要素や属性の除去、空白の整理、数値の小数3桁までの丸め)。元に戻すボタン付き ◆ 色の一括置換(#RGB / #RRGGBB の色を一覧にして、1色ずつ、またはすべてを1色に) ◆ 複数ファイルのまとめて変換と、CSS変数としてのまとめてコピー ◆ 出力したコードでのプレビュー表示(繰り返して並べる表示も可) ◆ 元のSVGと出力のサイズ表示 ◆ SVGの大きさの上限はありません ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. svg-datauri.html をダブルクリックして、ブラウザで開く 2. SVGのコードを貼る(.svgファイルのドラッグや「ファイルを選ぶ」も使えます。複数OK) 3. 必要なら軽量化や色の置換をして、出てきたコードを「コピー」してCSSに貼る ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・SVGの編集や作図はできません ・色の置換は #RGB / #RRGGBB の形式のみです(色名や rgb() は対象外。色の指定がない図形も対象外です) ・Base64形式の出力はありません(URLエンコード形式です) ・PNGやJPGなど、SVG以外の画像は変換できません ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　svg-datauri.html ／ README.txt TOOL BOX