SVG Shapes you can Code Now - No Drawing Tools Required

There are so many options available to create SVG.

Do I just create them in Illustrator or Sketch? or with some JS library? Are free online tools ok?

Option overwhelm! And sometimes overkill - especially for very basic shapes.

Ultimately, all these tools do is produce SVG code.

So then, what if you could write SVG by hand in the time it takes to fire up Illustrator and click on the rectangle tool?

UI skills officially leveled-up.

Let's dive into the syntax of creating 3 shapes you can whip up in no time. (Rectangle, Circle, Hexagon)

The SVG Rect Element

<rect>

First, let's stop and think - What basic, essential properties are needed to define a rectangle?

  • a height
  • a width
  • a color (if there's no outline)

In SVG shape syntax-land - we use fill, rather than color or background.

So, a 100 by 100 unit square with an orange fill can be written like so:


<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="orange" />
</svg>

(Note: If the viewBox has you confused - you can read about the SVG viewBox here.)

Whoa that's a big square!

Notice we are not using any px or rem units in our height and width attributes for our <rect>

That's the whole idea of SVG. These units are in relation to the context of the overall SVG - not some specific measurement.

We can resize the overall SVG by adding a height and width attribute inline - or through CSS.

But as far as the <rect> is concerned - it's just taking up 100 by 100 "units" within the SVG.

Here's the same rectangle - resized to 100px by 100px:


<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="orange" />
</svg>

To recap:

  1. The <svg> is 100px by 100px
  2. The viewBox (visible area) for the <svg> is 100 by 100 "units"
  3. The <rect> takes up all 100 by 100 units of the viewBox - and is therefore 100px by 100px

The SVG Circle Element

<circle>

Same thought exercise as before - what attributes make up a circle?

  • a radius or diameter (since it's the same height and width)
  • a fill

In SVG syntax land we use an "r" for radius.


<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle r="50" fill="orange" />
</svg>

That's strange - it's more like a wedge than circle.

Well, the circle is there, it's just not completely visible, because the center of the circle by default lies at the 0, 0 coordinate of the viewBox.

(again, read this if the viewBox thing is confusing)

So, let's center it (50, 50 coordinate) by using cx (center of the circle along the x-axis) and cy (center of the circle along the y-axis).


<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="orange" />
</svg>

Nailed it.

The SVG Polygon Element

<polygon>

Since a hexagon is just a type of polygon - we'll use this element and it's syntax to construct it.

Unlike our <rect> and <circle> elements, our polygon requires defining points on our coordinate system in order to define our shape.

Here is a visual illustration of defining points that make up a hexagon (using the <polygon>) on a 100 by 100 unit viewBox:

If we define these points in our polygon element and give it a fill, we will have a hexagon!


<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="25,0 75,0 100,50 75,100 25,100 0,50" fill="orange" />
</svg>

Ok, so the hexagon code is not simple to just write out.

Sure, with practice you could more easily visualize points on the coordinate system in your head.

But in reality it's not all that practical.

So, rather than frying your brain or having to fire up Illustrator or Sketch - I created a 10 Simple SVG Shapes Cheat Sheet over on CodePen.

Want to continue improving your SVG and UI code-crafting skills? Sign up below.