Chapter 16: SVG marker
SVG Marker means using the <marker> element to create small reusable graphics (like arrowheads, dots, circles, diamonds, custom symbols) that automatically attach to the start, middle, or end of lines, paths, polylines, or polygons.
Think of it this way:
- You draw a line or path
- You want nice arrow tips at the ends? Or dots at every corner?
- Instead of manually drawing each arrow every time → define one small symbol once (the marker), then attach it to any line/path you want
This is super common in:
- Flowcharts (arrows connecting boxes)
- Graphs & charts (arrowed axes)
- Maps (direction arrows)
- Technical diagrams
- Decorative lines (dots, stars along path)
1. How Markers Work (Big Picture)
- Define the marker inside <defs> (hidden reusable area) with <marker id=”…” …>
- Inside the marker, draw your symbol (circle, path for arrow, etc.)
- On your <line>, <path>, <polyline>, or <polygon>, add attributes:
- marker-start=”url(#myArrow)” → at beginning
- marker-mid=”url(#myDot)” → at every middle vertex/corner
- marker-end=”url(#myArrow)” → at end
Browser automatically places, rotates, and scales the marker to fit the line direction!
2. Key Attributes of <marker>
| Attribute | Meaning | Required? | Default | Common Example | Notes |
|---|---|---|---|---|---|
| id | Unique name to reference later | Yes | — | “arrow”, “dot” | Must have! |
| markerWidth | Width of marker’s viewport | No | 3 | 10, 13 | Size of marker “box” |
| markerHeight | Height of marker’s viewport | No | 3 | 10, 13 | Usually same as width |
| refX | X point in marker that “pins” to line vertex | No | 0 | 5, 0, 2 | Center or tip point |
| refY | Y point in marker that pins | No | 0 | 5, 6 | Aligns with line end |
| orient | Rotation: “auto” (follows line direction) or angle | No | 0 | “auto”, 45 | “auto” = most used |
| markerUnits | Coordinate system: “strokeWidth” or “userSpaceOnUse” | No | strokeWidth | userSpaceOnUse | strokeWidth = scales with line thickness |
3. Your First Marker Example – Arrowhead on Line (Copy-Paste Now!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Marker – Arrow Example</title> </head> <body> <h1>Line with Arrowheads Using Marker</h1> <svg width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;"> <defs> <!-- Arrow marker definition --> <marker id="arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" fill="black"/> </marker> </defs> <!-- Line using the marker at both ends --> <line x1="50" y1="100" x2="350" y2="100" stroke="navy" stroke-width="6" marker-start="url(#arrow)" marker-end="url(#arrow)"/> </svg> </body> </html> |
What you see: Thick navy line with black arrowheads at both ends!
Breakdown:
- <marker id=”arrow”> → defines reusable arrow
- Inside: small <path> drawing triangle arrow
- refX=”2″ refY=”6″ → tip of arrow (pointy part) pins to line end
- orient=”auto” → arrow automatically rotates to match line direction
- On <line>: marker-start & marker-end reference it with url(#arrow)
4. More Useful Examples
Example 1: Circle Dot Marker (Polymarker at Corners)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<defs> <marker id="dot" markerWidth="8" markerHeight="8" refX="4" refY="4"> <circle cx="4" cy="4" r="3" fill="red"/> </marker> </defs> <polyline points="50,150 100,50 200,180 300,60 350,140" fill="none" stroke="green" stroke-width="4" marker-mid="url(#dot)" marker-start="url(#dot)" marker-end="url(#dot)"/> |
→ Red dots at start, every corner, and end
Example 2: Different Start & End Arrows
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<defs> <marker id="startArrow" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <path d="M0,0 L0,10 L8,5 Z" fill="blue"/> </marker> <marker id="endArrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"> <path d="M0,5 L8,0 L8,10 Z" fill="orange"/> </marker> </defs> <path d="M50,100 Q 200,20 350,100" fill="none" stroke="purple" stroke-width="5" marker-start="url(#startArrow)" marker-end="url(#endArrow)"/> |
→ Blue arrow at start, orange at end, on curved path
Example 3: Marker Scales with Stroke Width (Default Behavior)
If line is thicker → marker auto-scales bigger (because markerUnits=”strokeWidth” default)
5. Teacher’s Tips (Hyderabad Student Style 😄)
- Always put <marker> in <defs> — keeps it hidden & reusable
- refX/refY is the anchor point — usually center (width/2) or tip for arrows
- orient=”auto” → magic rotation; use number like 90 for fixed angle
- For same fill/stroke as line: use CSS fill: context-fill; stroke: context-stroke; (advanced, supported in modern browsers)
- Common mistake: Forget url(#id) or wrong refX/refY → marker off-center or wrong rotation
- Job/freelance: Arrows in diagrams, flowchart tools, data viz (D3.js loves markers), custom bullet points on paths
Understood SVG Markers now? It’s what turns boring lines into professional diagrams! Want next: Animated marker? Custom diamond marker? Mid markers on complex path? Or full flowchart example? Just tell me — we’re making your SVG look pro! 🚀
