SVGSketch Feature

SVG Markers - Arrowheads and Vertex Graphics

Add arrowheads, dots and custom vertex graphics to any stroke. Built-in markers, markers made from your own shapes, orient and markerUnits control.

Open SVGSketch

Quick answer

Select a stroked shape and pick a marker for Start, Mid or End on the Stroke row of the Appearance panel. Five markers are built in - Arrow, Open Arrow, Circle, Diamond and Square - and you can make your own from selected shapes with "Create Marker" in the Library panel. Markers export as native SVG `<marker>` definitions.

What markers do

MARKER-START / MID / ENDCircle · Diamond · Arrow
Start, middle and end are three properties One stroke carrying three different markers. marker-mid applies to every interior vertex, not just one, which is what makes it useful for plotting a data run.
ORIENTorient="auto"orient="0"
orient="auto" follows the curve The same arrow on the same path. With orient set to auto each marker turns to the tangent at its vertex; with a fixed angle they all point the same way.
MARKERUNITSstrokeWidthuserSpaceOnUse
Markers can scale with the stroke, or not A thin and a thick stroke wearing the same arrow. Under strokeWidth - the SVG default - the size is a multiple of the stroke, so the arrowhead grows with the line; under userSpaceOnUse it is a plain length and the arrowhead stays put.

Three vertex roles, set separately

The Stroke row of the Appearance panel has a Markers section with Start, Mid and End. They are three independent properties, and mid applies to every interior vertex rather than to one - so a polyline plotting a data run gets a dot at every reading from a single setting.

Because markers are painted alongside the fill and the stroke, paint order decides which of the three lands on top - drag the Appearance panel rows to change it. That is the setting to reach for when an arrowhead is being covered by a thick stroke.

Five built in, or make your own

Arrow, Open Arrow, Circle, Diamond and Square ship with the editor and are marked "Built-in" in the Library panel's Markers tab; they are not editable, because their geometry comes from a shared registry rather than from shapes. The built-ins inherit the stroke color of the shape wearing them, so an arrowhead always matches its line.

For anything else, select shapes and use "Create Marker". The result is a definition whose contents are ordinary editable shapes - you can reopen it, change the geometry, and every stroke wearing it updates.

Orientation and scale are properties of the marker

A marker set to orient automatically turns to the path tangent at each vertex, which is what makes an arrowhead point along a curve rather than off it. A fixed angle instead keeps every copy at the same rotation, which is what you want for a tick or a label pin.

markerUnits decides whether the marker grows with the stroke. The SVG default scales with stroke width, so an arrowhead stays in proportion as the line thickens; the alternative pins it to a fixed size in user space. Both are attributes of the definition, so changing one updates every stroke that references it.

They export as real SVG

Markers leave the editor as <marker> elements in <defs> with marker-start, marker-mid and marker-end references - the native SVG 2 mechanism, handled by the browser. Nothing is baked into paths, so the arrowheads stay editable in whatever tool opens the file next.

FAQ

How do I put an arrowhead on a line?

Select the line, open the Appearance panel, select its Stroke row, and choose Arrow under Markers > End. Start and Mid are separate pickers on the same control.

Can I make my own marker?

Yes. Draw the shapes, select them, and use "Create Marker" in the Library panel's Markers tab. Custom markers stay editable; the five built-ins do not, because their geometry comes from a shared registry.

Why does my arrowhead not follow the curve?

Its orientation is set to a fixed angle rather than to auto. Automatic orientation rotates each copy to the path tangent at its vertex.

Why did my arrowhead get bigger when I thickened the line?

That is markerUnits doing its job - the SVG default scales markers with stroke width so they stay in proportion. Switch it to user space if you want a fixed size.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch