SVGをCSSに変換する方法

<svg>
  <style>
    circle {
      fill: red;
      stroke: black;
    }
  </style>
  <circle cx="50" cy="50" r="40" />
</svg>

2. 外部スタイルシートを使用する方法: SVG要素内で外部のCSSファイルを参照することもできます。以下は、外部CSSファイル（styles.css）を作成し、SVG要素内でそれを参照する例です。

styles.cssファイル:

.circle {
  fill: red;
  stroke: black;
}

<svg>
  <link rel="stylesheet" href="styles.css" />
  <circle class="circle" cx="50" cy="50" r="40" />
</svg>

3. インラインスタイル属性を使用する方法: SVG要素の各属性に直接スタイルを指定することもできます。以下は、<circle>要素のstyle属性を使用してスタイルを指定する例です。

<svg>
  <circle cx="50" cy="50" r="40" style="fill: red; stroke: black;" />
</svg>

以上が、SVGをCSSに変換する方法といくつかのコード例です。これにより、SVGの柔軟なスタイリングとアニメーションの適用が可能になります。詳細な情報やさらなる応用については、SVGとCSSの公式ドキュメントを参照してください。