Scalable vector graphic paths basically come in two categoreies.

  1. Lines
  2. Curves

First of all here is a basic ‘Line path’.

See the Pen svgPathTransparentSquare by Daniel (@Parsons) on CodePen.

And here is the same example using a ‘rect’ element instead of the ‘path’ element.

See the Pen svgRectInsteadofPath by Daniel (@Parsons) on CodePen.

Scalable Vector Graphic Paths – Curves

There are three types of curves used to draw a svg curve.

  1. Cubic Bezier
  2. Quadratic Bezier
  3. Arc

Cubic Bezier Curve

Here is a basic cubic bezier curve.

See the Pen svgPathCubicBezierBasicFirst by Daniel (@Parsons) on CodePen.

The coordinates can be broken down to get a better understanding.

  • ‘M10 10’ is the starting point for the drawing.
  • ‘C20 80’ is the first control point of the curve.
  • ’40 80′ is the second control point of the curve.
  • ’50 10′ is the point where the curve ends.

The ‘M’ means moveto – Move the pen to a new location. No line is drawn. All path data must begin with a ‘moveto’ command.

The ‘C’ means curveto – Draw a cubic Bézier curve from the current point to the point (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.

Quadratic Bezier Curve

A quadratic bezier curve needs only one control point. Here the control point is the value ‘Q 100 -50’.

See the Pen svgQuadraticBasicFirstCurve by Daniel (@Parsons) on CodePen.

The ‘Q’ means quadratic Bézier curveto – Draw a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.


And finally here is an elliptical arc example.

See the Pen svgArcEllipticalBasicExample by Daniel (@Parsons) on CodePen.

The ‘a’ means elliptical arc – Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicate how the ellipse as a whole is rotated relative to the current SVG coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

More on SVG (Scalable Vector Graphics)

SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *