<marker>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The <marker> SVG element defines a graphic used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.

Markers can be attached to shapes using the marker-start, marker-mid, and marker-end properties.

Usage context

Categories	Container element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Attributes

markerHeight: This attribute defines the height of the marker viewport. Value type: <length>; Default value: 3; Animatable: yes
markerUnits: This attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the <marker>. Value type: userSpaceOnUse | strokeWidth; Default value: strokeWidth; Animatable: yes
markerWidth: This attribute defines the width of the marker viewport. Value type: <length>; Default value: 3; Animatable: yes
orient: This attribute defines the orientation of the marker relative to the shape it is attached to. Value type: auto | auto-start-reverse | <angle>; Default value: 0; Animatable: yes
preserveAspectRatio: This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Default value: xMidYMid meet; Animatable: yes
refX: This attribute defines the x coordinate for the reference point of the marker. Value type: left | center | right | <coordinate>; Default value: 0; Animatable: yes
refY: This attribute defines the y coordinate for the reference point of the marker. Value type: top | center | bottom | <coordinate>; Default value: 0; Animatable: yes
viewBox: This attribute defines the bound of the SVG viewport for the current SVG fragment. Value type: <list-of-numbers>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGMarkerElement interface.

Examples

Drawing arrowheads

The following example shows how to draw an arrowhead on a line and on a curved path. For the curved path, an arrowhead is drawn at each point with a marker-mid marker.

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 300 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="6" markerHeight="6" 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="90" y2="90" stroke="black" marker-end="url(#arrow)" /> <!-- A curved path with markers --> <path d="M 110 10 C 120 20, 130 20, 140 10 C 150 0, 160 0, 170 10 C 180 20, 190 20, 200 10" stroke="black" fill="none" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" /> </svg>

Drawing polymarkers

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- Arrowhead marker definition --> <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> <!-- Dot marker definition --> <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- Coordinate axes with an arrowhead in both directions --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- Data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg>

Using context fill and stroke

The following example shows how to use the context-fill and context-stroke values to make a marker use the same fill and stroke as the shape it is attached to.

html

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <marker id="circle" markerWidth="6" markerHeight="6" refX="3" refY="3" markerUnits="strokeWidth"> <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" /> </marker> <style> path { marker: url("#circle"); } </style> <path d="M 10,10 30,10 h 10" stroke="black" /> <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" /> <path d="M 10,30 30,30 h 10" stroke="red" fill="none" /> <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" /> </svg>

html, body, svg { height: 100%; }

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # MarkerElement

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Aug 5, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content