Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG Stroke


The stroke of an SVG shape defines the outline of the shape. The stroke is one of the basic SVG CSS properties you can set for any SVG shape.

The style Attribute

The stroke and fill CSS properties are specified inside the style attribute of an SVG shape. Here is an example:

<circle cx="50" cy="50" r="50"
        style="stroke: #000066; fill: 3333ff;" />

This example defines a circle with a darker blue stroke color, and a lighter blue fill color.

Stroke Example

The stroke of an SVG shape is the outline of the shape. Here is an SVG stroke example:

<circle cx="50" cy="50" r="25"
      style="stroke: #000000; fill:none;" />

This example defines a circle with a black (#000000) stroke color, and no fill. Here is the resulting image:

Stroke and Fill Example

You can combine SVG stroke and fill colors for SVG shapes. Here is an SVG stroke and fill example:

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" />

This example defines a circle with a darker blue (#000066) stroke color, and a lighter blue (#3333ff) fill color. Here is the resulting image:

stroke-width

SVG has a stroke-width CSS property that defines the width of the stroke. Here is an SVG stroke-width example:

stroke-width: 3px;

This example set a stroke width of 3 pixels. You can use different units than pixels. See all available units in SVG Coordinate System Units.

Here are four examples with different stroke-width:

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 1px;" />

<circle cx="150" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 3px;" />

<circle cx="250" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 6px;" />

<circle cx="350" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 12px;" />

Here is the resulting image:

stroke-linecap

The SVG stroke-linecap CSS property defines how the ends of an SVG line is rendered. There are three possible values for the stroke-linecap CSS property. These are:

butt
square
round

The value butt results in a linecap that is cut off exactly where the line ends. The value square results in a linecap that looks like butt (cut off), but which extends a bit beyond where the line ends. The value round results in a round linecap.

Here are three SVG stroke-linecap examples which illustrate these three stroke-linecap values (sequence = butt, square, round):

This example defines three green lines with a stroke-width of 10 to better illustrate the effect of the stroke-linecap CSS property. Inside each green line is drawn a black line with a stroke-width of 1. This line has the same x1, y1 and x2, y2 coordinates as the green line, but has no stroke-linecap set. That way you can see the difference between the different stroke-linecap values.

stroke-linejoin

The stroke-linejoin CSS property defines how the join between two lines in a shape is rendered. The stroke-linejoin CSS property can take one of three values. These values are:

miter
round
bevel

Here are three SVG stroke-linejoin examples which illustrate these different values:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;" />
<text x="22" y="20">miter</text>

<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: round;" />
<text x="122" y="20">round</text>

<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: bevel;" />
<text x="222" y="20">bevel</text>    
miter round bevel

stroke-miterlimit

The stroke-miterlimit CSS propety is used together with the stroke-linejoin CSS property. If stroke-linejoin is set to miter, then the stroke-miterlimit can be used to limit how far between the point where the two lines meet, that the line join (corner) extends.

Here is an SVG stroke-miterlimit example:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 1.0;
             " />
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 2.0;
             " />
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 4.0;
             " />
<text x="229" y="20">4.0</text>    

Notice how three different stroke-miterlimit values are used for the three paths which otherwise look pretty much the same. Here is the resulting image:

1.0 2.0 4.0

The length of the line join is called miter length. The miter length is measured from the inner corner of the line join to the tip of the line join. In this image the miter length is drawn in red ontop of the joined lines, and repeated again to the right of the joined lines:

As you can imagine, the wider the stroke is, and the sharper the angle between the joining lines, the longer the miter becomes.

The stroke-miterlimit actually sets the limit for the ratio between the miter length and stroke width. Thus, a stroke-miterlimit of 1.0 means that the miter length can be maximally 1 x stroke width. The miter is cut off beyond that. 1.0 is the smallest possible value for stroke-miterlimit.

Here are some examples using 1.0 as stroke-miterlimit value, but with different angles of the joining lines:

Notice how the part of the miter which is cut off is larger when the angle is larger. That is because the sharper angle naturally produces a longer miter.

stroke-dasharray + stroke-dashoffset

The SVG stroke-dasharray CSS property is used to make the stroke of an SVG shape rendered with dashed lines. The reason it is called a "dash array" is that you provide an array of numbers as value. The values define the length of dashes and spaces. Therefore you should provide an even number of numbers.

Here is an SVG stroke-dasharray example:

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"  />

This example defines a stroke that is dashed with the dashed parts being 10 pixels wide, and the space between the dashes being 5 pixels. Here is the resulting image:

Here are a few more examples with different dash and space width:

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 5"  />

<line x1="20" y1="40" x2="120" y2="40"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 10"  />    

The first line starts with a dash width of 10, followed by a space of 5 pixels, then with a dash of 5 pixels, and then another space of 5 pixels. And then the pattern is repeated.

The second line starts with a dash width of 10, followed by a space of 5 pixels, then a dash of 5 pixels, and finally a space of 10 pixels.

Here is the resulting image:

The stroke-dashoffset is used to set how far into dash pattern to start the pattern. That way you can start the dashing from e.g. halfway into the pattern, and then repeat the pattern from there. Here is an SVG stroke-dashoffset example:

<line x1="20" y1="20" x2="170" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5;
      stroke-dashoffset: 5;
      "  />    

This example sets dash-offset to 5 pixels, meaning the rendering of the dashed line will start 5 pixels into the dash pattern (not all browsers fully support this yet). Here is the resulting image:

stroke-opacity

The SVG stroke-opacity CSS property is used to define the opacity of the outline of an SVG shape. The stroke-opacity takes a decimal number between 0 and 1. The closer to 0 the value is, the more transparent the stroke is. The closer to 1 the value is, the more opaque the stroke is. The default stroke-opacity is 1, meaning the stroke is fully opaque.

Here is an SVG stroke-opacity example which shows three lines with different stroke-opacity ontop of a text:

<text x="22" y="40">Text Behind Shape</text>

<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />

<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />

<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />
    

Here is the resulting image. Notice how the text is less and less visible through the different lines.

Text Behind Shape


Connect with me: Newsletter - Get all my free tips!