SVG Line with Arrow head (marker)

How to Create an Arrowhead in SVG Using Markers

In this tutorial, we’ll see how to use the <marker> element in SVG to create an arrowhead at the end of a line.

SVG Code

Below is the code to create an arrow using an SVG marker:

  <svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- A marker to be used as an arrowhead -->
      <marker
        id="arrow"
        viewBox="0 0 10 10"
        refX="5"
        refY="5"
        markerWidth="10"
        markerHeight="10"
        orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
    </defs>

    <!-- A line with a marker -->
    <line
      x1="10"
      y1="10"
      x2="80"
      y2="80"
      stroke="black"
      stroke-width="2"
      marker-end="url(#arrow)" />
  </svg>
  

Live Example

Here’s how the arrow appears in the browser:

Some notes on using the 'viewBox' property:

• The viewBox="minX minY width height" determines how the internal coordinates (e.g., x, y, width, height of the <rect>) map to the actual display size (width and height of the <svg> element).

To experiment with SVG, along with CSS and JavaScrip, you can use:

• https://developer.mozilla.org/en-US/play
• https://codepen.io/