SVG Basics—How To Create Simple Shapes And Lines

Posted: 12 Jan 2015 05:30 AM PST

Last week I started a series on SVG and walked through the different ways you can include SVG inside an HTML page. Because I needed to show you something that would display on your screen, the examples included a green rectangle.

While it probably wasn’t too difficult to understand the code that created the rectangle, I didn’t explain it or talk about other shapes you could create. I kind of covered some simple SVG shapes before, but I thought I’d run through them again as my previous coverage was limited and the run through will help me understand things better.

SVG Shapes and Lines

SVG allows you to create the following basic shapes and lines.

Rectangle
Circle
Ellipse
Line
Polyline
Polygon

Since we saw the rectangle already last week, lets start there.

Note: I’ll cover fills and strokes in the next post in this series, but I need to include them in the examples in this post so you can see the SVG shapes you’re creating. I’ll keep it simple and I’m sure you’ll be able to follow along just fine.

Rectangle

The SVG <rect> element defines a rectangle and lets you control the size, color, and corner roundedness through several attributes you can add.

1  2  3

<svg width="300px" height="150px">    <rect x="20" y="20" width="250px" height="125px" rx="5" ry="5" fill="teal" />  </svg>

x—The x-coordinate of the top left corner of the rectangle
y—The y-coordinate of the top left corner of the rectangle
rx—The x radius of the corners of the rectangle
ry—The y radius of the corners of the rectangle
width—The width of the rectangle
height—The height of the rectangle

The units are the same units you use anywhere when setting location or dimension. The default is px, if no unit is specifically mentioned.

Note: The images you hopefully see in this post are all inline SVG. I thought about including .png images as well, but given the support for SVG decided to just display the SVG.

You might have noticed I added a width and height to the root <svg> element. I’ll cover why later in the series. For now just know that if your SVG shape is getting clipped, you can add width and height (to the <svg> element) equal to or larger than the shape that’s getting clipped to prevent it from being clipped.

Circle

Circles are even easier to create. You set the coordinates for the origin, set a radius, and you have a circle.

1  2  3

<svg width="300px" height="300px">    <circle cx="150" cy="150" r="100" fill="red" />  </svg>

cx—The x-coordinate of the center of the circle
cy—The y-coordinate of the center of the circle
r—The radius of the circle

Ellipses

An ellipse is to a circle as a rectangle is to a square. We just need one more attribute to define an ellipse.

1  2  3

<svg width="300px" height="300px">    <ellipse cx="150" cy="150" rx="100" ry="75" fill="blue" />  </svg>

cx—The x-coordinate of the center of the ellipse
cy—The y-coordinate of the center of the ellipse
rx—The horizontal radius of the ellipse
ry—The vertical radius of the ellipse

Because the radius of an ellipse can be different along it’s main and cross axis we have rx and ry as opposed to just r. It’s hardly any more difficult than creating either a circle or a rectangle.

Lines

Shapes might not seem overly exciting since you can create rectangles, circles, and ellipses in CSS. What’s more difficult to create in CSS is a line that isn’t horizontal or vertical. It can be done, but it’s not as simple as the SVG line element.

1  2  3

<svg width="300px" height="250px">      <line x1="100" y1="200" x2="250" y2="50" stroke="#000" stroke-width="5" />  </svg>

x1—The x-coordinate of the starting point of the line
y1—The y-coordinate of the starting point of the line
x2—The x-coordinate of the ending point of the line
yw—The y-coordinate of the ending point of the line

Again, it’s relatively simple. You define two points that represent the start and end coordinates for the line, and you let whatever browser you’re using do the math needed to construct the actual line.

Since there’s not much to fill inside a line, I used the stroke and stroke-width attributes instead. I’ll explain both next week (along with the fill property), but I trust neither is confusing you now.

Polylines

Polylines are groups of straight lines that are connected to each other. To create a polyline using SVG you use the single attribute, points, which allows you to define as many coordinates as you need.

1  2  3

<svg width="300px" height="300px">    <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="none" stroke="#000"/>  </svg>

A couple of things to notice in the code above. First each set of points is separated by a comma and, first and last points excluded, each point represents both the start of one line segment and the end of another.

Second you’ll notice in this example I set the fill to none. If I didn’t, your browser would try to fill what it thinks is the inside of the shape. It didn’t matter with the single line in the previous section, but it does with polylines. Remove the fill=”none” and see what happens.

Polygon

If you have a handle on the polyline element, then the polygon element will be easy to understand. It’s the same as a polyline, except it automatically encloses itself to form a shape from the lines you created.

1  2  3

<svg width="300px" height="200px">    <polygon points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" stroke="#000"/>  </svg>

The polygon code should look familiar. Like polylines, polygons take a comma separated set of coordinates or points. This is almost the same code I used for the polyline in the previous section. The only difference is it’s a polygon instead of a polyline and I filled it with red instead of setting the fill to none.

Even though it’s not explicitly set, there’s a final line drawn between the last and first points enclosing a shape. What’s inside and outside the polygon depends on the points you use and the order you use then.

A more realistic use case than the example above is to use the polygon element to create a triangle.

1  2  3

<svg width="300px" height="200px">    <polygon points="10 10, 10 200, 200,200" fill="blue" stroke="#000" />  </svg>

There’s one more way to draw all of the SVG shapes and lines above and that’s through paths. I want to cover paths in another post so I’ll hold off talking about them just yet.

Rendering SVG

SVG uses a “painters mode” to render. What that means is it draws one operation at a time and later operations could obscure earlier ones by covering them up. It’s similar to the CSS cascade. An example should make this clearer.

1  2  3  4  5  6

<svg width="300" height="200"        xmlns="http://www.w3.org/2000/svg">      <rect width="100%" height="100%" fill="green" />    <rect width="50%" height="50%" fill="purple" />  </svg>

The code above shows a green rectangle. It also includes a smaller purple rectangle. Because the purple rectangle comes after the green one in the code, the purple rectangle will sit on top of the green rectangle. It willl appear closer to the viewer.

Closing Thoughts

SVG provides elements to create several basic shapes as well as simple lines and I hope after last week’s post and this one, you can see none are difficult to create or work with.

Don’t let their simplicity fool you. If you’ve ever taken a class in drawing you know a few basic shapes can be combined to form just about anything you want.

As I mentioned last week, I expect more complex scalable vector graphics to be created using a vector editing tool. However for simple shapes or even combinations of simple shapes and lines, it might be quicker to write the code.

Since I’ve been using them throughout this series already, I should probably walk through fills, strokes, and their associated properties. That’s where I’ll pick things up next week.

Download a free sample from my book Design Fundamentals.

The post SVG Basics—How To Create Simple Shapes And Lines appeared first on Vanseo Design.