As you know, the SVG files are very popular in web development. Many sites use this format because it allows making small files. They will load much faster then the regular JPG or PNG files. That's very important because the fast websites may have better rankings in the search engines.
There are several options for how the SVG files may be added to the site. You can place them directly on your server. Or you can use some 3rd part CDN service to keep the static assets. Also, another option is to use SVG files that are inlined into the HTML or CSS code.
However, these days, most web applications are dynamic. And you may want to use some visual effects on a site. As a result, this tutorial shows you how to change the color of a SVG file or element.
Table of Contents
Using the value of the CSS color property
Usually, SVG files are complex and contain many different elements. However, in this tutorial, we will use the file that contains a single element only. It's a circle. The source code is given below.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#00ff00" stroke="#ff0000" stroke-width="5"/>
</svg>That file may be placed somewhere on the server. Then, the web page may include that file and show it to the user. Following is a visual presentation of the file. You can see how it may look in a real web application.
As you can see, there is a green circle with a red border. Let's try to change the main color first. To do that, you have to modify the source SVG file and use the currentColor value for the fill property of the desired SVG element. The code sample is given below.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="currentColor" stroke="#ff0000" stroke-width="5"/>
</svg>Now, you can create the CSS rules that will provide the color value for the SVG file. Below, you can see a code that changes the color of a circle. Also, there is a rule that specifies how the circle looks when mouse is hovered over the SVG file.
svg {
color: blue;
}
svg:hover {
color: orange;
}Please see below how the SVG may look when those CSS rules are added to the HTML page.
The given CSS styles may also be applied to the border of the SVG file. To make that working, you have to use the currentColor value for the stroke property of your SVG element. Below is our example of how it can be done.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#00ff00" stroke="currentColor" stroke-width="5"/>
</svg>Now, let's try that code. The visual preview is given below. As you see, the border is blue. But if you move the mouse pointer over the circle, the border changes its color to orange.
Specifying the fill and stroke properties in CSS
As you have noticed, the SVG element may contain the fill and stroke properties. The fill property specifies the main color of an element. And the stroke property specifies the color of a border.
However, you may also change values of those properties directly in the code. To do that, you have to create special CSS styles for your web page or application.
As an example, let's take the SVG file that we've shown you in the previous sections of this tutorial.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#00ff00" stroke="#ff0000" stroke-width="5"/>
</svg>To modify the color of the shape and the border, you may use the following CSS rules.
circle {
fill: blue;
stroke: brown;
}
circle:hover {
fill: yellow;
stroke: orange;
}Now, you can make a web page that contains the given SVG file and our CSS styles. It may look like the following.
As you can see, the circle is blue and the border is brown. It means that the custom CSS rules have been successfully applied to the SVG element. Also, if you hover your mouse over that circle, the colors are different as well.
Modifying fill and stroke properties on the SVG file that is inlined into the document
In the previous sections of this tutorial, we've considered that the SVG file is saved somewhere on a disk. It's a popular case, because usually static media files are large. However, if the SVG files are small, you may also put them directly into the HTML source. In other words, the SVG files can be inlined into the document.
That gives us the ability to directly modify the properties of the desired SVG elements. You don't have to create new CSS rules to change color. You may simply assign different values to the fill and stroke properties.
In our sample, we changed fill="#00ff00" to fill="#0000ff" and stroke="#00ff00" to stroke="#ff0000". See the final definition below.
<circle cx="150" cy="150" r="130" fill="#0000ff" stroke="#00ff00" stroke-width="5"/>Also, we've created a very simple web page that contains the inlined SVG file. You can see there how the final HTML code may look. The SVG element is like any other HTML element. You can safely place it in a <body> section of your document.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SVG sample</title>
</head>
<body>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#0000ff" stroke="#00ff00" stroke-width="5"/>
</svg>
</body>
</html>Using the CSS filter
The CSS language also has the filter property. You can use it to modify the color of the desired SVG element in your code. That property creates special graphical effects that are applied to the whole SVG picture.
Let's take our very simple SVG file that contains a circle. See the source code below.
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#00ff00" stroke="#ff0000" stroke-width="5"/>
</svg>Now, we want to create several effects and apply them to the given SVG picture. We will use the brightness(), hue-rotate(), invert(), saturate() and sepia() methods in our code. See the CSS styles below.
svg {
filter: brightness(80%) hue-rotate(10deg) invert(10%) saturate(200%) sepia(10%);
}
svg:hover {
filter: brightness(150%) hue-rotate(70deg) invert(40%) saturate(2000%) sepia(50%);
}As you see, there are rules for both regular and hovered states of the picture. The color of a picture will be changed if you move the mouse pointer over the image.
Below, you can see how such an effect may look in a real web application.
Using the CSS mask
You can also use the CSS mask to modify the visual style of the given SVG picture. However, this method is unusual and may not be suitable in all cases.
The idea behind this method is that you create a SVG mask and apply it to the regular background. Then, the background will be clipped and shown only within the bounds of the given SVG file. Our code sample is provided below. It shows how to correctly implement this method.
.picture {
background: red;
width: 300px;
height: 300px;
display: block;
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2300ff00' stroke='%23ff0000' stroke-width='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2300ff00' stroke='%23ff0000' stroke-width='3'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
}As you see, we've created the "picture" CSS class that has the SVG mask inside. It should be used like it's shown below.
<div class="picture"></div>The given code will produce a red circle. See below how it may look in a real web application.
Directly modifying the SVG file
There may be a case when none of the above methods work or it takes too much time to add a custom CSS or HTML code. Then, the simplest way to modify the colors is to modify the SVG picture. You just have to open the file in your favorite editor, then find the target element and change the colors to the desired values.
However, the only issue is that this method may not work in all situations. You should have appropriate access rights to modify files on the server. But, if that's not possible, you may choose other options that are listed in this tutorial.
But, as an example, let's see how exactly you can modify the file. Following is our SVG sample that contains a circle.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#00ff00" stroke="#ff0000" stroke-width="5"/>
</svg>To change the main color, you have to modify the fill property. Also, to change the border color, you have to assign a different value to the stroke property.
fill="#ff9000"
stroke="#90ff00"The modified SVG file may look as it's shown below.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="150" r="130" fill="#ff9000" stroke="#90ff00" stroke-width="5"/>
</svg>Using two images in a HTML file
There is another interesting option that we will describe in this tutorial. Sometimes, it may not be convenient to modify the SVG file. In that case, you may try to create two separate SVG files. The first one is regular. And the second is modified and contains the desired colors.
Both those pictures should be added to the code. Then, with help of CSS, we create special rules that change the active SVG file when the mouse is hovered over the picture.
See below how the HTML code may look in such a case.
<div class="picture">
<img class="image image-default" alt="" width="300" height="300" src="/preview/images/circle-green.svg">
<img class="image image-hover" alt="" width="300" height="300" src="/preview/images/circle-red.svg">
</div>Also, please review the CSS rules that we've created.
.picture {
width: 300px;
height: 300px;
position: relative;
}
.image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.picture .image-hover {
opacity: 0;
}
.picture .image-default {
opacity: 1;
}
.picture:hover .image-hover {
opacity: 1;
}
.picture:hover .image-default {
opacity: 0;
}Now, you can see how the given code may work in a real web application.
Conclusion
The SVG format is very flexible. It should be chosen if you'd like to use vector graphics on a site. Also, this format allows you to create pictures that can be easily added to any HTML page. You may use both static files and SVG files that are inlined into the HTML document.
Also, there is a possibility that you may want to change the color of a SVG file in your web application. In such a case, you may try to apply the methods that are listed in this tutorial. Each solution is unique and you may want to try each option before making a decision which method to use in the code.
Comments