Styling SVG with CSS

SVG and CSS

SVG elements accept CSS classes and inline styles. CSS transitions and animations work on SVG presentation properties like fill and stroke.

Example

<style>
.icon { fill: steelblue; transition: fill 0.3s; }
.icon:hover { fill: coral; }
</style>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle class="icon" cx="50" cy="50" r="40"
          stroke="#333" stroke-width="2" fill="steelblue"/>
  <text x="50" y="57" text-anchor="middle" fill="white" font-size="24">★</text>
</svg>

HTML

Full Editor

Pro Tip

CSS hover and transition effects work directly on SVG shapes.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned