SVG to CSSとは？

SVG to CSSは、SVGデータを background-image 用のCSSコードに変換するツールです。SVGをそのままデータURIとして埋め込めるため、小さなアイコンや背景パターンを外部ファイルなしで扱いたいときに向いています。

入力したSVGはリアルタイムでエンコードされ、CSSコードとプレビューを同時に確認できます。SVGを貼り付けてすぐに試せるので、ちょっとした装飾をスタイルシートに直接組み込みたいときに便利です。

使い方

1. SVGコードを入力するか、SVGファイルを読み込みます。
2. 変換方式を選びます。
3. エンコード済みデータとCSS変換結果を確認します。
4. プレビューに問題がなければ、生成されたCSSをコピーして使います。

出力されるのは background-image: url('data:image/svg+xml,...'); の形式なので、そのまま背景指定として使えます。

変換方式

完全エンコード

SVG全体を encodeURIComponent で変換する方式です。文字の扱いが安定しやすく、互換性を優先したいときに向いています。

外部環境へ貼り付ける先が複数ある場合や、まずは安全に動く形を作りたいときは、こちらを選ぶと扱いやすくなります。

部分エンコード

CSS内で問題になりやすい文字だけを置換して、できるだけ短いコードに寄せる方式です。モダンブラウザ中心の環境で、出力を少しでもコンパクトにしたいときに向いています。

ただし、SVGの書き方によっては完全エンコードのほうが扱いやすい場合もあるため、迷ったときは両方を試して比較すると確実です。

このツールが役立つ場面

• 小さなアイコンや装飾パターンをCSSに直接埋め込みたいとき
• 背景用のSVGを別ファイルにせずまとめたいとき
• デザイン確認しながら background-image 用コードをすぐ作りたいとき
• エンコード方式ごとの出力差を見比べたいとき

変換前に確認しておきたいこと

• このツールは background-image として使う前提のコードを生成します。HTML内にそのままインラインSVGとして置きたい場合は、別の使い方になります
• SVGの内容が複雑なほど出力コードも長くなりやすいため、小さなアイコンや単純な図形との相性が良いです
• 色やサイズをあとからどこまで調整しやすいかは、元のSVGの書き方によって変わります

背景パターンやワンポイントの装飾なら、まずはこの形式で埋め込めるか試してから、必要に応じて外部ファイル運用に戻すと判断しやすくなります。