SVG arrowheads with marker: alignment, size and direction

Attach an arrowhead to the path endpoint

Define an SVG marker inside defs and reference its id with marker-end to place an arrowhead at the end of a path. Use marker-start for the beginning. The marker is a reusable graphic that follows a path attachment point, so you do not have to reposition an independent triangle every time the path changes.

This is useful for a diagram connector whose geometry is still being edited. It solves a different problem from a dash pattern or a reusable symbol placed at arbitrary coordinates. Keep the first example self-contained so that a missing external file cannot be mistaken for a marker-sizing error.

See the MDN marker reference.

Start with one complete example

The example defines a triangular arrowhead in a 10 by 10 coordinate system. Its point is at 10,5, so refX="10" and refY="5" attach that point to the line endpoint. The line ends at 190,40. With these choices, the triangle sits behind the endpoint instead of projecting an extra arrowhead length beyond it.

The same dark blue is written explicitly on the line and the triangle. That makes the example easy to inspect without relying on context-paint support or inheritance assumptions. If you change the line colour, change the marker fill too, or deliberately introduce a colouring mechanism that you test in the destination application.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 80"
     width="660" height="240" role="img" aria-labelledby="arrow-title">
  <title id="arrow-title">A blue arrow pointing to the right</title>
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5"
            markerWidth="6" markerHeight="6" orient="auto"
            markerUnits="strokeWidth">
      <path d="M0 0 L10 5 L0 10 Z" fill="#164e80" />
    </marker>
  </defs>
  <path d="M30 40 H190" fill="none" stroke="#164e80"
        stroke-width="3" marker-end="url(#arrow)" />
</svg>

Choose whether arrow size follows stroke width

MDN documents strokeWidth as the default markerUnits value. Under that choice, the marker’s dimensions are expressed relative to the stroke width of the referencing shape. In this example, increasing stroke-width therefore also increases the arrowhead. That is often appropriate for a bolder connector.

Use markerUnits="userSpaceOnUse" when you want to specify marker dimensions in the current user coordinate system instead. Choose suitable markerWidth and markerHeight values after making that change; keeping the same numbers can make the result much smaller. This choice fixes the relationship to the drawing’s user units, not to physical screen pixels under every outer transform.

The markerUnits reference describes the two sizing systems.

Anchor the tip before adjusting the canvas

The W3C specification defines refX and refY as the marker’s reference point placed at its path position. If an arrowhead appears detached from the line, compare those coordinates with the triangle’s actual tip before changing the outer SVG viewBox. An incorrect attachment point is not the same problem as clipping the whole illustration.

Next inspect markerWidth, markerHeight and the marker viewBox together. A zero marker dimension hides the marker. Leave appropriate space around custom geometry, especially if you add a stroke to the triangle. Change one variable at a time and keep a copy of the working minimal example for comparison.

Read the W3C marker specification for reference points and orientation.

Check both ends and the actual path direction

orient="auto" follows the direction at the marker’s position. For a definition used at both ends, orient="auto-start-reverse" reverses the start marker so the same arrowhead can point outward at the beginning and end. Test the result on the actual path rather than assuming that its visual left side is its starting point.

Path command order determines which endpoint is the start. Reversing the geometry can exchange the meaning of marker-start and marker-end even when the line looks similar. For a curved connector, inspect the endpoint tangent and whether the arrow points where the diagram’s reader expects. A technically valid arrow can still communicate the wrong relationship.

Preserve definitions through export

Keep the marker definition and every matching url(#id) reference in the exported SVG. If you combine several graphics into one document, use unique ids and update references together. Removing a defs block because it does not draw directly can make an otherwise visible connector lose its arrowhead.

SVG Vector Lab can help inspect source and edit supported geometry. Do not assume that every marker becomes an independently editable shape or survives every import operation unchanged. Retain your original, reopen the exported SVG in its intended browser or application, and check both its source and its appearance. A PNG export records the rendered picture rather than reusable marker definitions.

Inspect the complete diagram

Try the source in the SVG editor. Use the stroke guide for line width and the viewBox guide for outer framing. Research checked October 6, 2026; verify the final export in the application that will consume it.