SVG Tutorial / SVG Basics / Day 3

How to Make a Gingerbread Figure with SVG

Moving styling properties to CSS

Since our SVG is living inside an HTML file now, we can assign CSS classes to each element and move some of the attributes to CSS. We can only move the presentation attributes though. Position attributes and attributes that define the shapes have to stay in HTML. But colors, stroke, and font attributes can be moved to CSS.

-100, -100
0, -50 0, -50
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle
    class="head"
    cx="0"
    cy="-50"
    r="30"
  />
</svg>
.head {
  fill: #cd803d;
}

Rounded lines

We already saw the fill and some of the stroke properties, but here’s another styling property. The stroke-linecap. This can make our line cap rounded. Note that the legs and the arms are simple lines here.

To give you a comparison if we remove the line cap and set a smaller stroke-width, then this is how it would look like.

-100, -100
-40, -10 40, -10 -25, 50 0, -15 25, 50 0, -15 -40, -10 40, -10 -25, 50 0, -15 25, 50 0, -15
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <line
    class="limb"
    x1="-40"
    y1="-10"
    x2="40"
    y2="-10"
  />
  <line
    class="limb"
    x1="-25"
    y1="50"
    x2="0"
    y2="-15"
  />
  <line
    class="limb"
    x1="25"
    y1="50"
    x2="0"
    y2="-15"
  />
</svg>
.limb {
  stroke: #cd803d;
}

But by setting a thick stroke width and a round line cap we can shape legs and arms for our figure.

-100, -100
-40, -10 40, -10 -25, 50 0, -15 25, 50 0, -15 -40, -10 40, -10 -25, 50 0, -15 25, 50 0, -15
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <line
    class="limb"
    x1="-40"
    y1="-10"
    x2="40"
    y2="-10"
  />
  <line
    class="limb"
    x1="-25"
    y1="50"
    x2="0"
    y2="-15"
  />
  <line
    class="limb"
    x1="25"
    y1="50"
    x2="0"
    y2="-15"
  />
</svg>
.limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

Rounded rectangles

Now, let’s add the mouth of the figure. We use another rectangle for it. Note the rx property at its definition. This will make the edges of the rectangle rounded. It is similar to the border-radius property for regular HTML elements.

-100, -100
0, -50 -10, -40 0, -50 -10, -40
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle
    class="head"
    cx="0"
    cy="-50"
    r="30"
  />
  <rect
    class="mouth"
    x="-10"
    y="-40"
    width="20"
    height="5"
    rx="2"
  />
</svg>
.head {
  fill: #cd803d;
}


.mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

Gingerbread figure

Once we put it all together, and add eyes and buttons, this is how the final code looks like:

<svg class="gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="head" cx="0" cy="-50" r="30" />


  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />


  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />


  <circle cx="0" cy="-10" r="5" />
  <circle cx="0" cy="10" r="5" />
</svg>
.head {
  fill: #cd803d;
}


.eye {
  fill: white;
}


.mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}


.limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}