<!doctype html>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="500" height="500">
    <defs>
        <marker id="arrow1" orient="auto" markerWidth="10" markerHeight="10" style="overflow:visible">
            <path d="M50,0 L 0,-50 L0,50 z" fill="skyblue" />
        </marker>
         <marker id="arrow2" orient="auto-start-reverse" markerWidth="10" markerHeight="10" style="overflow:visible">
            <path d="M50,0 L 0,-50 L0,50 z" fill="skyblue" />
        </marker>
         <marker id="arrow3" orient="77" markerWidth="10" markerHeight="10" style="overflow:visible">
            <path d="M50,0 L 0,-50 L0,50 z" fill="skyblue" />
        </marker>
         <marker id="arrow4" orient="auto-start-reverse" markerWidth="10" markerHeight="10" style="overflow:visible">
            <path d="M50,0 L 0,-50 L0,50 z" fill="skyblue" />
        </marker>
    </defs>
    <path d="M 200,200 h 600" marker-start="url(#arrow1)" marker-end="url(#arrow1)" stroke="black"/>
    <path d="M 200,400 h 600" marker-start="url(#arrow2)" marker-end="url(#arrow2)" stroke="black"/>
    <path d="M 200,600 h 600" marker-start="url(#arrow3)" marker-end="url(#arrow3)" stroke="black"/>
    <path d="M 200,800 h 600" marker-start="url(#arrow4)" marker-end="url(#arrow4)" stroke="black"/>
</svg>

