0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVGからCSS
SVGコードをCSSプロパティ（background-image、mask-image、またはCSS変数）として使用できるdata URIに変換します。URLおよびBase64エンコーディングをサポート。
フォーマット
CSSプロパティ
オプション
SVGコード
ライン:0キャラクター:0

仕組み

SVG のコードを、CSS ですぐ使える Data URI に変換します。これにより、別ファイルや追加の HTTP リクエストなしで、アイコンをスタイルシートに直接埋め込めます。

エンコードは 2 種類あります。URL エンコード（パーセントエンコーディング）は短く読みやすく、SVG に推奨されます。Base64 はやや長いものの、あらゆる環境で互換性があります。

結果は background-image、mask-image（CSS でアイコンに色を付ける用）、あるいは再利用可能な CSS 変数として生成できます。事前に SVG を圧縮するとサイズがさらに小さくなります。

例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL エンコードは SVG をほぼ読める状態に保ち、通常 Base64 より短くなります。
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");mask-image として使う場合、アイコンの色は要素の background-color プロパティで制御します。

ユースケース

  • ページに HTTP リクエストを増やさずに、SVG アイコンを background-image として埋め込む。
  • SVG をマスク（mask-image）として使い、テーマや状態に応じて CSS で色を付け直す。
  • アイコンを CSS 変数に保存し、複数のセレクターで再利用する。
  • 埋め込む前に SVG を圧縮して、インラインアイコンの容量を減らす。

よくある質問

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

SVG には通常 URL エンコードが最適です。SVG はテキストなので、短く読みやすい Data URI になります。Base64 は最大の互換性を得られますが、サイズが約 33% 増えます。

なぜ background-image ではなく mask-image を使うのですか？

background-image ではアイコンは元の色を保ちます。mask-image では SVG が形だけを定義し、色は CSS が与えます。テーマに応じて変わる単色アイコンに最適です。

圧縮オプションは何をしますか？

符号化する前に SVG のコメントを削除し空白を詰めるので、絵柄を変えずに最終的な Data URI が小さくなります。

私の SVG はサーバーにアップロードされますか？

いいえ。変換はすべてブラウザー内で行われ、SVG がコンピューターから外に出ることはありません。

関連項目