From the course: Learning SVG

SVG shapes overview - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

SVG shapes overview

“

- [Narrator] In this chapter we'll shift focus to the actual graphics inside the SVG. In the following movies we'll look at each of the available SVG shapes to see how they work and how we can work with them. Some of these shapes are relatively easy to work with and you can create and edit them by hand in the code. Other shapes are quite complex and you'll need a third-part graphics tool, like Illustrator or Sketch, to make them work the way you want to. To give you a brief overview I've created this list for reference. The shapes that we have available are line, which creates a line. This one's relatively easy to write in code. We have rect, which creates a rectangle, also easy to write. Circle creates a circle, also easy to write. Ellipse creates an ellipse. This one's a little more difficult, but it still makes sense when you write it out. Polyline creates a line with multiple different points or corners. This one is hard to write, but it still makes sense if you read it. A polygon is just a polyline where the start and end points are joined together so it's equally easy or hard to write. Then we have text and a string of text is easy enough to work with, but once you start working with several lines of text it can get really complex. And finally we have path and path is this generic shape. It can be any of the other shapes and usually paths are used anytime you draw something out that has an odd shape, which makes them very hard to read and understand and almost impossible to write. So the path is where you probably will need help of some sort of party application. We'll also cover how to use the transform attribute on individual elements to rotate and shift the anchor point of those elements and create things like squares tilted at 45 degrees. To make it easy to follow along and make sense of what's going on, we'll be working with a new set of exercise files. As we begin there's a familiar figure element with an SVG element inside, although the SVG currently has no shapes. The view box of that SVG element is zero, zero, 100, 100, meaning the visible part of the SVG is split into 100 units vertically and horizontally and if we place a dot at 50 X and 50 Y that dot will appear right smack in the middle of the SVG. To help visualize what's going on, I've added an outline around the SVG element and a grid as a background. The grid shows a line for every 10 points so 10 X and 10 Y is this first intersection here. Okay that's enough chatter. Let's get cracking.

Contents