1. Curves with Bezier Commands
Bezier curves are widely used in SVG for creating smooth and flowing shapes. There are two main types: Quadratic Bezier Curves (Q command) and Cubic Bezier Curves (C command).
Quadratic Bezier Curve (Q command):
Syntax: Q control-point-x control-point-y end-point-x end-point-y
Example:
<path d="M 100 100 Q 200 50 300 100" />
Explanation: This command draws a quadratic Bezier curve from the current point to the end point (300, 100) using the control point (200, 50).
Cubic Bezier Curve (C command):
Syntax:
C control-point-1-x control-point-1-y control-point-2-x control-point-2-y end-point-x end-point-y
Example:
<path d="M 100 100 C 150 50, 250 50, 300 100" />
Explanation: This command draws a cubic Bezier curve from the current point to the end point (300, 100) using two control points (150, 50) and (250, 50).
2. Arcs with the Arc Command
Arcs are used to create elliptical curves in SVG. The A command is used for arcs.
Arc Command (A command):
Syntax: A rx ry x-axis-rotation large-arc-flag sweep-flag x y
Example:
<path d="M 100 100 A 50 50 0 0 1 200 200" />
Explanation:
This command draws an elliptical arc from the current point to (200, 200) with a radius of 50 on both x and y axes.
3. Splines with the Spline Commands
Splines are used to create smooth curves through a set of control points. SVG provides commands like L, T, S, and R for different types of splines.
Smooth Curve (S command):
Syntax: S x2 y2, x y
Example:
Explanation:
- This command draws a smooth quadratic Bezier curve using the control point (150, 50) and the end point (200, 100).
- Smooth Cubic Bezier Curve (S command):
Syntax:
S x2 y2, x y
Example:
Explanation:
- This command draws a smooth cubic Bezier curve using the control points (150, 50) and (200, 100) and the end point (250, 150).
- Catmull-Rom Curve (R command):
Syntax:
R x2 y2, x y
Example:
<path d="M 100 100 R 150 50, 200 100, 250 150" />
Explanation:
- This command draws a Catmull-Rom spline curve through the points (100, 100), (150, 50), (200, 100), and (250, 150).
- These SVG path commands are versatile and can be combined to create intricate shapes and paths in SVG graphics. Each command has specific parameters that define the shape and behavior of the curve or line drawn.
Practice Excercise Practice now