This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)

preface

After learning the basic drawing of graphics, we will learn more about path drawing in SVG.

Differences between lowercase commands

In both of the examples in the previous article, our commands drew our graphs using uppercase letters, but we could have drawn them using lowercase letters as well. However, lowercase letters are relative commands, and instead of specifying an explicit target, their arguments indicate how far to move relative to the point before it. For example, the previous example, which draws a 200*100 rectangle, can be described using relative commands like this:

<path d="M10 10 h 200 v 80 h -200 Z" fill="red"/>
Copy the code

In the above code, we first set the brush at 10,10. Using the shorthand method of L command, from here, move the brush 200px to the right to form a horizontal line, then move it 100px down, then 100px to the left, and then use the Z close command to close the shape. So we have a 200 by 100 rectangle.

Curved painting

In the previous path example, you might wonder: We can do this more easily with rect, polyline, and polygon tags. Why use PATH?

Other elements might work better if you just draw straight lines, but PATH is what many developers use for SVG drawing. As far as I know, there is no performance advantage or disadvantage between them. Generating path through a script may be different, however, because the other two methods only need to point, whereas path’s syntax for this is a little more complex.

Cubic Bezier curve

The cubic Bezier curve needs to define one point and two control points, so to create the cubic Bezier curve using the C command, three sets of coordinate parameters need to be set:

C x1 y1, x2 y2, x y

<path d="M10 10 C 20 30, 40 30, 50 10" stroke="black" fill="transparent"/>
Copy the code

The Bezier curve command is also abbreviated S. Let’s look at the syntax of the S command:

<path d="M10 80 Q 95 10 180 80 S 265 150 360 80" stroke="black" fill="transparent"/>
Copy the code

When an S command is followed by a C or S command, its first control point is assumed to be the central symmetry point of the second control point of the previous command curve. If the S command is used alone, without the preceding C or S command, the current point will be the first control point. If the S command is used alone, without the preceding C command or another S command, then its two control points are assumed to be the same point.

Quadratic Bezier curve

A quadratic Bezier curve requires only one control point to determine the slope of the curve at the beginning and end. Two sets of parameters, control point and endpoint coordinates are required:

Q x1 y1, x y

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
Copy the code

Like the cubic Bezier curve, it has a shorthand command, called T, to extend the quadratic Bezier curve with shorter parameters. T will infer a new control point from the previous control point.

T x y

<path d="M10 80 Q 95 10 180 80 T 340 80" stroke="black" fill="transparent"/>
Copy the code

arc

An arc can be considered part of A circle or oval, and command A is the command to draw A curve. Let’s see what parameters it takes

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Corresponding to the x axis radius, y axis radius, arc rotation, Angle size, arc direction

Let’s take a look at this example

<path d="M10 315 L 110 215 A 30 50-45 0 1 215.1 109.9 L 315 10" stroke="black" fill="red" stroke-width="2"/>
Copy the code

The last

This article shows how to draw Bessel curves and curves in AN SVG path, which can be complicated to understand compared to the first three articles in this series, but should be easier to understand if you are familiar with algebra or calculus.

Thanks for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀