2

I have recently gotten an SVG snippet from some website, shown below. Although this is doing somewhat similar to what I want (a half circle), I am having issues fixing it to accommodate my needs. Could someone explain what each part of the following snippet means?

<svg width="256" height="256">
  <path d="M 128,128 L 128,0 A 128,128 1 0,1 256,128 Z" />
</svg>
2

The letters in the d attribute of paths stand for certain commands. The numbers are coordinates or other parameters of each command.

  • M stands for "move", specifically move to the exact coordinates that follow (as opposed to m which stands for move relative to the current position). The 128, 128 is the x, y to move to.

  • L stands for (straight) "line" to the next coordinate(s).

  • A stands for "arc" (specifically an oval-shaped arc) following the following format: rX,rY rotation, arc, sweep, eX,eY.

  • Z then closes the path by drawing a straight line directly back to the last place the "pen" was set down (probably the last M or m command).

For more information on how all of the parts of the d attribute of paths works, see this very helpful CSS-Tricks post.

  • Thanks so much for the help! Appreciate it and sorry for the delayed accept :) – Daneolog Feb 14 at 22:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.