Changing SVG Colors in Elementor

hi this is mark from wiki design in this video i'm going to show you four different ways to change the colors of your svg images if you don't know svg stands for scalable vector graphic and is a really unique type of image format unlike other image formats svgs don't rely on unique pixels to make up the images you see instead they use vector data and in this tutorial i'm going to show you four different ways that i like to change the colors on svg images inside elementor so let's just jump right into the tutorial i'm going to start with the easy ones first and then this is going to get more complex as we move down here so the very first example is you can actually just use a widget inside elementor called the icon widget and you can actually change the color of your svg images inside there in most cases so let me show you what i mean by that so here we go with this fish right here and as you can see this is just the icon widget so if you just go into elementor you just type an icon and you can see it's this one right here just click and drag that in so i already got this one in here and what i did is i went to a website like an icon scout downloaded this fish and as you can see you can just click this button right here upload svg and that's what this image is right here if the svg image doesn't have a color hard coded into that data i showed you earlier you're going to be able to actually change the color on hover and the normal state just inside elementor so i like to start at this level first and then if for some reason an svg image i created or downloaded isn't letting me change the colors i have to go ahead and do one of these more complex ways but try this one first and as you can see you can easily change the primary color and the hover color right within the settings so as you can see the primary we have it just as that blue color so you can change it in real time right here put in your custom hex number down here and then under hover if you want to have it look like this where it goes to a different color you just choose your primary color right here and then they also kind of give you this little hover animation that you can add to it so this is nice you don't have to worry about custom code anything so you can see when you hover over it you can move it around that's pretty nice that they have these features inside here as you can see this is the easiest way to add colors to your svg images but if you're having issues and it's not changing the colors at all here again it's because most likely the svg image itself has colors integrated into this code that i showed you earlier so you're not going to be able to use this widget in most cases next i'm going to show you this one right here just using a regular image widget as you can see this is just a normal image widget right here and inside here i have this svg image of our logo so it's just uh dot svg so you can see that and what you can do is a pretty unique way you can do a hover is if you go under the hover state under your image and you can see this right here called css filters so if you turn that off by default you can see nothing happens but if you go ahead and you turn that on and start to play around with the contrast you can see that if i go and max out the contrast to a 200 you can change it to black so within these settings you're going to see that if i change these different hue settings and stuff like this down here nothing's going to work here this is because these things are tied just to kind of normal images and not svg images i know it's a little complicated but this is why i want to make this tutorial because svg images inside the browser are created different than other regular pixel images like pngs or jpegs so in a lot of cases you're going to see things might not work correctly inside elementor or even if you try to custom code some things you have to do it in a unique way that svg images can handle the css code so yeah you can see right here if i change this contrast down to zero it's going to just strip out all the color so all the color is just blue and then if i max it out to 200 it's just gonna take away all that color and just make it black so that's a really easy way to do it as well you don't get as many options as the icon one here as you can see we're changing the colors or anything this is just a really quick way if you need to change it using the regular image widget now we're starting to move into the html way to change the colors on svg images so like i said if these two different solutions up here don't work next you're gonna have to start to rely on html and css just to change the color of these svg images like i said in the beginning of this tutorial an svg image is just made up of a bunch of vector data that the browser can spit back and so if you've never looked at an svg image again it just looks like a bunch of gibberish code right here and it basically is so you're not going to understand what these things mean but the computer knows that these numbers equal a certain shape and then fill it with a certain color so it's all just using math and what's good about using svg images over jpegs or pngs is they're a lot lot smaller so it's better for performance and makes it faster loading on the website so if you go and you just download an svg image and you view it inside of a text editor whatever operating system you have just view the raw uh code of that file and that's what is inside of an svg image so what you do is you just go ahead and copy all that code inside your svg image and you can just drop it into you can see right here this is just an html widget inside elementor just drop it into there and you're gonna see it's gonna automatically add that svg image inside elementor and like i said if you are trying to change the color of these things and it's not working it's because each of these paths inside your svg image probably has a thing called fill equals and then a color so you can see right here i highlighted the very first one right here so usually an svg image is made up of a bunch of different paths or shapes and then you can fill it inside the html code with a color so let me go ahead and just remove this one right here so you can see it's fill equals and it's that blue color watch what happens when i do that so you can see when i remove that it automatically converts back over into the regular black color so if i go ahead and remove it from the other ones as well you can see now his body's gone and you have to go down here look for the other path and now this will be his fins should go away now so that's how you can remove the color if the svg image like i said has it automatically embedded into the file hopefully this makes sense but you just have to understand that when you work with svg images you might have to actually touch code not all the time but there are cases where if you're especially downloading these files off the internet you might need to go ahead and do what i just did and remove the fill color and if you're using elementor pro you can go ahead underneath this html widget and go under custom css and you can use this code right here so you just type in selector and then svg so this is just going to select whatever svg is inside this html code and you can see within here you can now edit this svg image just with css code so you can see right here i have a width of 50 a margin 0 auto and display block that basically will just force it to go in the middle of this column right here and so now what you could do is you can easily go ahead in here and just add that fill color here and it will update the color of the fish all at once so if you remember before when i had it where we had each path had a different color that makes it harder to edit and you're not going to be able to edit it very easily so now you can strip away all that code and now you can just target it using you know this css code right here and if you're not using elementor pro you can just use a class name here so you could just call it like dot color fish and then you just add that code wherever you add your custom css and let's say you want to have this um you know have a hover effect so if you go into here and you just do hover and you can remove these right here and let's just make it black so we have three three three it's kind of like our black color so now you can see you can do selector svg colon hover and then just fill it with a different color so now when the user moves their mouse over this it's going to fill that svg with this color right here so like i said this is a little more advanced but if you work with svg images you might have to start doing stuff like this with css code to be able to change it so in this last example i wanted to show how you can make it a hyperlink just with html code and then how you can use similar up here a css filter to go ahead and change the color on hover and if you look right here under advanced if i go back into the custom css you can see right here i have these long css filters right here with different brightness and contrast and you know rotate and all this stuff this is a css filter class and in order to generate this code i recommend this website right here and there's other ones that are similar to it so what you do is you just enter in your target color so in this case it was just 333 which is the black color you just hit compute and you can see it's going to kick out this code right here and if it looks right here where if i keep doing this you're going to see it might change this color is extremely off run again you're just going to want to kind of keep pushing this until you see a near perfect result so what this website generator is doing is getting as close as it can and just using the css filters to try to match the color so what you do is just copy that code right there and just like the last example you can do selector svg and you just paste that code in there and then i have the same thing selector svg colon hover and this changes to the black color so this first one is the blue the second one is the black as i just mentioned this isn't exactly perfect so if you need to make sure that the pixel color is exact this might not be the best approach it's just another option to go ahead and use a different way in css to do it instead of doing it like this where we have the fill color like that it's just another option that's all it is now if you need to go ahead and add a hyperlink in front of it you can just add a regular aref and then i just have it go to our website and then underneath here you need to just go ahead and close that a tag so give your svg all inside this a tag so here we are on the front end of the website and you can see right here when i hover over just this part of the image it will go ahead and hyperlink to our website and these other ones function correctly so you can see when i mouse over this fills that changes the image css filter and this is just using the regular icon widget so i hope this was helpful in explaining a few different ways that you can change the color of your svg images make sure that you like this video subscribe this youtube channel and hit that bell to receive notifications when i release new tutorials like this again this is mark from wiki design [Music]

hi this is mark from wiki design in this video i&#39;m going to show you four different ways to change the colors of your svg images if you don&#39;t know svg stands for scalable vector graphic and is a really unique type of image format unlike other image formats svgs don&#39;t rely on unique pixels to make up the images you see instead they use vector data and in this tutorial i&#39;m going to show you four different ways that i like to change the colors on svg images inside elementor so let&#39;s just jump right into the tutorial i&#39;m going to start with the easy ones first and then this is going to get more complex as we move down here so the very first example is you can actually just use a widget inside elementor called the icon widget and you can actually change the color of your svg images inside there in most cases so let me show you what i mean by that so here we go with this fish right here and as you can see this is just the icon widget so if you just go into elementor you just type an icon and you can see it&#39;s this one right here just click and drag that in so i already got this one in here and what i did is i went to a website like an icon scout downloaded this fish and as you can see you can just click this button right here upload svg and that&#39;s what this image is right here if the svg image doesn&#39;t have a color hard coded into that data i showed you earlier you&#39;re going to be able to actually change the color on hover and the normal state just inside elementor so i like to start at this level first and then if for some reason an svg image i created or downloaded isn&#39;t letting me change the colors i have to go ahead and do one of these more complex ways but try this one first and as you can see you can easily change the primary color and the hover color right within the settings so as you can see the primary we have it just as that blue color so you can change it in real time right here put in your custom hex number down here and then under hover if you want to have it look like this where it goes to a different color you just choose your primary color right here and then they also kind of give you this little hover animation that you can add to it so this is nice you don&#39;t have to worry about custom code anything so you can see when you hover over it you can move it around that&#39;s pretty nice that they have these features inside here as you can see this is the easiest way to add colors to your svg images but if you&#39;re having issues and it&#39;s not changing the colors at all here again it&#39;s because most likely the svg image itself has colors integrated into this code that i showed you earlier so you&#39;re not going to be able to use this widget in most cases next i&#39;m going to show you this one right here just using a regular image widget as you can see this is just a normal image widget right here and inside here i have this svg image of our logo so it&#39;s just uh dot svg so you can see that and what you can do is a pretty unique way you can do a hover is if you go under the hover state under your image and you can see this right here called css filters so if you turn that off by default you can see nothing happens but if you go ahead and you turn that on and start to play around with the contrast you can see that if i go and max out the contrast to a 200 you can change it to black so within these settings you&#39;re going to see that if i change these different hue settings and stuff like this down here nothing&#39;s going to work here this is because these things are tied just to kind of normal images and not svg images i know it&#39;s a little complicated but this is why i want to make this tutorial because svg images inside the browser are created different than other regular pixel images like pngs or jpegs so in a lot of cases you&#39;re going to see things might not work correctly inside elementor or even if you try to custom code some things you have to do it in a unique way that svg images can handle the css code so yeah you can see right here if i change this contrast down to zero it&#39;s going to just strip out all the color so all the color is just blue and then if i max it out to 200 it&#39;s just gonna take away all that color and just make it black so that&#39;s a really easy way to do it as well you don&#39;t get as many options as the icon one here as you can see we&#39;re changing the colors or anything this is just a really quick way if you need to change it using the regular image widget now we&#39;re starting to move into the html way to change the colors on svg images so like i said if these two different solutions up here don&#39;t work next you&#39;re gonna have to start to rely on html and css just to change the color of these svg images like i said in the beginning of this tutorial an svg image is just made up of a bunch of vector data that the browser can spit back and so if you&#39;ve never looked at an svg image again it just looks like a bunch of gibberish code right here and it basically is so you&#39;re not going to understand what these things mean but the computer knows that these numbers equal a certain shape and then fill it with a certain color so it&#39;s all just using math and what&#39;s good about using svg images over jpegs or pngs is they&#39;re a lot lot smaller so it&#39;s better for performance and makes it faster loading on the website so if you go and you just download an svg image and you view it inside of a text editor whatever operating system you have just view the raw uh code of that file and that&#39;s what is inside of an svg image so what you do is you just go ahead and copy all that code inside your svg image and you can just drop it into you can see right here this is just an html widget inside elementor just drop it into there and you&#39;re gonna see it&#39;s gonna automatically add that svg image inside elementor and like i said if you are trying to change the color of these things and it&#39;s not working it&#39;s because each of these paths inside your svg image probably has a thing called fill equals and then a color so you can see right here i highlighted the very first one right here so usually an svg image is made up of a bunch of different paths or shapes and then you can fill it inside the html code with a color so let me go ahead and just remove this one right here so you can see it&#39;s fill equals and it&#39;s that blue color watch what happens when i do that so you can see when i remove that it automatically converts back over into the regular black color so if i go ahead and remove it from the other ones as well you can see now his body&#39;s gone and you have to go down here look for the other path and now this will be his fins should go away now so that&#39;s how you can remove the color if the svg image like i said has it automatically embedded into the file hopefully this makes sense but you just have to understand that when you work with svg images you might have to actually touch code not all the time but there are cases where if you&#39;re especially downloading these files off the internet you might need to go ahead and do what i just did and remove the fill color and if you&#39;re using elementor pro you can go ahead underneath this html widget and go under custom css and you can use this code right here so you just type in selector and then svg so this is just going to select whatever svg is inside this html code and you can see within here you can now edit this svg image just with css code so you can see right here i have a width of 50 a margin 0 auto and display block that basically will just force it to go in the middle of this column right here and so now what you could do is you can easily go ahead in here and just add that fill color here and it will update the color of the fish all at once so if you remember before when i had it where we had each path had a different color that makes it harder to edit and you&#39;re not going to be able to edit it very easily so now you can strip away all that code and now you can just target it using you know this css code right here and if you&#39;re not using elementor pro you can just use a class name here so you could just call it like dot color fish and then you just add that code wherever you add your custom css and let&#39;s say you want to have this um you know have a hover effect so if you go into here and you just do hover and you can remove these right here and let&#39;s just make it black so we have three three three it&#39;s kind of like our black color so now you can see you can do selector svg colon hover and then just fill it with a different color so now when the user moves their mouse over this it&#39;s going to fill that svg with this color right here so like i said this is a little more advanced but if you work with svg images you might have to start doing stuff like this with css code to be able to change it so in this last example i wanted to show how you can make it a hyperlink just with html code and then how you can use similar up here a css filter to go ahead and change the color on hover and if you look right here under advanced if i go back into the custom css you can see right here i have these long css filters right here with different brightness and contrast and you know rotate and all this stuff this is a css filter class and in order to generate this code i recommend this website right here and there&#39;s other ones that are similar to it so what you do is you just enter in your target color so in this case it was just 333 which is the black color you just hit compute and you can see it&#39;s going to kick out this code right here and if it looks right here where if i keep doing this you&#39;re going to see it might change this color is extremely off run again you&#39;re just going to want to kind of keep pushing this until you see a near perfect result so what this website generator is doing is getting as close as it can and just using the css filters to try to match the color so what you do is just copy that code right there and just like the last example you can do selector svg and you just paste that code in there and then i have the same thing selector svg colon hover and this changes to the black color so this first one is the blue the second one is the black as i just mentioned this isn&#39;t exactly perfect so if you need to make sure that the pixel color is exact this might not be the best approach it&#39;s just another option to go ahead and use a different way in css to do it instead of doing it like this where we have the fill color like that it&#39;s just another option that&#39;s all it is now if you need to go ahead and add a hyperlink in front of it you can just add a regular aref and then i just have it go to our website and then underneath here you need to just go ahead and close that a tag so give your svg all inside this a tag so here we are on the front end of the website and you can see right here when i hover over just this part of the image it will go ahead and hyperlink to our website and these other ones function correctly so you can see when i mouse over this fills that changes the image css filter and this is just using the regular icon widget so i hope this was helpful in explaining a few different ways that you can change the color of your svg images make sure that you like this video subscribe this youtube channel and hit that bell to receive notifications when i release new tutorials like this again this is mark from wiki design [Music]

Transcript for:Changing SVG Colors in Elementor

Transcript for:
Changing SVG Colors in Elementor