A chart drawn in SVG often ends its axis with an arrowhead, and every data point on a line chart can be marked with a small dot. Drawing that arrow or those dots by hand, recalculating their position every time a value changes, quickly becomes unmanageable.
The <marker> element solves this: it defines a small reusable shape that the browser places and orients automatically at the start, along each middle vertex, or at the end of a path, with no manual position or angle calculation at all.
Definition
A <marker> is a shape template, defined once inside <defs> with an id, then attached to a <path>, a <polyline> or a polygon through one of three properties: marker-start, marker-mid and marker-end. The browser places a copy of the marker exactly on the relevant point (first point, every middle point, last point) and orients it to match the direction of the path at that spot, unless told otherwise.
Main attributes
- markerWidth / markerHeight: the size of the marker's display viewport, 3 by default.
- refX / refY: the point inside the marker that lands exactly on the path's point, essential for an arrowhead to point precisely at the end of the line rather than slightly off it.
- orient:
autoto follow the path's angle,auto-start-reverseto flip the start marker (handy for a double-headed arrow), or a fixed angle in degrees. - markerUnits: defaults to
strokeWidth, so the marker's size scales with the stroke thickness.
A concrete example
An arrowhead at the end of a line, built from a small triangular shape used as the marker:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 Z" fill="#2563eb" />
</marker>
</defs>
<line x1="20" y1="50" x2="170" y2="50" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow)" />
</svg>If the line changes direction or length, the arrow follows automatically: no marker coordinate ever needs to be recalculated by hand.
Difference from <use>
A <use> copies an element to a position you set yourself with x and y, with no particular link to a path. A <marker> never places itself: it only activates when attached to a path, through marker-start, marker-mid or marker-end, and automatically inherits the orientation of the segment it lands on. For a single icon placed at a fixed spot in the drawing, that element is the right choice; for arrows or dots that need to follow a path, only a marker orients itself.
A classic trap
marker-start, marker-mid and marker-end properties only work on shapes made of line segments: a path, a line, a polyline or a polygon. Setting them on a rectangle or an ellipse triggers no error, but no marker appears either, silently. Another common trap: marker content is automatically clipped to the size set by markerWidth and markerHeight, a shape drawn larger than that frame gets cut off with no warning.Real-world use case
Markers typically place an arrowhead at the end of an axis on a line chart, show a small circle on every reading of a sensor plotted in real time, or indicate flow direction on a process diagram drawn in SVG, without a single position ever being calculated by hand.
FAQ
Yes, a <marker> can contain several graphic elements, much like a small standalone SVG: a circle with an outline, a colored triangle, or even short text, as long as everything fits inside the frame set by markerWidth and markerHeight.
This is almost always a matter of poorly set refX and refY, or orient left at its default on a start marker, add orient="auto-start-reverse" so the start arrow points outward from the path instead of inward.
No: a single <marker> identified by an id can be referenced by marker-end on as many paths as needed, exactly like a shared color or gradient definition used throughout the document.