SVG <marker> Element

The <marker> element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path.

Syntax:

<marker></marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient="">

Property Values: This element contains the following properties:

• refX: It gives the reference for the x-coordinate of the marker.
• refY: It gives the reference for the y-coordinate of the marker.
• viewbox: Viewbox gives details about the bound of the SVG viewport for the current SVG.
• orient: It defines the orientation of the marker.
• markerWidth: This attribute defines the width of the marker viewport.
• markerHeight: This attribute defines the height of the marker viewport.

Below given are a few examples of the function given above.

Example1:

Output:

👁 Image

Example 2:

Output:

👁 Image