EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.


[SVG] What is SVG path?

Previous: [SVG] How to write text?

The <path> element is used to define a path.

The following commands can be used for path data:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Note: All the above commands allow lowercase letters. Upper case means absolute positioning, lower case means relative positioning.


  <path d="M150 0 L75 200 L225 200 Z" />

It looks like this in HTML5:


You see this is a triangle.

In most cases, we use this method to draw graphics. Although we talked about circles, rectangles, and polygons, the path drawing method is actually the most commonly used, because the path method can draw more complex graphics.

such as:

                                A     B     C  


<svg height="400" width="450">
<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" />
  <!-- 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>

Do you see how complicated this code is? But this is fairly simple. Understanding the above code will be very helpful to you.

Next: [SVG] How to draw a coordinate system?

This article was last edited at 2020-12-09 14:11:40

* *