SVG Fill and Stroke – Properties, Attributes, and Usage

Filling and stroking are the two core painting operations in SVG. Every graphical element - shapes, paths, or text - is rendered by applying a fill (the interior color) and a stroke (the outline). Both can be defined with CSS style attribute properties or as an individual attribute on the element - presentation attributes.

This article explains how SVG fill and stroke work, clarifies the difference between properties and attributes, and shows practical ways to apply them in real-world SVG graphics.

SVG Painting Model – Fill and Stroke

When an SVG shape is rendered, painting happens in two steps:

1. The fill is applied first, painting the interior of the shape.
2. The stroke is applied second, painting the outline centered on the shape’s path.

Both fill and stroke are optional:

• If no fill is specified, the shape is filled with black by default.
• If no stroke is specified, no outline is drawn.

For the SVG color specifying, you can take color names, RGB values, HEX values, etc. In the following examples will be using different ways of writing fills and strokes characteristics.

Properties vs Attributes in SVG

In SVG, fill and stroke are defined as CSS properties, but they can be applied in different ways.

• A property refers to the styling concept itself (for example, fill, stroke-width).
• An attribute refers to how that property is applied in SVG markup.

Concept	Example
CSS property	fill, stroke, stroke-width
Presentation attribute	fill="red" stroke="#00ff00"; stroke-width="2"
Inline CSS	style="fill:red; stroke:#00ff00; stroke-width:2"

Throughout this article:

• Property refers to the conceptual styling feature.
• Attribute refers to its usage in SVG markup.

SVG Fill

The fill property defines how the interior of a shape or text is painted. It applies to SVG shapes such as <rect>, <circle>, <path>, and text elements. If the fill is not specified, the default value is black.

Value	Description	Example
color value	Fills the shape with a solid color	fill="red"
none	Disables filling	fill="none"
url(#id)	Uses a paint server (gradient or pattern)	fill="url(#gradient1)"
currentColor	Uses the current text color	fill="currentColor"

The sample below illustrates the presence and absence of fill="none" ( two-paths.svg):

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" transform="translate(0 125)" />
</svg>

SVG Stroke

The stroke property defines the paint used for a shape’s outline. Unlike fill, stroke is disabled by default. The stroke is centered on the shape’s path and extends equally inside and outside.

Stroke Color and Width

Property	Description	Example
stroke	Sets the stroke color	stroke="red"
stroke-width	Controls the thickness of the stroke	stroke-width="5"

stroke-linecap Values

For any line, it is possible to set the shape of its ends. The stroke-linecap property defines how the ends of an SVG line are rendered, and has three possible values:

Value	Appearance
butt	Flat edge ending exactly at the path’s end point.
square	Flat edge that extends half a stroke‑width beyond the end point.
round	Semi‑circular end whose radius equals half the stroke‑width.

This makes sense if the line has the stroke-width property. The sample below shows as the stroke-width and stroke-linecap define the SVG stroke’s width and form of its ends ( lines.svg).

<svg height="200" width="800" xmlns="http://www.w3.org/2000/svg">
  <g stroke="grey">
    <path stroke-width="3" d="M 5 20 l 215 0" />
    <path stroke-width="15" d="M 5 60 l 215 0" />
    <path stroke-width="30" d="M 5 100 l 215 0" />
  </g>
 <g stroke="grey" stroke-width="30">
    <path stroke-linecap="butt" d="M 300 20 l 215 0" />
    <path stroke-linecap="round" d="M 300 60 l 215 0" />
    <path stroke-linecap="square" d="M 300 100 l 215 0" />
  </g>
  <g stroke="orange" stroke-width="2">
    <line x1="300" y1="20" x2="515" y2="20" />
    <path d="M 300 60 l 215 0" />
    <path d="M 300 100 l 215 0" />
  </g>
</svg>

In the sample, we use a <g> element to set common properties on objects, such as stroke and stroke-width.

In the example above, the SVG paths (SVG lines) are shown in orange, and the SVG strokes in grey.

stroke-linejoin Values

The more often used stroke property is the stroke-linejoin. It define the kind of join of the two meet lines. The stroke-linejoin attribute can take a three value:

Value	Description
miter	Extends outer edges to a corner (default).
round	Rounds the corner with a radius of half the stroke width.
bevel	Cuts off the corner, creating a flat edge.

One more sample illustrates a stroke-linejoin values ( linejoin.svg):

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <g stroke-width="20" fill="none">
        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" stroke="grey" stroke-linecap="butt"  stroke-linejoin="miter" />
        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" stroke="#CD5C5C" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" stroke="black"  stroke-linecap="square" stroke-linejoin="bevel" />
    </g>
    <g fill="none" stroke="orange" stroke-width="2">
        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" />
        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" />
        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" />
    </g>
</svg>

Note, the orange line inside is the object (polyline), around is the SVG stroke.

Dots and Dashes – stroke-dasharray

All the SVG stroke properties can be applied to any line type, text and outlines of elements like a circle, rectangle, etc. The stroke-dasharray property turns a solid stroke into a patterned dash‑gap sequence. The attribute accepts a list of numbers that define alternating dash and gap lengths (in user units, typically pixels).

stroke-dasharray="10 5"   /* dash 10, gap 5 */
stroke-dasharray="20 10 5"/* dash 20, gap 10, dash 5, then repeats */

Property	Description
stroke-dasharray	Defines dash and gap pattern
stroke-dashoffset	Shifts the dash pattern

Here is an example of using stroke-dasharray ( dasharray.svg):

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="30" x2="400" y2="30" style="stroke:rgb(112, 128, 144); fill:none; stroke-width:10; stroke-dasharray:10 5;" />
    <line x1="20" y1="80" x2="400" y2="80" style="stroke:olive; fill:none; stroke-width: 20; stroke-dasharray: 20 10 5;" />
    <path d="M 10 200 Q 50 100 150 200 T 230 200 T 300 200 T 390 200" stroke="#FF8C00" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="15 10 2 8" />
</svg>

For the grey and orange SVG lines, we specify even number of values: each of number couples means “filled-unfilled” areas. If an odd number of values is specified, the list is then repeated to produce an even number of values. For example, 20 10 5 becomes 20 10 5 20 10 5, as for olive-color line.

You can experiment with stroke-dasharray attribute. Amazing things can be achieved with SVG strokes and simple SVG shapes ( dasharray-example.svg):

<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg">
    <g fill="none">
        <circle cx="100" cy="100" r="40" stroke="red" stroke-width="55" stroke-dasharray="4,2" />
        <circle cx="100" cy="100" r="30" stroke="grey" stroke-width="45" stroke-dasharray="5,2" transform="translate(120,40)" />
        <circle cx="100" cy="100" r="35" stroke="orange" stroke-width="45" stroke-dasharray="9,3" transform="translate(30,130)" />
		<circle cx="100" cy="100" r="20" stroke="pink" stroke-linecap="round" stroke-width="20" stroke-dasharray="10,15" transform="translate(380,120)" />
        <rect x="320" y="100" width="100" height="100" stroke="DarkCyan" stroke-width="55" stroke-dasharray="7 7 3 2" />
        <text x="200" y="300" font-family="arial" font-size="60" stroke="#000080" stroke-width="3" stroke-dasharray="2 1">I love SVG!</text>
    </g>
</svg>

Additional SVG Paint Attributes

Attribute	Purpose	Example
fill-opacity	Value from 0 (transparent) to 1 (opaque)	fill-opacity="0.6"
fill-rule	Determines how complex shapes are filled. Options: nonzero (default) or evenodd.	fill-rule="evenodd"
stroke-opacity	Value from 0 (transparent) to 1 (opaque)	stroke-opacity="0.6"
stroke-miterlimit	Controls the maximum length of a miter join. Values > 1.	stroke-miterlimit="4"
stroke-dashoffset	Shifts the start of a dash pattern along the path.	stroke-dashoffset="5"

These attributes can be combined with the ones shown above to achieve precise visual control.

Frequently Asked Questions

1. How do I make a path appear only as an outline without any fill?

Set fill="none" (or fill="transparent"). This removes the interior color while preserving the stroke.

2. Why does my stroke-dasharray look uneven on curved paths?

Dash lengths are measured along the path’s length. Curves can stretch or compress dash segments. Adjust the dash values or use stroke-dashoffset to fine‑tune the pattern.

3. When should I use stroke-linecap="round" vs stroke-linejoin="round"?

stroke-linecap affects the ends of open sub‑paths, while stroke-linejoin affects the corners where two segments meet. Use round on both for a fully softened appearance.

4. Can fill and stroke be animated?

Yes. Both properties can be animated using SVG animations or CSS.

5. Can gradients be used for stroke?

Yes. Gradients and patterns can be applied using stroke="url(#id)".

Common Mistakes and Fixes

Problem	Cause	Solution
Shape appears black despite fill attribute	fill attribute omitted or set to default	Add fill="none" or a valid color (fill="#00ff00").
Dashes are missing on a curved line	stroke-dasharray values too small for curve length	Increase dash and gap lengths or use stroke-dashoffset to reposition.
Stroke caps look clipped	stroke-linecap not set while using thick strokes	Set stroke-linecap="square" or round for proper end rendering.
Miter joins create excessively long spikes	stroke-miterlimit is too low or not set	Increase stroke-miterlimit (e.g., stroke-miterlimit="10").
Opacity applied to both fill and stroke unintentionally	Using opacity instead of fill-opacity/stroke-opacity	Replace opacity with fill-opacity and/or stroke-opacity.

Quick Recipes

Fill and Stroke Cheat Sheet

Goal	SVG Code
Disable fill	fill="none"
Solid fill color	fill="orange"
Semi-transparent fill	fill-opacity="0.5"
Enable stroke	stroke="black"
Thicker outline	stroke-width="4"
Dashed stroke	stroke-dasharray="10 5"
Rounded stroke ends	stroke-linecap="round"

Practical Examples

1. Simple solid fill and stroke

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50" fill="#4CAF50" stroke="#026802" stroke-width="4"/>
</svg>

2. Dashed line with offset

<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="20" x2="190" y2="20" stroke="#ff6600" stroke-width="8" stroke-dasharray="15 5" stroke-dashoffset="7"/>
</svg>

Dashed stroke with rounded caps

<line x1="10" y1="40" x2="140" y2="40"
      stroke="black"
      stroke-width="4"
      stroke-dasharray="10 6"
      stroke-linecap="round" />

Related Resources

• To learn more about SVG files, their structure, the pros and cons of this format, and SVG history, please visit the documentation article What is an SVG File?
• SVG Gradients article demonstrates how linear or radial gradients can decorate any line, shape, or text in SVG graphics.
• SVG Filters – a practical guide to SVG filters: blur, drop shadow, lighting, and color filters with SVG code examples.
• The article SVG Color explains how to change the color of text and shapes in SVG images. You’ll find an overview of color definition, including various ways to control the transparency of SVG content.
• How to add new SVG elements and set their color properties, we covered in detail C# examples in the article Edit SVG Files.
• How to work with SVG color using the Aspose.SVG for .NET library and how to change the color of SVG elements or the background color in SVG files, we covered in detail with C# examples in the article How to change SVG color.