From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

SVG shape elements

SVG shape elements - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

SVG shape elements

“

- [Instructor] SVG shapes are the elements that create the graphics displayed in an SVG. We'll go into detail on each of the available shapes in the next chapter, so for now let's look at how they work on a more general level. This SVG we created earlier has a series of shapes split into individual elements. Inspecting the code in the browser, you can see these shapes as individual elements. You'll remember I created this graphic by first drawing a square, and then four circles, and then connecting them all together. Well, in reality, they are still individual elements, so they each have their individual element markup. This square in the center is a rect element because it's a rectangle. The other four are paths because they are irregular paths. You remember, they started out as a circle, and then I added an extra point to them and pulled out that corner. Well that changed them from being circles to just being paths. The blue box around the symbol is also a path, because it has…

Contents