Paths

While SVG shapes are good for simple images, any image for complex curves will require a path element. A path element has a d atrribute which contains a sequence of drawing commands. These commands have single letter codes and may be followed by numerical parameters. Uppercase commands, indicate parameters are absolute values, lowercase commands indicate that parameters of relative values. The commands are:

  • M/m (move to)
  • L/l (line to)
  • H/h (horizontal line to)
  • V/v (vertical line to)
  • Q/q (quadratic curve to)
  • T/s (smooth quadratic curve to)
  • C/c (cubic curve to)
  • S/s (smooth cubic curve to)
  • A/a (elliptical arc to)

There is also the Z/z command, which closes the path, i.e. draws a straight line from the current coordinate to the initial coordination. It doesn't matter make any difference if you use an uppercase or lowercase Z.

Straight lines (L, H, V)

Nearly all paths will start with a M x,y since you will generally want to move to a new starting position. The example below shows how to draw two continuous straight lines by first moving to a point, then using L or l to move to two more points. Both M and L are followed by two digits which define the coordinates. For uppercase commands, this moves the virtual pen to that coordinate, for lowercase commands this moves the virtual pen by those values.

Below is an example of a simple path element and three different ways to create it. Drag any of the nodes to change the code.

Note that you can can use spaces or commas between coordinates and there is no need for spaces between commands or between a command and it parameters. You can even do weird things like M0.5.5 which will move the pen to coordinate (0.5, 0.5). As with several other commands, once you have used the L command once, any subsequent pairs of coordinates will be considered part of additional line to commands (as in the final point of the compact example). In general, I think it's safer to explicitly define each command and to use spaces and commas liberally.

The H command is followed by a single value (actually it can be followed by mutliple values, but it is pointless to do so) and will draw a line horizontally such that the pen now has an x-coordinate of that value. The h command moves the pen horizontally by the given value. The y-coordinate of the pen stays the same; the V/v commands more the pen in a similar way vertically. Although these commands require slightly less code that the L/l commands, I have never bothered to use them nor seen anyone else use them.

Quadratic curves (Q, T)

Quadratic Bézier curves have the form Q x1,y1 x2, y2. They start at the current point and curves to (x2, y2), using (x1, y1) as a control point.

The T command can only follow a Q command and it tell the pen create a quadratic curve to a new coordinate using a control point that is symmetrical to the previous one. It's easier to explain with a diagram and in general I don't see any need to use the T command.

Cubic curves

Cubic Bézier curves are similar to quadratic Bézier curves, but the start and end coordinates have separate control points. The cubic curve has the form C x1,y1 x2, y2 x3,y3. It starts at the current point and curves to (x3, y3), using (x1, y1) and (x2, y2) as a control points.

More soon...

Comments

Hey Peter!

 

Thanks for this excellent tutorials on SVG; it has been helping me a lot recently!  Yet,  i have a question regarding the second example under "Quadratic curves".  I do not fully understand how you 'animate' the dragging of the control points.

Ok, so you define your points within a g-Element:

<g transform="translate(80,100)" >
<circle class="control_point" cx="0" cy="0" r="10" onmousedown="selectElement(evt, 1)" />
<circle class="point1 invisible" cx="10" cy="0" r="3" />
</g>

 

Then, the currently selected circle within the class "control_point" (which is the circles showing up when hovering with the mouse) is moved by this line of code:

control_point.setAttributeNS(null, "transform", "translate(" + x + "," + y + ")");

But, what about the  small circle in the middle?

 I just dont get it!
 Is the setAttributeNS- command somehow automatically applied to the other elements within the same g-Element?

I am sure this is a silly question, but i am just now beginning to learn SVG and i just cant figure out how the small circles are moved.

Hope you can enlighten me with this one!

best regards,

Mark

Hi Mark,

It's a good question, especially if you're just learning. Looking through the code again, it seems that control point refers not to the outer circle, but to the group. The key line is:

control_point = evt.target.parentNode;

The parentNode part means it finds the group that wraps the target - in this case, one of the circles. Transforming a group transforms all elements in that group. I hope that answers your question.

Post new comment

The content of this field is kept private and will not be shown publicly.