DEV Community

loading...
Cover image for How to set the background color on the circle svg element in HTML?

How to set the background color on the circle svg element in HTML?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・1 min read

Originally posted here!

To set the background color for the circle SVG element, you can use the fill attribute on the circle element inside the svg tag in HTML.

TL;DR

<!-- Set background color on 'circle' svg element -->
<svg>
  <circle cx="30" cy="30" r="30" fill="red" />
</svg>
Enter fullscreen mode Exit fullscreen mode

For example to set the color red on the circle svg element, let's use the fill attribute and set its value to the string red like this,

<!-- Set background color on 'circle' svg element -->
<svg>
  <circle fill="red" />
</svg>
Enter fullscreen mode Exit fullscreen mode

But this alone wouldn't show anything on the screen as the browser doesn't know where to start drawing the shape. For that, you also have to add other 3 attributes like the cx, cy, and r. To know more about these attributes check out How to create or draw a circle using SVG in HTML?

So at the end it will look like this,

<!-- Set background color on 'circle' svg element 🔥 -->
<svg>
  <circle cx="30" cy="30" r="30" fill="red" />
</svg>
Enter fullscreen mode Exit fullscreen mode

See the above code live in JSBin.

That's all 😃!

Feel free to share if you found this useful 😃.


Discussion (0)