SVG Color – How to work with Fill Color and Stroke Color? – Aspose.SVG Guide

Scalable Vector Graphics (SVG) is an XML language for creating 2D vector and mixed vector/raster graphics. 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. You can color SVG shapes, lines, paths, and text. They can also be textured, shaded, or created from partially transparent overlapping layers.

What You will Learn

• How to set colors in SVG using the fill and stroke attributes.
• The difference between color names, HEX, RGB, and HSL values.
• 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.

Understanding SVG Color

Using color is an important part of creating SVG. 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

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:

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

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

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

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

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

6. 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.

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

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

<svg height="200" width="600" xmlns="http://www.w3.org/2000/svg">
    <circle cx="70" cy="70" r="50" />
    <circle cx="200" cy="70" r="50" fill="#79C99E" />
    <circle cx="330" cy="70" r="50" fill="#79C99E" stroke-width="10" stroke="#508484" />
    <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" /> 
    <circle cx="590" cy="70" r="50" fill="none" stroke-width="10" stroke="#508484" />
</svg>

The figure illustrates the code snippet above:

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:

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

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:

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

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:

<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
    <path stroke="#a06e84" stroke-width="3" fill="none" d="  
	M 150,50 L 150, 300
	M 120,100 L 150,50 L 180, 100
    M 110,150 L 150,90 L 190, 150
	M 90,220 L 150,130 L 210, 220
	M 70,300 L 150,190 L 230, 300
    M 110,310 L 150,240 L 190, 310
	" />
    <path stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" d="  
	M 150,50 L 150, 300
	M 120,100 L 150,50 L 180, 100
    M 110,150 L 150,90 L 190, 150
	M 90,220 L 150,130 L 210, 220
	M 70,300 L 150,190 L 230, 300
    M 110,310 L 150,240 L 190, 310
	" />
</svg>

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

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:

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="10%" style="stop-color:lightsalmon" />
			<stop offset="50%" style="stop-color:teal" />
			<stop offset="90%" style="stop-color:lightpink" />
		</linearGradient>
    </defs>
    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
    <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>
    <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>
    <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>
</svg>

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

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

Using Opacity and Transparency

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

<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
    <rect x="310" y="30"  width="100" height="100" fill="rgba(0,50,255,0.8)" />
   	<rect x="250" y="50"  width="110" height="100" fill="rgba(0,50,255,0.7)" />
   	<rect x="170" y="90"  width="110" height="100" fill="rgba(0,50,255,0.6)" />
    <rect x="100" y="50"  width="110" height="100" fill="rgba(0,50,255,0.4)" />
    <rect x="50" y="30"  width="110" height="100" fill="rgba(0,50,255,0.2)" />
    
    <rect x="710" y="30"  width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
   	<rect x="650" y="50"  width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
   	<rect x="570" y="90"  width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
    <rect x="500" y="50"  width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
    <rect x="450" y="30"  width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
    
    <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
   	<rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
   	<rect x="970" y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
    <rect x="900" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
    <rect x="850" y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
</svg>

Common Mistakes When Working with SVG Colors and How to Fix Them

Even small errors in color syntax or attributes can make SVG shapes display incorrectly.

1. Stroke not visible

Problem: You set a stroke-width, but the stroke doesn’t appear. Fix: Always specify both the stroke color and the stroke-width.

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

2. Shape appears black instead of transparent

Problem: When the fill attribute is missing, the default color is black. Fix: If you want transparency, set fill="none" or use RGBA with low alpha.

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

3. Wrong or ignored color value

Problem: Invalid HEX code (e.g., #FF00 instead of #FF0000) or unsupported color name. Fix: Always use 3- or 6-digit HEX codes, or standard CSS color names.

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

4. Transparent colors don’t work as expected

Problem: The shape doesn’t appear transparent when using hex codes. Fix: Hex values ​​don’t support transparency, use RGBA or HSLA instead. Alternatively, you can use fill-opacity or stroke-opacity with HEX colors.

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

or

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

Tip: If something still looks wrong, check the SVG file in your browser’s console – missing namespaces (xmlns) or syntax errors in style attributes often cause color issues.

Quick Color Recipes

How to color an SVG shape. To change the color of an SVG shape, use the fill attribute with any color code:

<circle cx="50" cy="50" r="40" fill="#E74C3C" />

Make a transparent shape. You can make any SVG shape transparent by using RGBA color values where the last number defines opacity. This example creates a semi-transparent rectangle:

<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />

Add both fill and stroke. You can combine fill and stroke to color both the inside and the outline of an SVG element:

<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />

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 /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:

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

See Also

• 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.
• 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.
• 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!