SVG Color – Fill & Stroke Basics

Scalable Vector Graphics (SVG) is an XML language for creating 2D vector and mixed vector/raster graphics. Because SVG is resolution‑independent, it’s perfect for logos, icons, simple illustrations, and animations. You can color any SVG element – shapes, paths, lines, or text – using fill, stroke, and opacity attributes or CSS styles.

What You will Learn

How to set colors in SVG using the fill and stroke attributes.
How to color SVG shapes, paths, and text.
How to apply and control opacity.
Common mistakes when working with SVG colors and how to fix them.

How SVG Color Works

In SVG, coloring an element is called painting. Paint determines how an element is rendered by applying a fill, a stroke, or both. These properties control the interior and outline of shapes, paths, and text.

SVG supports two equivalent ways of defining colors:

Presentation attributes, such as fill="red" or stroke="#00ff00", which are written directly on the element.
The style attribute, for example style="fill:#ff0000; stroke:green; stroke-width:2", which follows standard CSS syntax.

Both approaches behave the same way and follow CSS cascade and inheritance rules. The choice between them is mostly stylistic or depends on how styles are managed in your document. For detailed definitions, refer to the official W3C SVG Painting specification.

Fill and Stroke Explained

SVG uses two core properties to apply color:

Property	What it affects	Default behavior
`fill`	The interior area of a shape or closed path	Defaults to `black`
`stroke`	The outline of a shape, line, or text	Not rendered by default

A shape can use either property independently or combine both. For example, a circle may have a colored fill and a visible stroke, while a line element (<line>) can only be painted using a stroke. Closed shapes such as <circle>, <rect>, and <polygon> support both fill and stroke.

Color Specifying Rules

SVG applies a few important rules when interpreting color values:

If the fill property is not specified, the shape is filled with black by default.
Setting fill="none" or fill="transparent" makes the interior fully transparent.
If the stroke property is omitted, no outline is drawn, even if stroke-width is defined.
Both fill and stroke accept multiple color formats, including named colors, HEX, RGB/RGBA, and HSL/HSLA values.
More advanced paint sources, such as gradients, patterns, and filters, can also be used as fill or stroke values. These techniques are covered in the Text Color section and the SVG Gradients article.

SVG Color Codes

Quick summary

HEX – a compact color format commonly used for static SVG graphics.
RGB/RGBA – useful for programmatic color control and dynamic transparency.
HSL/HSLA – better suited for design tasks and systematic color variations.

Learn more about SVG color formats

To specify an SVG color, you can take color names, RGB or RGBA values, HEX values, HSL or HSLA values. The following examples will use different ways to set fill and stroke characteristics, let’s consider them:

SVG Color Names. There are the 147 color names defined by the Scalable Vector Graphics (SVG) Specification. You may set named colors like this: stroke="Green" or fill="Red".
HEX Color Codes. The code is expressed as follows: #RRGGBB, where each of the two-digit values is a range of each of the three colors (red, green, blue), with which you select the final value representing each color. Each two-digit hex pair can have a value from 00 to FF. For example, #00FF00 is displayed as green, because the green component is set to its maximum value (FF) and the others are set to 00.
You can set the green and red HEX colors like this: stroke="#00FF00" or fill="#FF0000".
RGB(Red, Green, Blue) Color Codes. The values R, G and B are the intensity (in the range from 0 to 255), respectively, of the red, green and blue components of the determined color. You can set the green and red RGB colors like this: stroke="rgb(0,255,0)" or fill="rgb(255,0,0)".
RGBA(Red, Green, Blue, Alpha) Color Codes. RGBA color values are an extension of RGB color values with an alpha channel that determines the opacity of the color. The alpha parameter is a number between 0.0 and 1.0 that specifies transparency. You may determine the green and red RGB colors like this: stroke="rgba(0,255,0,1.0)" or fill="rgba(255,0,0,1.0)".
HSL Color Codes. HSL stands for Hue, Saturation and Lightness. Each color has an angle on the RGB color wheel and a percentage value for the saturation and lightness values. HSL codes for green and red colors you can set like this: stroke="hsl(120, 100%, 50%)" and fill="hsl(0, 100%, 50%)".
HSLA(Hue, Saturation, Lightness, Alpha) Color Codes. HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color. HSL codes for green and red colors you can set like this: stroke="hsla(120, 100%, 50%, 1.0)" and fill="hsla(0, 100%, 50%, 1.0)".

You can express a color in several ways. Below are the most common formats, each shown with a green (fill) and red (stroke) example.

1. Color Names

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />

2. HEX

1<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />

3. RGB(Red, Green, Blue)

1<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />

4. RGBA(Red, Green, Blue, Alpha) – opacity included

1<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />

5. HSL(Hue, Saturation, Lightness)

1<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />

6. HSLA(Hue, Saturation, Lightness, Alpha) – opacity included

1<circle cx="50" cy="50" r="40" fill="hsla(120,100%,50%,0.6)" stroke="hsla(0,100%,50%,0.8)" />

Tip:

When you need transparency, prefer RGBA/HSLA or the dedicated fill-opacity and stroke‑opacity attributes.
SVG supports the 147 CSS color names defined by the specification. For a complete list, see the HTML Color Names article.

Online Color Converter

Convert between HEX, RGB, HSL, and other formats instantly.

Coloring Common Shapes

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 – C# Examples.

Circle Color

A circle is one of the simplest SVG shapes, making it ideal for demonstrating color. By changing the fill and stroke properties, you can control the color of the circle’s interior, its outline, or both.

The example below shows several circles drawn with various color configurations, from the standard version to fully customizable fill and stroke combinations.

1<svg height="200" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70"  cy="70" r="50" />
3  <circle cx="200" cy="70" r="50" fill="#79C99E" />
4  <circle cx="330" cy="70" r="50" fill="#79C99E" stroke="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

In this example:

The first circle uses default values and appears filled with black.
The second circle applies only a fill color.
The third circle combines a custom fill with a visible stroke.
The fourth circle defines a stroke-width, but no stroke color, so the outline remains invisible.
The last circle removes the fill entirely and draws only the outline.

SVG circles demonstrating fill and stroke combinations

Color Line and Color Polyline

Unlike closed shapes, lines and polylines in SVG are defined primarily by their outlines. This makes them particularly useful for demonstrating how the stroke property controls color, thickness, and visibility.

The example below compares simple <line> elements with <polyline> elements to demonstrate how stroke color, stroke weight, and fill behave in different scenarios.

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" />
5    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
6    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
7    <polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" />
8</svg>

In this example:

The three <line> elements use different stroke colors but rely entirely on stroke for visibility, as lines don’t support fill.
The first polyline explicitly specifies fill="none", ensuring that only the outline is visible.
The second polyline applies both a fill color and a stroke, which is possible because the polylines form a connected shape.
The last polyline defines only a stroke, so the fill falls back to its default value, which is black.

Three SVG lines and three polylines (filled, unfilled, and mixed)

Color Polyline and Color Polygon

At first glance, polylines and polygons may appear similar, but they behave differently when colored. The key difference is that a polyline is an open shape, while a polygon is always closed.

The example below uses the same fill and stroke values to clearly demonstrate how SVG handles color for open and closed shapes.

1<svg height="400" width="500" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
3    <polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
4</svg>

Both shapes use the same fill and stroke values, making the difference in their behavior easy to see:

Polyline (open) and polygon (closed) with identical fill and stroke

Path Color

Paths are the most flexible elements in SVG, capable of describing both open and closed shapes. Therefore, their color scheme depends on whether the path forms a closed area or remains open.

In the example below, the same path data is used twice to demonstrate how the fill property affects a path when it is explicitly disabled and when it is applied.

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Unfilled path -->
 3  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 4           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
 5           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
 6        stroke="#a06e84" stroke-width="3" fill="none" />
 7  <!-- Filled path -->
 8  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 9           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
10           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
11        stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" />
12</svg>

The figure below illustrates how the values fill = "none" and fill="#74aeaf" are displayed:

Two SVG paths – one unfilled, one filled

Text Color

Like other SVG shapes, text can have both a stroke and fill set on it. In this code example, we will look at how you can set the fill color and stroke color of text and use a gradient as a fill. As with all SVG shapes, if the fill attribute is not specified, the text will be displayed in black by default:

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:lightsalmon" />
 5			<stop offset="50%" style="stop-color:teal" />
 6			<stop offset="90%" style="stop-color:lightpink" />
 7		</linearGradient>
 8    </defs>
 9    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
10    <text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
11    <text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
12    <text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
13</svg>

The figure shows the different cases of fill and stroke applying to add text color:

Two SVG paths: unfilled and filled

You may read more about how to style the text in articles Fills and Strokes in SVG and SVG Gradients.

Using Opacity

Opacity determines how transparent an SVG element appears and how it visually blends with elements behind it. In SVG, transparency can be defined either directly in a color value or using special transparency properties. The example below compares three common approaches to applying transparency, showing how each method affects the final display.

 1<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
 2  <!-- RGBA opacity -->
 3  <rect x="310" y="30" width="100" height="100" fill="rgba(0,50,255,0.8)" />
 4  <rect x="250" y="50" width="110" height="100" fill="rgba(0,50,255,0.7)" />
 5  <rect x="170" y="90" width="110" height="100" fill="rgba(0,50,255,0.6)" />
 6  <rect x="100" y="50" width="110" height="100" fill="rgba(0,50,255,0.4)" />
 7  <rect x="50"  y="30" width="110" height="100" fill="rgba(0,50,255,0.2)" />
 8
 9  <!-- HSLA opacity -->
10  <rect x="710" y="30" width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
11  <rect x="650" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
12  <rect x="570" y="90" width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
13  <rect x="500" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
14  <rect x="450" y="30" width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
15
16  <!-- HEX + fill‑opacity -->
17  <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
18  <rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
19  <rect x="970"  y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
20  <rect x="900"  y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
21  <rect x="850"  y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
22</svg>

In this example:

The first group uses RGBA colors, where the alpha channel controls transparency directly within the color value.
The second group uses HSLA, which separates hue and luminosity from opacity, making it convenient for designer settings.
The third group combines HEX colors with the fill-opacity property, keeping color and opacity defined independently.
All three approaches produce visually similar results, but differ in flexibility and ease of subsequent opacity modification.

Three sets of rectangles demonstrating RGBA, HSLA, and HEX + fill‑opacity

Common Mistakes and Fixes

The following issues are among the most common causes of unexpected coloring behavior in SVG.

1. Stroke is not visible – a stroke width is set, but no stroke color is defined.

1<circle cx="50" cy="50" r="40" stroke="#d80539ff" stroke-width="4" fill="none" />

2. Shape appears black instead of transparent – the fill property is omitted. Use fill="none" to disable the default black fill.

1<rect width="100" height="100" fill="none" stroke="#3234c5ff" />

3. Invalid color value – short or malformed HEX values are not supported. Use 3- or 6-digit HEX values or a named color.

1<circle cx="40" cy="40" r="30" fill="#FF0000" />

4. Opacity has no effect – HEX colors do not include an alpha channel. Use RGBA or HSLA, or apply transparency via fill-opacity.

1<circle cx="60" cy="60" r="40" fill="rgba(231,76,60,0.5)" />

1<circle cx="60" cy="60" r="40" fill="#ee5425" fill-opacity="0.5" />

Tip: If colors do not render as expected, open the SVG in your browser’s developer tools. Missing namespaces (xmlns) or small syntax errors often prevent colors from rendering correctly.

Quick Color Recipes

Goal	Code Snippet
Color a shape	`<circle cx="50" cy="50" r="40" fill="#E74C3C" />`
Make a shape semi‑transparent	`<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />`
Fill + stroke together	`<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />`
Apply only a stroke	`<line x1="0" y1="0" x2="100" y2="0" stroke="#ff6600" stroke-width="2" />`

Frequently Asked Questions

1. What is the difference between fill and stroke in SVG?
Fill defines the color inside a shape, while stroke defines its outline or border.

2. How can I make an SVG color transparent?
Use the rgba() or hsla() color codes, or add the fill-opacity and stroke-opacity attributes.

3. Can I use CSS to style SVG colors?
Yes. You can apply colors via inline styles or external CSS using the fill and stroke properties. Here is an example of inline CSS to do it:

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70" cy="70" r="50" style="fill:#3498db; stroke:#1f4f72; stroke-width:4;" />
3</svg>

See Also

Paint Builder – Learn how Aspose.SVG’s PaintBuilder API programmatically defines stroke and fill values.
How to change SVG color – C# examples for dynamically updating colors in SVG files.
What is an SVG File? – Learn more about SVG files, their structure, the pros and cons of this format, and SVG history.

If you want to find a required color, you can mix two colors using a free online Color Mixer. The application allows to mix two colors in different quantities and see the result after mixing. Check our Color Mixer to get fun and investigate a color nature!

Fills and Strokes in SVG SVG Background Color

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.