From the course: Design the Web: Using Symbols in SVG

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding a circle element to an SVG graphic

Adding a circle element to an SVG graphic - Illustrator Tutorial

From the course: Design the Web: Using Symbols in SVG

Start my 1-month free trial Buy for my team

Adding a circle element to an SVG graphic

“

- Now to add a simple circle into our SVG Graphic, inside of our symbols.html file, in a text editor, let's scroll down. Inside of the SVG element, we'll see all of the individual paths and rectangles and circles that make up that background graphic. We'll also see a series of text elements that create the text on the screen. So let's get our cursor after some of these text elements. Now the stacking order inside of SVG works just like HTML. Any items that are last in the list, or last to be coded, will be on top of all of the other elements. So in order to get a circle on top of all of the other elements, we'll start a circle element after all of these text elements. So let's start with circle, then a space. Then we're going to set the "center x" property, so "cx" for "center x" equals, two quotes. Inside of the quotes, let's put 20. Then a space, then we're gonna set "cy" for "center y". Another set of quotes. Let's put 20 in there as well. Next we're gonna set the radius. We're…

Contents