Build a Heart Icon

This workshop is designed to take theory into practise. Having read about Working with Images and SVGs in the previous lesson, the task now was to create a Heart Icon. Again, you are given some HTML Boilerplate, along with extra instructions at each step - starting with creating an svg element.

I understood the use of the path element easily enough but the draw attribute is something I'm going to research further, if only because you end up with a series of letters and mumbers, as below:

    <svg>
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      ></path>
    </svg>

Although I recognize that the letters are commands like "move to" and the numbers represent coordinates, encountering a jumble like this highlighted how much more there is to learn, prompting me to explore the topic in greater depth.

Setting the width and height for the icon held no surprises and even the viewBox attribute made sense to me. With those steps completed, the last exercise had me using the fill attribute to change the heart to red.

    <svg width="24" height="24" viewBox="0 0 24 24" fill="red">
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      ></path>
    </svg>

All in all, a great series of lessons within the Responsive Web Design certification at freeCodeCamp, with a little more study required by myself!