SVG Color – How to work with Fill Color and Stroke Color?

Scalable Vector Graphics (SVG) is an XML language for creating 2D vector and mixed vector/raster graphics. Using vector graphics is one of the most popular web design trends in recent years. SVG allows developers and designers to create vector images built using points, lines, paths, and shapes. It is best used to create logos, icons, simple graphics, and animations. SVG images are resolution independent and can be created and edited with any text editor.

Using color is an important part of creating SVG. You can colorize SVG shapes, lines, paths, text. SVG graphics can be colorized, textured, shaded, or built from partially-transparent overlapping layers. This article takes an in-depth look at the different ways SVG text and shapes can be colorized. You’ll find an overview of how color is defined, including the various ways you can control the transparency of SVG content.

SVG Color Specifying

Colorization or painting means the operation of adding color, gradients or patterns to SVG graphics using fill and stroke. Filling and stroking are both painting operations. The SVG stroke and SVG fill are some of the main CSS properties that can be set for any lines, text and shapes. In an SVG file, they can be specified both in the style attribute (fill and stroke properties) and using fill and stroke attributes as presentation attributes.

So you can set color for SVG elements in two ways: using fill and stroke properties of the style attribute and using fill and stroke attributes. For more information, please see the W3C page.

Fill and Stroke Properties of the Style Attribute

SVG fill and SVG stroke features can be set in the style attribute. The syntax for specifying properties is as follows:

style="stroke-width:2; stroke:green; fill:#ff0000"

Fill and Stroke Attributes

SVG fills and SVG strokes can be given in the fill and stroke attributes with such the syntax:

stroke-width="2" stroke="green" fill="#ff0000"

SVG Color Codes

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)".

SVG supports different ways to define colors, one of which is using Color Names, which is also used in HTML and CSS. Please refer to the HTML Color Names article to learn more about color names. This article explores the world of HTML color names, their uses, limitations, and the meaning of colors in web design. Here, we will calculate how many colors exist according to the RGB color model, how many colors are in the HTML standard, how the names of some colors arose, and why we still use them and not just color codes.

Online Color Converter

For different tasks, different color codes are preferred. So, sometimes you may need to convert color codes. Click inside the color area to select a color, or enter a color code in the Input text box. You will immediately see other color codes for chosen color in the Output section. Use our free Online Color Converter and get the result at once!

Color Specifying Rules

Some of the rules of color specifying are:

If the fill attribute (or fill property of the style attribute) is not specified, the default is black.
If the fill attribute (or fill property of the style attribute) has none or transparent value, the shapes filling is transparent.
If the stroke attribute (or stroke property of the style attribute) is not specified, the stroke is invisible, is absent. This remains true even if the stroke-width attribute is specified.
To specify fill color or stroke color, you can use color names, RGB or RGBA values, HEX values, HSL or HSLA values. Also, you can take gradients and patterns (see the Text Color section or the SVG Filters and Gradients article).

Color Shapes

The fill is the color inside a shape, and the stroke is the visible outline of an object. You can fill a shape with one color and stroke it with another. If you create an SVG shape but don’t set the fill color, the shape will be colored in black. If you set a stroke-width attribute but don’t set stroke color, the stroke will not be visible.

Note: Fill and stroke are available for such SVG shapes like circle, ellipse, rectangle, polyline, and polygon. For an SVG line, only stroke is allowed.

How to work with SVG color using the Aspose.SVG library for .NET 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.

Circle Color

In the following example, we consider the fill color and stroke color applying for SVG circle. Note: The code snippet can be used similarly for SVG ellipse, rectangle, polyline, and polygon.

1<svg height="200" width="600" 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-width="10" stroke="#508484" />
5    <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" /> 
6    <circle cx="590" cy="70" r="50" fill="none" stroke-width="10" stroke="#508484" />
7</svg>

The figure illustrates the code snippet above:

Text “Four colored circles”

Color Line and Color Polyline

In the following example, we consider the fill and stroke applying for SVG line and SVG polyline. Note: The code snippet uses setting color fill and color stroke with fill and stroke properties of the style attribute:

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>

Text “Three SVG lines and three SVG polylines (unfilled and filled)”

Color Polyline and Color Polygon

The following example illustrates the similarities and differences in applying fill color and stroke color to an SVG polyline and an SVG polygon:

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>

As the polyline is an open line, no stroke color will appear on that part of the shape. Because the polygon is a closed line, the stroke color is around the entire perimeter of the shape.

Text “SVG polyline and SVG polygon with fill and stroke”

Path Color

For an SVG <path> element, you can use both a color stroke and a color fill. The fill attribute colors the interior of a graphic element. When you fill an SVG path, the fill colourizes open paths too as if the last its point was connected to the first, even though the stroke color in that part of the path will not appear. If the fill attribute value is not specified, the default is black.

So that there is no filling, you need to specify the attribute value fill="none" or fill="transparent". In the following code example, we will show how fill and stroke can be used with a <path> element:

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <path stroke="#a06e84" stroke-width="3" fill="none" d="  
 3	M 150,50 L 150, 300
 4	M 120,100 L 150,50 L 180, 100
 5    M 110,150 L 150,90 L 190, 150
 6	M 90,220 L 150,130 L 210, 220
 7	M 70,300 L 150,190 L 230, 300
 8    M 110,310 L 150,240 L 190, 310
 9	" />
10    <path stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" d="  
11	M 150,50 L 150, 300
12	M 120,100 L 150,50 L 180, 100
13    M 110,150 L 150,90 L 190, 150
14	M 90,220 L 150,130 L 210, 220
15	M 70,300 L 150,190 L 230, 300
16    M 110,310 L 150,240 L 190, 310
17	" />
18</svg>

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

Text “Two SVG paths: unfilled and 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:

Text “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 Filters and Gradients.

Opacity

You can specify the opacity of either the fill or stroke separately in SVG. These are controlled by the fill-opacity and stroke-opacity attributes. Also, you can use RGBA or HSLA values that are allowed in SVG and will give the same effect:

RGBA color values have an alpha channel that determines the opacity of the color. The alpha parameter is a number between 0.0, meaning “fully transparent”, and 1.0, meaning “fully opaque”. For example, rgba(255, 0, 0, 0.5) is displayed as red with 50% opacity.
HSLA color values are specified with hue, saturation, lightness, and alpha, where an alpha parameter specifies the opacity. As in RGBA color codes, the alpha parameter is between 0.0 and 1.0. For example, hsla(0, 100%, 50%, 1) is displayed as pure red, hsla(0, 100%, 50%, 0.5) is displayed as red with 50% opacity.

Let’s look at an example of how to set the opacity of the fill color of the shapes. In the following code snippet, we specify different opacity values to fill the rectangle with rgb(0,50,255) blue using RGBA color codes (Figure a); for red hsl(0,100%,50%) – using the HSLA color codes (Figure b) and for the color HEX #C1B900 – using the fill-opacity attribute (Figure c).

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

Text “Three sets of colored rectangles with different values of opacity”

The Paint Builder article delves into the Paint Builder, an essential component of the Aspose.SVG Builder API, which facilitates the precise definition and management of stroke and fill attributes within SVG documents. The PaintBuilder is used to programmatically specify the value of the stroke or fill that are used for various SVG shapes and elements when filling them with a pattern, gradient, or any color.

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?

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