Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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>
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.
