HomeTutorsContact

How to create circle in SVG?

By Gulshan Saini
Published in HTML
June 03, 2020
1 min read

In previous tutorial we learned how to create a rectangle shape using SVG. In this tutorial, we are going learn how to create a circle using SVG element.

So let’s get started.

Creating circle shape

To create a circle, first, we create a blank SVG document - this is going to be our canvas to draw things on it.

Next, we provide width and height to the SVG element. I am setting the width to 300 and height to 300.

Output

// content goes here

Our, SVG element is ready however we do not see anything in the output above. Let’s give SVG element a background color just to make it visible on the screen.

Output

// content goes here

Awesome, our SVG element is ready and we are ready to create circle shape inside it.

SVG comes with basic shape elements and circle is one of them. circle accepts following geometry properties:

  • cx - coordinate position of center of circle on x-axis
  • cy - coordinate position of center of circle on y-axis
  • r - radius of circle

Let’s use the circle shape element along with cx, cy and r properties to create a circle shape

Explanation

  • cx="100" will shift the circle to right on x-axis
  • cy="100" will shift the circle from top on y-axis
  • r="50" will set the radius of circle

Output

Wow, we can see the circle element in the output above with the default fill color of black. If we want the circle to have the same size as of SVG element, we can adjust the width and height properties accordingly.

I don’t like the black background color so let’s change that.

Change background color

To change the background color of the rectangle shape we need to use fill property.

How about giving it a slight green color #376d7b

Output

Circle looks great!!

I hope you enjoyed the tutorial.

Summary

  • SVG circle shape can be used to create circle
  • circle radius can be set using r property
  • circle position on canvas can be set using cx and cy property
  • circle element background color can be changed by setting fill color

Tags

#svg
Previous Article
How to create rectangle in SVG?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to create rectangle in SVG?

June 02, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media