From my point of view, the main point of markers in SVG is to draw arrowheads.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="200px" height="200px" viewBox="0 0 200 200"> 04: 05: <defs> 06: <marker id="Arrow" 07: markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" 08: refX="-2" refY="0" 09: markerUnits="strokeWidth" 10: orient="auto"> 11: <polygon points="-2,0 -5,5 5,0 -5,-5" fill="red" stroke="black" stroke-width="1px"/> 12: </marker> 13: </defs> 14: 15: <path d="M 10,10 Q 100,250 180,100" stroke="blue" fill="none" stroke-width="5px" marker-end="url(#Arrow)"/> 16: 17: </svg>
A marker is somewhat like drawing a full SVG image. The parameters markerWidth, markerHeight and viewBox determine a rectangle in which we draw a picture. The parameters refX and refY determine a preferred point. By assigning markerUnits="strokeWidth", we indicate that 1 unit in the marker represents a distance equal to the stroke width of the curve we are adding to. By assigning orient="auto", we indicate that the arrow should be rotated to match the direction of the curve.
The objects within the marker tag will be rendered when drawing the marker. Note that the objects will be cropped if they move outside of the rectangle you defined.
This example illustrates the three types of markers:
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="400px" height="40px" viewBox="0 0 200 20"> 04: 05: <defs> 06: <marker id="Start" 07: markerWidth="2" markerHeight="4" viewBox="-2 -2 2 4" 08: refX="0" refY="0" 09: markerUnits="strokeWidth" orient="auto"> 10: <polyline points="-2,-2 0,0 -2,2" stroke="blue" stroke-width="0.5px" fill="none"/> 11: </marker> 12: 13: <marker id="Arrow" 14: markerWidth="6" markerHeight="6" viewBox="-3 -3 6 6" 15: refX="-1" refY="0" 16: markerUnits="strokeWidth" orient="auto"> 17: <polygon points="-1,0 -3,3 3,0 -3,-3" fill="blue"/> 18: </marker> 19: 20: <marker id="Line" 21: markerWidth="0.5" markerHeight="4" viewBox="-0.25 -2 0.5 4" 22: refX="0" refY="0" 23: markerUnits="strokeWidth" orient="auto"> 24: <polyline points="0,-2 0,2" stroke="blue" stroke-width="0.5px" /> 25: </marker> 26: </defs> 27: 28: <path d="M 10,10 L 30,10 L 50,10 L 70,10 L 90,10 L 110,10 L 130,10 L 150,10 L 170,10 L 190,10" 29: stroke="blue" stroke-width="2px" 30: marker-start="url(#Start)" marker-mid="url(#Line)" marker-end="url(#Arrow)"/> 31: 32: </svg>
