Engineering applies science, technology, art, and math in a project design.

The Free eBook on the right shows how the basic SVG shapes are coded. SVG can be used when designing web sites, eBook illustrations, or engineering operator interfaces for real-time control systems.

There are many ways SVG can be applied. Bézier curves animated below are the foundation of Computer Aided Design and Graphic Arts software. A good understanding of how things work makes for better engineering.

Quadratic Bézier Curves are defined with 3 points, a starting point, an ending point, and a control point. The control point is not on the curve, but controls the shape of the curve. The following images show the SVG <path> commands (M and Q) to make the curves. Click on the images to see them full screen.

Animated Bézier Curves

Quadratic Bézier Curves have one control point while Cubic Bézier Curves have 2 control points. The free
eBook, ** Learn SVG Interactively**, allows moving the start, control, and end points around while animating
the curve. It all works right in the eBook.