SVG → CSS

SVG マークアップを最適化された CSS の background-image 用 data URI に変換します。URL エンコードと Base64 を選べ、プレビューも確認できます。無料のオンラインツールです。

このツールについて

SVG マークアップを CSS の background-image 用 data URI に変換します。URL エンコードなら結果が短く読みやすいままで、Base64 も選べます。

使い方

  1. SVG を貼り付けます。
  2. 「URL エンコード」または Base64 を選びます。
  3. CSS 宣言をコピーし、プレビューを確認します。

よくある質問

URL エンコードと Base64 のどちらがよいですか?

URL エンコードした SVG のほうが通常は小さく、読みやすさも保たれます。特殊文字の扱いに問題があるツールでは Base64 のほうが安全です。

xmlns が追加されたのはなぜですか?

data URI として使う SVG を表示するには xmlns="http://www.w3.org/2000/svg" が必要なため、ない場合は追加されます。

空白は削除されますか?

はい。結果を短くするため、タグ間の改行や余分なスペースはまとめられます。

関連ツール