Markers in SVG

The marker element is used for drawing arrowheads or polymarkers on a given path, line, polyline or polygon element. Markers in SVG are defined within element and then referenced with URI.

The marker element has the following attributes:

  • id attribute set a unique ID used to reference the marker.
  • markerUnits attribute defines the coordinate system for the marker element and its markerWidth and markerHeight attributes. The markerUnits attribute has 2 values:
    • strokeWidth (default) is set to use the coordinate system which has a single unit equal the size in user units of the current stroke width in place for the graphic object referencing the marker.
    • userSpaceOnUse is set to use the current user coordinate system in place for the graphic object referencing the marker.
  • refX and refY attribures set respectively the x- and y-axis coordinates of the reference point which is to be aligned exactly at the marker position. The default value is '0'.
  • markerWidth and markerHeight attributes define the width and the height of the viewport into which the marker is to be fitted when it is rendered. The default value is '3'. The value of zero disables rendering of the element.
  • orient attribute defines the rotation of the marker. This attribute has 2 values: auto and angle.

The <marker> element is never rendered directly. The only way to use them is to reference using the following properties:

  • marker-start defines the arrowhead that shall be drawn at the first vertex of the given element.
  • marker-end defines the arrowhead that shall be drawn at the final vertex of the given element.
  • marker-mid defines the arrowhead that shall be drawn at every other vertex (except the first and last).

Here is a simple example:

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<defs>
		<marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
			<path d="M 0 0 L 20 10 L 0 20 z"/>
		</marker>
		<marker id="Circle" viewBox="0 0 10 10" refX="4" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
			<circle cx="5" cy="5"  r="3" fill="black"/>
		</marker>
		<marker id="Rect" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
			<rect width="10" height="10" fill="grey"/>
		</marker>
	</defs>
	
	<line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" marker-end="url(#Triangle)" marker-start="url(#Circle)"/>
	<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" marker-end="url(#Triangle)" marker-mid="url(#Rect)" fill="none" stroke="black"/>
 </svg>			
							

Here is the resulting image: