ImageToSVG

How to Use SVG <marker> — Arrowheads and Line Decorations

SVG marker attaches reusable shapes to path endpoints — create arrowheads, circles, and custom decorations on lines and connectors.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

SVG Marker Syntax for Arrowheads

Define a `<marker>` in `<defs>` with a shape inside (typically a triangle `<polygon>`). Apply with `marker-end='url(#arrowId)'` on a path to attach the arrowhead at the endpoint.

  • <marker id='arrow' viewBox='0 0 10 10' refX='10' refY='5' orient='auto'>
  • <polygon points='0,0 10,5 0,10' fill='black'/>
  • Apply: <path marker-end='url(#arrow)' d='M10,50 L200,50'/>

Marker Positioning and Orient

`orient='auto'` rotates the marker to follow the path direction — critical for arrowheads on curved paths. `refX` and `refY` set the marker's anchor point (usually the tip of the arrow).

  • orient='auto': rotates marker to match path tangent
  • refX='10' refY='5': aligns arrow tip to path endpoint
  • marker-mid places markers at each path vertex midpoint

Frequently Asked Questions

How do I add a double-sided arrow with SVG markers?

Apply marker-start='url(#arrow)' and marker-end='url(#arrow)' to the same path. Define the start arrow rotated 180° or use orient='auto-start-reverse'.

Can SVG markers be used on bezier curves?

Yes — orient='auto' on the marker rotates it to follow the tangent of the bezier curve at the endpoint, keeping the arrowhead aligned to the curve direction.

Related guides

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG