SVG→CSS変換

SVG→CSS変換とは#

SVG→CSS変換は、SVGマークアップをスタイルシートに貼れるCSSに変えるツールです。SVGをマスクまたは背景画像として適用し、結果をCSS宣言・Tailwindクラス・data URLとして受け取れます。

マークアップを貼り付けるか、.svgファイルを読み込むと、結果はその場で更新されます。処理はすべてブラウザ内で行われ、入力が外部に送られることはありません。

使い方#

1. SVGマークアップを貼り付けるか、.svgファイルを読み込みます。
2. SVGの適用方法（マスクまたは背景画像）と、data URLのエンコード（URLエンコードまたはbase64）を選びます。
3. 出力形式（CSS・Tailwind・data URL）を選び、結果をコピーします。

プレビューには市松模様の上に3サイズの見本が並びます。マスクのときの色指定はプレビュー専用です。

マスクと背景画像#

• マスク：currentColorを使い、SVGを単色のシルエットとして描きます。要素の文字色に追従するため、色違いが必要なアイコンに向いています。
• 背景画像：background-imageでSVG本来の色を描きます。あとからCSSで色は変えられません。

出力形式#

• CSS：リピート・大きさ・位置まで含んだ、そのまま貼れる宣言です。
• Tailwind：同じ内容をユーティリティクラスで表したもので、data URLには任意値記法を使います。
• data URL：data:image/svg+xml,...の文字列だけが必要なときの形式で、自前のコードに組み込めます。

data URLは既定でURLエンコードされます。内容をそのまま均一に扱いたいときはbase64に切り替えます。

活用シーン#

• ロゴやピクトグラムをマスク化して、リンクやボタンの色になじませたいとき。
• 小さなSVG背景を、画像ファイルを増やさずに埋め込みたいとき。
• コンポーネント集向けに、Tailwindで貼れるクラスを用意したいとき。
• 書き出した.svgファイルを、スタイルシートに貼れる断片に変えたいとき。

よくある質問#

注意点#