SVG: Two arrows with text on the ends

Arrow with Text SVG Using Markers and Text tags

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

SVG Code

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

<svg width="250" height="100" viewBox="0 0 250 100">
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <polygon points="0 0, 10 5, 0 10" />
    </marker>
  </defs>
  <line x1="10" y1="50" x2="180" y2="10" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
  <text x="195" y="15" fill="red">50N 30°</text>
  <line x1="10" y1="50" x2="50" y2="10" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
  <text x="60" y="15" fill="red">20N 45°</text>
</svg>
  

Live Example

Here’s how the arrow appears in the browser:

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

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