img src SVG changing the styles with CSS

Question

html

css

.logo-img path {
           


        

Answer 1

If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers.

To precisely answer the original question, just:

1. Open your logo.svg in a text editor.

2. look for fill: #fff and replace it with fill: #000

For example, your logo.svg might look like this when opened in a text editor:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... just change the fill and save.

Answer 2

Why not create a webfont with your svg image or images, import the webfont in the css and then just change the color of the glyph using the css color attribute? No javascript needed

Answer 3

If you have access to JQuery, then extending to Praveen's answer one can programatically change color of different nested elements inside SVG by:

$('svg').find('path, text').css('fill', '#ffffff');

Within find, you can mention different elements that needs to be changed in color.

Answer 4

Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file.

For example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

Note that currentColor is a keyword (not a fixed color in use).

After that, you can change the color using CSS, by setting the color property of the element or from it's parent.

Example:

.div-with-svg-inside {
    color: red;
}

I forgot to say, you must insert the SVG this way:

      <svg>
        <use xlink:href='/assets/file.svg#img'></use>
      </svg>

Note that #img is the id of the svg tag inside svg file.

Another way of doing it: https://css-tricks.com/cascading-svg-fill-color/

Answer 5

Simple..

You can use this code:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

First specify the path of svg and then write it's ID, In this case "Capa_1". You can get the ID of svg by opening it in any editor.

In css:

.logo {
  fill: red;
}

Answer 6

To expand on @gringo answer, the Javascript method described in other answers works, but requires the user to download unnecessary image files, and IMO, it bloats your code.

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

If you prefer a more dev oriented option, you could Google "npm svg webfont", and use one of the node modules that's most appropriate for your environment.

Once, you've done either of those two options, then you could easily change the color via CSS, and most likely, you've sped up your site in the process.