(click anywhere to close)

[SVG] Markers

category: Website | course: SVG | difficulty:

We’ve looked at filling and stroking elements as a whole, but what if we want to style individual points of the path? That’s when markers come into play!

A marker can contain any type or amount of SVG content, and is a sort of minigraphic. It’s a small, contained graphic that you can use to mark individual path points. You need two building bricks for this to work: an element that defines and contains this marker, and an element – with a path, of course – that has a link to that marker.

Creating a Marker

The syntax for creating a marker is

<marker id="referenceID" markerWidth="value" markerHeight="value" refX="value" refY="value" orient="value"> … svg content … </marker>

The value inside the id attribute is the name of this marker, which is used by other elements to reference and use the marker. You can make up these names yourself.

The markerWidth and markerHeight attributes set the width and height of the marker. This doesn’t change the content, but only the size at which the marker is displayed when referenced.

The refX and refY attributes set the midpoint or origin. This midpoint is what is actually aligned with the point on the path. The default value is 0 for both, which means the top left corner.

The orient attribute decides how the marker is oriented, or rotated. You can set it to a value to rotate the marker that amount of degrees, or you can set it to auto to make sure it’s automatically set to the orientation of the point that it’s on.

Additionally, the markerUnits attribute can be set, which has two possible values: strokeWidth scales the marker’s size in accordance with the stroke-width of the path it’s used on, while userSpaceOnUse prevents that behaviour.

<!-- Nothing is displayed, even if the marker isn't inside a <defs> element -->
    <marker id="blueRectangle" markerWidth="30" markerHeight="30" refX="15" refY="15">
        <rect x="0" y="0" width="30" height="30" fill="blue" />

Referencing a Marker

As stated earlier, the name you gave your marker in the id attribute will be used for referencing that marker – just like with anchors in HTML, or ids in CSS. The notation is the same as well, which means a marker can be referenced with url(#markerID).

There are, however, three different positions a marker can be used, and therefore three different attributes to which a marker can be supplied. These are marker-start, marker-mid and marker-end. The first determines what marker to use for the first point of the path, the third what to use for the last point of the path, and the second what to use for all points in between.

        <!-- Notice how the rectangle is oriented in the same direction as the line -->
        <marker id="blueRectangle" markerWidth="30" markerHeight="30" refX="15" refY="15" orient="auto" markerUnits="userSpaceOnUse">
            <rect x="0" y="0" width="30" height="30" fill="blue" />
        <!-- Notice how the circle is scaled according to the stroke-width of the path -->
        <marker id="redCircle" markerWidth="30" markerHeight="30" refX="15" refY="15">
            <circle cx="15" cy="15" r="15" fill="red" />
    <polyline points="40,40 100,100 200,50" marker-start="url(#blueRectangle)" marker-mid="url(#blueRectangle)" marker-end="url(#redCircle)" fill="transparent" stroke="orange" stroke-width="3" />

Markers & Symbols

Maybe you’ve already noticed that markers and symbols are quite similar, in the sense that they are both a sort of minigraphic. It’s always possible, and even highly recommended, to place markers inside a <defs> element. It helps keep your code structured, because markers are essentially definitions to be used elsewhere later on. It isn’t possible, however, to reference markers with the <use> element from last chapter.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk