SVG Path question

Hello community,
I’m currently beginning with my first time on StyleStage and the opening design features an SVG in the HTML … the code of which I’m posting below. I researched SVGs and they are fascinating, but I have a few questions about this code in particular and I’m wondering if somebody could lead me through it. I’ll tell you what I know (please correct my “knowledge” if it´s inaccurate) and then what puzzles me. I´m also linking to the CodePen below so you can see what this svg code produces.


<svg xmlns="" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>

Style Stage

Okay. I get declaration of a namespace used by XML and the viewBox as the positioning viewable content within the viewport. The path d is the direction a shape goes in… Usually I would assume their would be M followed by a number and a V or H indicating horizontal or vertical. Yet, it’s just a long line.

Google helps: tutorial. It’s not just numbers; there are l and z commands too.

Also, just copy/paste the svg tag into a new pen’s HTML pane and play with the numbers to change the shape.

I don´t see the l and z commands in my example. Unless they are implied by spaces. Is there an order that commands are listed in that the system can inuit?

For example, M is also first, D is also second, L is always after D and A is always after L…
So shorthand would be just the numbers themselves…?

Move to (M) a point. Draw lines relatively (l) to the following points. Close the path (z) and you get a star. The points are pairs of numbers separated by spaces or signs.

The linked tutorial really does cover this. I suggest starting with the basic line drawing commands and practice drawing simple shapes.

1 Like

Okay. I see it now. Thank you. Yes. I´m rereading the tutorial