We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The <marker> element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.

Usage context

CategoriesContainer element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGMarkerElement interface.

Example

SVG

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
        markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <polyline points="10,90 50,80 90,20" fill="none" stroke="black" 
      stroke-width="2" marker-end="url(#Triangle)" />
</svg>

Result

Specifications

Specification Status Comment
SVG Markers
The definition of '<marker>' in that specification.
Working Draft  
Scalable Vector Graphics (SVG) 2
The definition of '<marker>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<marker>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5993
markerHeight Yes Yes Yes Yes Yes Yes
markerWidth Yes Yes Yes Yes Yes Yes
markerUnits Yes Yes Yes Yes Yes Yes
orient Yes Yes Yes Yes Yes Yes
refX Yes Yes Yes Yes Yes Yes
refY Yes Yes Yes Yes Yes Yes
viewBox Yes Yes Yes9 Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 Yes Yes4 Yes3 ?
markerHeight Yes Yes Yes Yes Yes Yes ?
markerWidth Yes Yes Yes Yes Yes Yes ?
markerUnits Yes Yes Yes Yes Yes Yes ?
orient Yes Yes Yes Yes Yes Yes ?
refX Yes Yes Yes Yes Yes Yes ?
refY Yes Yes Yes Yes Yes Yes ?
viewBox Yes Yes Yes Yes Yes Yes ?

Document Tags and Contributors

Last updated by: fscholz,