Expand Messages
• ... sure) ... Hi Brian, The c command in the path statement takes 3 x,y combinations. The first one is the start direction. The second the end direction and
Message 1 of 4 , Jan 2, 2002
--- In svg-developers@y..., "bb31516" <bblank@n...> wrote:
> Hi,
>
> I am having trouble with the Path statement, I don't understand.
> Can someone explain it to me.
>
> I have the statement below:
> I understand d="" is draw
> - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not
sure)
> - c110,-25 is (I think) start curve at position 110 pixels over
> and -25 pixels (up). Thats fine.
> - 70,-65 is my ending point.. 70 pixels over from starting point
> and -65 pixels up from starting point.
>
> <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;
> fill:none;" />
>
> What I don't understand is where I have 5,5.
> What do these numbers mean exactly???
> I have tried different numbers, it just doesn't turn out right.
> I just want a simple curve from lower left to upper right.
> The way it is written, it doubles back and then curves into 70,-65.
>
> Am I using the right type of curve, Bezier curve?
> I have seen other examples and they have simple curves.
> I have looked on the Internet and cannot find a simple
> answer as to what the numbers mean.
>
> Can anyone help me please. Yes I'm new, but learning.
>
> Thanks, Brian

Hi Brian,

The c command in the path statement takes 3 x,y combinations.
The first one is the start direction. The second the end direction
and the last one the end point of the curve.

For example:
<path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>

makes a curve from bottom left to top right.

good luck,

Dennis
• Hi Brian, ... I think it originally stood for data. ... Being a lowercase-em m , it is a relative moveto (at least anywhere else in the path syntax it would
Message 2 of 4 , Jan 3, 2002
Hi Brian,

On Wed, 02 Jan 2002, mraceoo7 wrote:

> > I am having trouble with the Path statement, I don't understand.
> > Can someone explain it to me.
> >
> > I have the statement below:
> > I understand d="" is draw

I think it originally stood for data.

> > - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not
> sure)

Being a lowercase-em "m", it is a relative moveto (at least anywhere
else in the path syntax it would be - here it is the first command
so it is the same as an absolute moveto).

> > - c110,-25 is (I think) start curve at position 110 pixels over
> > and -25 pixels (up). Thats fine.

Not quite. "c" means draw a cubic bezier. As it is lowercase, the
coordinates are relative rather than absolute.

The next coordinate (100,-25) is the offset to the first control
point (ie. draw a line from the current point (110,-25) to (210, -50)
and that is the tangent of the start of the curve).

> > - 70,-65 is my ending point.. 70 pixels over from starting point
> > and -65 pixels up from starting point.

This is the offset from the current point (the start of the curve)
that defines the second control point. A line between this second
control point and the final point (the third coordinate in the syntax)
is the tangent to the curve at the final point.

> >
> > <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;
> > fill:none;" />
> >
> > What I don't understand is where I have 5,5.
> > What do these numbers mean exactly???
> > I have tried different numbers, it just doesn't turn out right.
> > I just want a simple curve from lower left to upper right.
> > The way it is written, it doubles back and then curves into 70,-65.
> >
> > Am I using the right type of curve, Bezier curve?

Yes.

In other cases it just depends on what you want. You cannot, for
example exactly represent a circular arc with a cubic bezier, but
you probably would never notice the difference (in fact, most
viewers do this anyway). Sometimes you might be able to use a more
simple quadratic bezier (only one control point).

> > I have seen other examples and they have simple curves.
> > I have looked on the Internet and cannot find a simple
> > answer as to what the numbers mean.
> >
> > Can anyone help me please. Yes I'm new, but learning.
> >
> > Thanks, Brian
>
> Hi Brian,
>
> The c command in the path statement takes 3 x,y combinations.
> The first one is the start direction. The second the end direction
> and the last one the end point of the curve.
>
> For example:
> <path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>
>
> makes a curve from bottom left to top right.

While this probably works in some SVG viewers, it is unfortunately
invalid since all path commands must begin with a moveto command.
(for the gory details check out Section 8.3.9). Yes, it's picky
I know :)

Dean
• Thanks... I think I ll have to read it a few times to understand it though...lol I think I got the MoveTo and different curve commands. The control points is
Message 3 of 4 , Jan 3, 2002
Thanks...
I think I'll have to read it a few times to understand it though...lol
I think I got the MoveTo and different curve commands.
The control points is what I don't quite understand.
I did figure out how to get the curve I wanted, but I don't understand
the numbers and how they relate.

Thanks, Brian

--- In svg-developers@y..., Dean Jackson <dean@w...> wrote:
> Hi Brian,
>
> On Wed, 02 Jan 2002, mraceoo7 wrote:
>
> > > I am having trouble with the Path statement, I don't understand.
> > > Can someone explain it to me.
> > >
> > > I have the statement below:
> > > I understand d="" is draw
>
> I think it originally stood for data.
>
> > > - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not
> > sure)
>
> Being a lowercase-em "m", it is a relative moveto (at least anywhere
> else in the path syntax it would be - here it is the first command
> so it is the same as an absolute moveto).
>
> > > - c110,-25 is (I think) start curve at position 110 pixels over
> > > and -25 pixels (up). Thats fine.
>
> Not quite. "c" means draw a cubic bezier. As it is lowercase, the
> coordinates are relative rather than absolute.
>
> The next coordinate (100,-25) is the offset to the first control
> point (ie. draw a line from the current point (110,-25) to (210, -
50)
> and that is the tangent of the start of the curve).
>
> > > - 70,-65 is my ending point.. 70 pixels over from starting
point
> > > and -65 pixels up from starting point.
>
> This is the offset from the current point (the start of the curve)
> that defines the second control point. A line between this second
> control point and the final point (the third coordinate in the
syntax)
> is the tangent to the curve at the final point.
>
> > >
> > > <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;
> > > fill:none;" />
> > >
> > > What I don't understand is where I have 5,5.
> > > What do these numbers mean exactly???
> > > I have tried different numbers, it just doesn't turn out right.
> > > I just want a simple curve from lower left to upper right.
> > > The way it is written, it doubles back and then curves into 70,-
65.
> > >
> > > Am I using the right type of curve, Bezier curve?
>
> Yes.
>
> In other cases it just depends on what you want. You cannot, for
> example exactly represent a circular arc with a cubic bezier, but
> you probably would never notice the difference (in fact, most
> viewers do this anyway). Sometimes you might be able to use a more
> simple quadratic bezier (only one control point).
>
> > > I have seen other examples and they have simple curves.
> > > I have looked on the Internet and cannot find a simple
> > > answer as to what the numbers mean.
> > >
> > > Can anyone help me please. Yes I'm new, but learning.
> > >
> > > Thanks, Brian
> >
> > Hi Brian,
> >
> > The c command in the path statement takes 3 x,y combinations.
> > The first one is the start direction. The second the end
direction
> > and the last one the end point of the curve.
> >
> > For example:
> > <path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>
> >
> > makes a curve from bottom left to top right.
>
> While this probably works in some SVG viewers, it is unfortunately
> invalid since all path commands must begin with a moveto command.
> (for the gory details check out Section 8.3.9). Yes, it's picky
> I know :)
>
> Dean
Your message has been successfully submitted and would be delivered to recipients shortly.