Such Voluptuous Graphics

Alright. So maybe that's not what SVG really stands for. But what you need to understand is that you're able to create really nice, and quite complex, graphics using it. Which will look great at any size they are displayed.

I would wager that almost all web developers have used Scalable Vector Graphics, whether directly or indirectly. But I would extend that wager by adding that most of those cannot write SVG from scratch. Not that I condone learning to do so because it is probably a complete waste of time.

That is not going to stop me though!

In this article I will explore drawing using the basic shape elements as well as paths. While the basic shapes should in no way be overlooked, paths are really what will allow more interesting drawings.

Get your crayons out and let’s start.

All Shapes and Sizes

Taking a look inside the box of SVG elements, disregarding <path> for now, we find:

<rect>

Creates a rectangle using a start point, the top left corner, specified by an x and a y value, and its dimensions which is height and width.

<svg viewBox="0 0 100 100" width="100" height="100">
  <rect x="0" y="0" width="100" height="100"></rect>
</svg>

<circle> and <ellipse>

I lumped these two elements together because they are so similar. Both circles and ellipses use cx and cy to define their center, but an ellipse will have two radii, rx and ry unlike the circle that of course only has one, r.

One could easily create a circle using an ellipse by having both radii be equal.

<svg viewBox="0 0 100 100" width="100" height="100">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

<line>, <polyline> and <polygon>

Let me start off by saying that I personally find all of these quite… useless, once <path> is brought into play.

That said, not much unlike the <circle> and <ellipse>, you are able to get the same results with these elements. Let’s draw a simple line in a 45 degree angle with each of them to see how that would look.

<svg viewBox="0 0 300 100" width="300" height="100">
  <line x1="10" x2="90" y1="90" y2="10"></line>
  <polyline points="110,90 190,10"></polyline>
  <polygon points="210,90 290,10"></polygon>
</svg>

From the left we have a <line>, <polyline> and finally a <polygon>. So… What’s the difference?

In the example above, nothing really. Each shape’s strength is better shown if we add to the example above and make triangles instead of lines.

<svg viewBox="0 0 300 100" width="300" height="100">
  <line x1="10" x2="90" y1="90" y2="10"></line>
  <line x1="90" x2="10" y1="10" y2="10"></line>
  <line x1="10" x2="10" y1="10" y2="90"></line>
  <polyline points="110,90 190,10 110,10 110,90"></polyline>
  <polygon points="210,90 290,10 210,10"></polygon>
</svg>

In the triangles above it is now pretty clear that the <line> element’s use stretches as far as drawing just that – simple and straight lines. And even then the alternatives provide a shorter syntax.

That leaves us with the <poly*> elements, and hopefully you have noticed that these also differ in that the bottom-left corner of the triangle created with <polyline> looks like as if someone took a bite of it. That is because <polyline> does not automatically complete its shape. Since we have not adjusted how linecaps ⤴ are handled, the start and end points will simply be cut flat. On the other hand <polygon> always closes its shape, creating a line between the start and end points.

Take note of the points syntax which consists of different points described as x,y x,y x,y, or 210,90 290,10 210,10 for <polygon> in the example above.

Balancing Art

What good is knowing all of the above without putting it to use?

I have some reoccurring nightmares of a certain loading animation from setting up a certain television device more times than I can count, and will try to recreate a snapshot of that using the simple shapes gone over in this article. Perhaps you recognize it?

Happy coding!