SVG Path<path>

In SVG, the<path>element is used to create paths, and it is one of the most powerful and flexible basic shapes in SVG.

Using<path>the element can draw various complex shapes such as lines, curves, arcs, etc., and the shape and style of the path can be controlled by setting path commands.

Basic Syntax

<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

Attribute explanation:

  • dThe attribute defines the path data, i.e., the sequence of path commands. Path data consists of a series of path commands, each command starts with a letter followed by a set of numeric parameters. Common path commands include: M (move to), L (line to), H (horizontal line to), V (vertical line to), C (cubic Bezier curve), S (smooth curve), Q (quadratic Bezier curve), T (smooth quadratic Bezier curve), A (arc), Z (close path), etc.

  • fillThe attribute defines the fill color of the path.

  • strokeThe attribute defines the stroke color of the path.

  • stroke-widthThe attribute defines the stroke width of the path.

The following code draws a path with orange fill, black stroke, and a width of 2 pixels. Its path data is: move to (50, 50), then connect to (150, 50) and (100, 150) in order, and finally close the path.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

Example 1

The following example defines a path that starts at position 150 0, reaches position 75 200, then from there goes to 225 200, and finally closes the path at 150 0.

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>

Try it yourself »

Click to view:View SVG file。

Example 2

The following example creates a quadratic Bezier curve, where A and C are the start point and end point respectively, and B is the control point:

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg>

Try it yourself »

Click to view:View SVG file。

Notes

  • <path>The path data of the element is the most complex part of SVG, and requires a certain amount of learning and practice to master the use of various path commands.

  • Path data can contain multiple path commands, and each path command can have different parameters to control the shape and direction of the path.

By using<path>the element, you can draw various complex shapes and paths in SVG, and control the appearance and style of the path by setting attributes.

Other extensions