HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG styled with CSS</title>
  <style>
    .my-circle {
      fill: #22c55e;
      stroke: #15803d;
      stroke-width: 3;
    }
    .my-circle:hover {
      fill: #86efac;
    }
  </style>
</head>
<body>
  <h1>SVG + CSS</h1>
  <p>Hover the circle to see the fill change.</p>

  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="55" class="my-circle"/>
  </svg>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML SVG — Style with CSS