How would you style an SVG?

Styling Inline SVG

To style an SVG with CSS, the best way is to use Inline SVG. This means placing the <svg> code directly into your HTML, rather than using an <img> tag.

When you use inline SVG, you can change its appearance using CSS properties just like any other HTML element.

Key CSS Properties

• fill: Changes the background color (inside) of the shape.
• stroke: Changes the border color (outline) of the shape.
• stroke-width: Changes the thickness of the border.

Example

Here is a simple example. We have a star icon. When you hover over it, we change the fill color to yellow and the stroke color to orange.