SVG Changing specific colour - CSS & JS

Question

I've got a selection of images and SVG's I wish to use on a website. I wish to use a SVG and change a single specific colour based on the scroll position.

I already have the scroll script in place as I use it for the menu, however I don't know how to make a specific section / colour of a SVG change colour.

Scroll Script

// Sticky Nav
$(window).on('scroll', function () {
        if ($(window).scrollTop() > 200) {
            $('.scrolling-navbar').addClass('top-nav-collapse');
            $('.navbar-logo').addClass('logo-black')
        } else {
            $('.scrolling-navbar').removeClass('top-nav-collapse');
            $('.navbar-logo').addClass('logo-white')
        }
    });

You can visit https://bagraddemo.tgtmedia.co.uk/ to see what I mean about the script working.

Now I know that SVG's can be effected using the fill:currentColor; but I don't want to fill the whole SVG. I just want to change a single colour, the black.

Before you ask, here's some html for you:

<a href="index.html" class="navbar-brand"><svg viewBox="0 0 919.3 264.9" xmlns="http://www.w3.org/2000/svg" class="navbar-logo">
  <defs>
    <style>
      .cls-1{font-size:160.17px;font-family:Haettenschweiler, Haettenschweiler;}.cls-2{fill:#28bafa;}
    </style>
  </defs>
  <title>
    v7
  </title>
  <g id="Layer_2" data-name="Layer 2">
    <g data-name="v7 - Shortlist">
      <path d="M4.5 2.1C21.8 32.2 39.2 62.4 56.8 92.8H3.1V0H103.4V93.1L4.9 1.7Z"/>
      <path d="M118.9 15.3c4.2 0.2 8.3 0 12.2 0.6 6.3 1.1 8.2 6.3 6.3 11.4 -0.5 1.3-1.9 2.3-2.9 3.5 0.6 0.3 1.3 0.6 2 1A7.7 7.7 0 0 1 141 39.6a7.8 7.8 0 0 1-5.9 7.5 34.4 34.4 0 0 1-7.1 1.1c-2.9 0.2-5.9 0-9 0Zm4.8 28.5c2.8-0.2 5.5-0.2 8.1-0.6a5 5 0 0 0 4-4.5 4.9 4.9 0 0 0-3.9-4.6c-2.7-0.4-5.4-0.4-8.2-0.7Zm0-14.4a49.1 49.1 0 0 0 6.3-0.7c2-0.5 2.9-2.2 2.9-4.5a3.7 3.7 0 0 0-2.8-3.8c-2.1-0.4-4.2-0.4-6.4-0.6Z"/>
      <path d="M374.7 17.9v4.9c-2.4-0.9-4.8-1.8-7.2-2.5 -5.6-1.7-10.4-0.3-14.1 4.2a12.5 12.5 0 0 0-0.3 14.5c4.1 5.5 11 5.9 16.4 4a1.6 1.6 0 0 0 0.8-1.2c0.1-1.7 0-3.4 0-5.4h-5.8V32h11c0 4.4 0 8.8 0 13.3 0 0.4-0.6 0.9-1 1a86.7 86.7 0 0 1-10.6 2.2 16.5 16.5 0 0 1-16.5-9.2c-4.1-8.8-0.4-19.5 9.5-23 5.6-2 11-1.1 16.3 1.1Z"/>
      <path d="M227.8 32.8V48h-5.1V15.6h5V29.3l0.4 0.2c0.7-0.8 1.3-1.6 2-2.4 3.1-3.3 6.2-6.6 9.2-10a4.3 4.3 0 0 1 4-1.6 39.6 39.6 0 0 0 4 0c-4.9 5.4-9.5 10.4-13.7 15l15.8 17.6c-1.1 0-3.2 0-5.2 0 -0.3 0-0.7-0.4-1-0.7 -3.8-3.7-7.6-7.4-11.4-11C230.6 35.2 229.4 34.2 227.8 32.8Z"/>
      <path d="M147.1 48.1c0.7-1.6 1.2-3 1.7-4.3 3.9-9.1 7.7-18.2 11.6-27.4a2.2 2.2 0 0 1 1.5-1 15 15 0 0 1 2.7 0l14.5 32.6a30 30 0 0 1-4.5-0.1c-0.6-0.1-1.2-0.9-1.5-1.5C172 44.3 171 42 170 39.6a1.6 1.6 0 0 0-1.8-1.1c-3.6 0.1-7.2 0-10.8 0a1.5 1.5 0 0 0-1.7 1.2c-0.9 2.6-2.1 5.1-3.3 7.7a1.8 1.8 0 0 1-1.2 0.8C150 48.2 148.8 48.1 147.1 48.1Zm15.6-24.8l-4.4 10.6h9.1Z"/>
      <path d="M326.7 15.5c4.8 10.8 9.6 21.6 14.5 32.6h-5.2l-4.3-9.6c-4.1 0-8.3 0-12.4 0a1.6 1.6 0 0 0-1.2 0.8c-1.2 2.5-2.2 5.1-3.4 7.6a2.2 2.2 0 0 1-1.5 1.1 34.9 34.9 0 0 1-4.1 0c0.9-2.1 1.7-4.1 2.5-6q5.5-12.8 11-25.7a2 2 0 0 1 1.3-0.9A17.3 17.3 0 0 1 326.7 15.5ZM329.6 34c-1.6-3.7-3.2-7.1-4.8-10.7 -1.5 3.7-3 7.1-4.4 10.7Z"/>
      <path d="M404.7 15.6v4.3H391.6v9.7h12.8V34H391.6v9.3h13.5v4.4H386.4v-32Z"/>
      <path d="M212.3 23.1c-3.8-2-7.6-3.4-11.7-3.2 -5.4 0.3-10.9 4-11.7 10.7a11.8 11.8 0 0 0 12 13.1 18.7 18.7 0 0 0 8.9-2.1c0.8-0.4 1.7-0.8 2.9-1.4 0 1.8 0.1 3.3 0 4.8a1.5 1.5 0 0 1-0.8 1.2 45.5 45.5 0 0 1-7.7 1.9 29.1 29.1 0 0 1-7.9-0.3c-6.5-1.2-10.6-5.4-12-11.7 -2.3-9.9 2.8-17.6 12.4-20.4 5.2-1.5 10.2 0.1 15.1 1.8 0.3 0.1 0.6 0.8 0.6 1.2C212.3 20.1 212.3 21.5 212.3 23.1Z"/>
      <path d="M256.8 39.6a60.8 60.8 0 0 0 5.4 3.7 6 6 0 0 0 6.1 0c2-1.1 2.9-3.6 1.4-5.2a50 50 0 0 0-5.8-4.8c-1.9-1.5-4.2-2.8-5.7-4.7a8.3 8.3 0 0 1 5-12.9 12.6 12.6 0 0 1 9.6 1.4 2.2 2.2 0 0 1 1 1.5c0.1 1.5 0 2.9 0 4.8 -1-0.7-1.7-1.3-2.5-1.8 -2.7-1.5-5.4-2.5-8.4-0.8 -2 1.1-2.5 3.3-0.8 4.8a49.8 49.8 0 0 0 6.6 4.8c2.6 1.6 5 3.3 5.8 6.4 1.5 5.6-0.9 10.9-7.4 11.6a13.7 13.7 0 0 1-9.6-2.3 1.9 1.9 0 0 1-0.8-1.2C256.7 43 256.8 41.3 256.8 39.6Z"/>
      <path d="M281.8 15.7a3 3 0 0 1 0.6-0.1h26.3v4.4H297.6V48h-4.8V20H281.8Z"/>
      <path d="M233.7 77h-2.8V64.4l-0.4-0.2c-1.2 1.5-2.5 3-3.7 4.6 -1.5 2-1.5 2.1-3.1 0.2 -1.3-1.5-2.4-3-3.9-4.8V77h-3V59.5c3.1-1.3 4 1.5 5.4 3 1 1.1 1.9 2.4 3 3.8 1.4-1.8 2.6-3.4 3.9-5 1.1-1.4 2.4-2.6 4.6-1.7Z"/>
      <path d="M179 58.9c3.8 0.4 7.6 0.4 11.2 1.1 3 0.6 5.1 3.8 5.4 6.8 0.6 6.3-3.8 10.6-9.4 10.2 -2.3-0.1-4.7 0-7.1 0Zm3 2.6v13c1.7 0 3.3 0.1 4.9 0a6.4 6.4 0 0 0 5.7-5.2c0.5-2.7-0.7-5.7-3.4-6.6C187 61.9 184.5 61.9 182 61.5Z"/>
      <path d="M134.1 77.1c-1.6-0.1-3.1 0.6-3.8-1.4 -0.4-1.3-1-2.4-1.6-3.7h-7.2a14.1 14.1 0 0 0-1.1 2.7c-0.5 2.3-1.8 3-4.1 2.2 1.3-3.1 2.7-6.4 4-9.6 1-2.3 1.9-4.7 3-7A2.8 2.8 0 0 1 125.1 59c0.4 0 1.2 0.8 1.4 1.3 1.9 4 3.7 8 5.5 12C132.7 73.9 133.3 75.3 134.1 77.1Zm-6.7-7.8c-0.9-2-1.6-3.6-2.5-5.4l-2.2 5.5Z"/>
      <path d="M174.8 77c-3.1 0.2-3.2 0.2-4.2-2.5a3.5 3.5 0 0 0-4.1-2.6c-4.3 0.2-4.3 0-5.9 4 -0.8 1.9-2.2 1.2-3.7 1.2l7.7-18c1.4-0.5 2.3 0 2.9 1.5C169.8 66.1 172.3 71.5 174.8 77Zm-6.7-7.7l-2.4-5.5 -2.2 5.5Z"/>
      <path d="M152.5 62.8a46.2 46.2 0 0 0-7.1-0.9 6 6 0 0 0-5.7 5.7 6.5 6.5 0 0 0 4.8 6.9c2.3 0.7 4.4-0.1 6.5-0.8 0.7-0.2 1.3-0.6 2-1 0.3 4 0.5 3.7-4.7 4.6 -2.9 0.5-6.1 0.3-8.3-2.1 -1.3-1.4-2.7-3-3-4.7 -1.6-8.1 4.9-12.6 11.7-11.4 0.4 0.1 0.7 0.2 1.1 0.2C152.4 59.7 152.8 60.2 152.5 62.8Z"/>
      <path d="M204.2 61.8v4.9h6.9v2.6h-6.9v5.2h7.6V77H201.3V59.4h10.1v2.4Z"/>
      <path d="M237.8 59.6c3.5-1.4 4.7 1.3 6.2 3.1 0.6 0.7 1.1 1.4 1.8 2.3 0.9-1.2 1.7-2.2 2.5-3.3 1.3-1.8 2.7-3.2 5.4-2.1 -1.1 1.4-2.1 2.9-3.2 4.4a26.3 26.3 0 0 0-2.2 2.7 7.5 7.5 0 0 0-1.1 3.1c-0.1 2.4 0 4.8 0 7.3h-3a41.4 41.4 0 0 1 0-6c0.4-3-1.2-4.9-2.9-6.9C240.2 62.6 239 61.1 237.8 59.6Z"/>
      <path d="M260.3 66.3c-2.8 0-4.7-1.6-4.6-4.2a4.6 4.6 0 1 1 9.2 0A4.1 4.1 0 0 1 260.3 66.3Zm3.5-4.3c0-1.8-1.8-3.9-3.4-3.8A4 4 0 0 0 256.8 62a3.5 3.5 0 1 0 7 0Z"/>
      <path d="M259.9 62.2c-0.5 1.2-0.7 1.8-1 2.4l-0.5-0.2V59.7c0.7 0 1.4 0 2.1 0 1.6-0.1 2.3 0.4 1.7 2.2 -0.2 0.5 0.2 1.2 0.2 1.8 0 0.3-0.2 0.6-0.3 0.9 -0.2-0.2-0.5-0.4-0.7-0.6C260.8 63.3 260.4 62.9 259.9 62.2Z"/>
      <text class="cls-1" transform="translate(0 211.99)">
        GRADUATION 
        <tspan class="cls-2" x="631.2">
          2018
        </tspan>
      </text>
    </g>
  </g>
</svg>
</a>

And some SCSS:

.navbar-logo {}

.logo-white {
    color: white;
    fill: currentColor;
}

.logo-black {
    color: black;
    fill: currentColor;
}

Your svg markup already defines a custom blue coloring for the 2018 so adding color: whatever; and fill: currentColor; won't override it, but it will override the part of the SVG that is black, which seems to be exactly what you want.

Thanks for the advice, I don't use SVG's often, and this is the code I'm trying to use. I'm not quite sure what part I've done wrong, but something isn't changing the colour when I add the class.

I also seem to have an issue previewing the SVG on chrome. As can be seen here: https://i.sstatic.net/TBJcY.png

But oddly it seems to work completely fine on edge?https://i.sstatic.net/cjqzb.png

---

here's some raw links to the svg and png versions of the image.

PNG: https://bagraddemo.tgtmedia.co.uk/assets/img/v7.png

SVG: https://bagraddemo.tgtmedia.co.uk/assets/img/v7.svg

Answer 1

After the advice from pretzelhammer, I have come up with the following solution to this issue.

HTML

    <a href="index.html" class="navbar-brand logo-white"><svg viewBox="0 0 919.3 264.9" xmlns="http://www.w3.org/2000/svg" class="navbar-logo">
  <defs>
    <style>
      .cls-1{font-size:160.17px;font-family:Haettenschweiler, Haettenschweiler;}.cls-2{fill:#28bafa;}
    </style>
  </defs>
  <title>
    v7
  </title>
  <g id="Layer_2" data-name="Layer 2">
    <g data-name="v7 - Shortlist">
      <path d="M4.5 2.1C21.8 32.2 39.2 62.4 56.8 92.8H3.1V0H103.4V93.1L4.9 1.7Z"/>
      <path d="M118.9 15.3c4.2 0.2 8.3 0 12.2 0.6 6.3 1.1 8.2 6.3 6.3 11.4 -0.5 1.3-1.9 2.3-2.9 3.5 0.6 0.3 1.3 0.6 2 1A7.7 7.7 0 0 1 141 39.6a7.8 7.8 0 0 1-5.9 7.5 34.4 34.4 0 0 1-7.1 1.1c-2.9 0.2-5.9 0-9 0Zm4.8 28.5c2.8-0.2 5.5-0.2 8.1-0.6a5 5 0 0 0 4-4.5 4.9 4.9 0 0 0-3.9-4.6c-2.7-0.4-5.4-0.4-8.2-0.7Zm0-14.4a49.1 49.1 0 0 0 6.3-0.7c2-0.5 2.9-2.2 2.9-4.5a3.7 3.7 0 0 0-2.8-3.8c-2.1-0.4-4.2-0.4-6.4-0.6Z"/>
      <path d="M374.7 17.9v4.9c-2.4-0.9-4.8-1.8-7.2-2.5 -5.6-1.7-10.4-0.3-14.1 4.2a12.5 12.5 0 0 0-0.3 14.5c4.1 5.5 11 5.9 16.4 4a1.6 1.6 0 0 0 0.8-1.2c0.1-1.7 0-3.4 0-5.4h-5.8V32h11c0 4.4 0 8.8 0 13.3 0 0.4-0.6 0.9-1 1a86.7 86.7 0 0 1-10.6 2.2 16.5 16.5 0 0 1-16.5-9.2c-4.1-8.8-0.4-19.5 9.5-23 5.6-2 11-1.1 16.3 1.1Z"/>
      <path d="M227.8 32.8V48h-5.1V15.6h5V29.3l0.4 0.2c0.7-0.8 1.3-1.6 2-2.4 3.1-3.3 6.2-6.6 9.2-10a4.3 4.3 0 0 1 4-1.6 39.6 39.6 0 0 0 4 0c-4.9 5.4-9.5 10.4-13.7 15l15.8 17.6c-1.1 0-3.2 0-5.2 0 -0.3 0-0.7-0.4-1-0.7 -3.8-3.7-7.6-7.4-11.4-11C230.6 35.2 229.4 34.2 227.8 32.8Z"/>
      <path d="M147.1 48.1c0.7-1.6 1.2-3 1.7-4.3 3.9-9.1 7.7-18.2 11.6-27.4a2.2 2.2 0 0 1 1.5-1 15 15 0 0 1 2.7 0l14.5 32.6a30 30 0 0 1-4.5-0.1c-0.6-0.1-1.2-0.9-1.5-1.5C172 44.3 171 42 170 39.6a1.6 1.6 0 0 0-1.8-1.1c-3.6 0.1-7.2 0-10.8 0a1.5 1.5 0 0 0-1.7 1.2c-0.9 2.6-2.1 5.1-3.3 7.7a1.8 1.8 0 0 1-1.2 0.8C150 48.2 148.8 48.1 147.1 48.1Zm15.6-24.8l-4.4 10.6h9.1Z"/>
      <path d="M326.7 15.5c4.8 10.8 9.6 21.6 14.5 32.6h-5.2l-4.3-9.6c-4.1 0-8.3 0-12.4 0a1.6 1.6 0 0 0-1.2 0.8c-1.2 2.5-2.2 5.1-3.4 7.6a2.2 2.2 0 0 1-1.5 1.1 34.9 34.9 0 0 1-4.1 0c0.9-2.1 1.7-4.1 2.5-6q5.5-12.8 11-25.7a2 2 0 0 1 1.3-0.9A17.3 17.3 0 0 1 326.7 15.5ZM329.6 34c-1.6-3.7-3.2-7.1-4.8-10.7 -1.5 3.7-3 7.1-4.4 10.7Z"/>
      <path d="M404.7 15.6v4.3H391.6v9.7h12.8V34H391.6v9.3h13.5v4.4H386.4v-32Z"/>
      <path d="M212.3 23.1c-3.8-2-7.6-3.4-11.7-3.2 -5.4 0.3-10.9 4-11.7 10.7a11.8 11.8 0 0 0 12 13.1 18.7 18.7 0 0 0 8.9-2.1c0.8-0.4 1.7-0.8 2.9-1.4 0 1.8 0.1 3.3 0 4.8a1.5 1.5 0 0 1-0.8 1.2 45.5 45.5 0 0 1-7.7 1.9 29.1 29.1 0 0 1-7.9-0.3c-6.5-1.2-10.6-5.4-12-11.7 -2.3-9.9 2.8-17.6 12.4-20.4 5.2-1.5 10.2 0.1 15.1 1.8 0.3 0.1 0.6 0.8 0.6 1.2C212.3 20.1 212.3 21.5 212.3 23.1Z"/>
      <path d="M256.8 39.6a60.8 60.8 0 0 0 5.4 3.7 6 6 0 0 0 6.1 0c2-1.1 2.9-3.6 1.4-5.2a50 50 0 0 0-5.8-4.8c-1.9-1.5-4.2-2.8-5.7-4.7a8.3 8.3 0 0 1 5-12.9 12.6 12.6 0 0 1 9.6 1.4 2.2 2.2 0 0 1 1 1.5c0.1 1.5 0 2.9 0 4.8 -1-0.7-1.7-1.3-2.5-1.8 -2.7-1.5-5.4-2.5-8.4-0.8 -2 1.1-2.5 3.3-0.8 4.8a49.8 49.8 0 0 0 6.6 4.8c2.6 1.6 5 3.3 5.8 6.4 1.5 5.6-0.9 10.9-7.4 11.6a13.7 13.7 0 0 1-9.6-2.3 1.9 1.9 0 0 1-0.8-1.2C256.7 43 256.8 41.3 256.8 39.6Z"/>
      <path d="M281.8 15.7a3 3 0 0 1 0.6-0.1h26.3v4.4H297.6V48h-4.8V20H281.8Z"/>
      <path d="M233.7 77h-2.8V64.4l-0.4-0.2c-1.2 1.5-2.5 3-3.7 4.6 -1.5 2-1.5 2.1-3.1 0.2 -1.3-1.5-2.4-3-3.9-4.8V77h-3V59.5c3.1-1.3 4 1.5 5.4 3 1 1.1 1.9 2.4 3 3.8 1.4-1.8 2.6-3.4 3.9-5 1.1-1.4 2.4-2.6 4.6-1.7Z"/>
      <path d="M179 58.9c3.8 0.4 7.6 0.4 11.2 1.1 3 0.6 5.1 3.8 5.4 6.8 0.6 6.3-3.8 10.6-9.4 10.2 -2.3-0.1-4.7 0-7.1 0Zm3 2.6v13c1.7 0 3.3 0.1 4.9 0a6.4 6.4 0 0 0 5.7-5.2c0.5-2.7-0.7-5.7-3.4-6.6C187 61.9 184.5 61.9 182 61.5Z"/>
      <path d="M134.1 77.1c-1.6-0.1-3.1 0.6-3.8-1.4 -0.4-1.3-1-2.4-1.6-3.7h-7.2a14.1 14.1 0 0 0-1.1 2.7c-0.5 2.3-1.8 3-4.1 2.2 1.3-3.1 2.7-6.4 4-9.6 1-2.3 1.9-4.7 3-7A2.8 2.8 0 0 1 125.1 59c0.4 0 1.2 0.8 1.4 1.3 1.9 4 3.7 8 5.5 12C132.7 73.9 133.3 75.3 134.1 77.1Zm-6.7-7.8c-0.9-2-1.6-3.6-2.5-5.4l-2.2 5.5Z"/>
      <path d="M174.8 77c-3.1 0.2-3.2 0.2-4.2-2.5a3.5 3.5 0 0 0-4.1-2.6c-4.3 0.2-4.3 0-5.9 4 -0.8 1.9-2.2 1.2-3.7 1.2l7.7-18c1.4-0.5 2.3 0 2.9 1.5C169.8 66.1 172.3 71.5 174.8 77Zm-6.7-7.7l-2.4-5.5 -2.2 5.5Z"/>
      <path d="M152.5 62.8a46.2 46.2 0 0 0-7.1-0.9 6 6 0 0 0-5.7 5.7 6.5 6.5 0 0 0 4.8 6.9c2.3 0.7 4.4-0.1 6.5-0.8 0.7-0.2 1.3-0.6 2-1 0.3 4 0.5 3.7-4.7 4.6 -2.9 0.5-6.1 0.3-8.3-2.1 -1.3-1.4-2.7-3-3-4.7 -1.6-8.1 4.9-12.6 11.7-11.4 0.4 0.1 0.7 0.2 1.1 0.2C152.4 59.7 152.8 60.2 152.5 62.8Z"/>
      <path d="M204.2 61.8v4.9h6.9v2.6h-6.9v5.2h7.6V77H201.3V59.4h10.1v2.4Z"/>
      <path d="M237.8 59.6c3.5-1.4 4.7 1.3 6.2 3.1 0.6 0.7 1.1 1.4 1.8 2.3 0.9-1.2 1.7-2.2 2.5-3.3 1.3-1.8 2.7-3.2 5.4-2.1 -1.1 1.4-2.1 2.9-3.2 4.4a26.3 26.3 0 0 0-2.2 2.7 7.5 7.5 0 0 0-1.1 3.1c-0.1 2.4 0 4.8 0 7.3h-3a41.4 41.4 0 0 1 0-6c0.4-3-1.2-4.9-2.9-6.9C240.2 62.6 239 61.1 237.8 59.6Z"/>
      <path d="M260.3 66.3c-2.8 0-4.7-1.6-4.6-4.2a4.6 4.6 0 1 1 9.2 0A4.1 4.1 0 0 1 260.3 66.3Zm3.5-4.3c0-1.8-1.8-3.9-3.4-3.8A4 4 0 0 0 256.8 62a3.5 3.5 0 1 0 7 0Z"/>
      <path d="M259.9 62.2c-0.5 1.2-0.7 1.8-1 2.4l-0.5-0.2V59.7c0.7 0 1.4 0 2.1 0 1.6-0.1 2.3 0.4 1.7 2.2 -0.2 0.5 0.2 1.2 0.2 1.8 0 0.3-0.2 0.6-0.3 0.9 -0.2-0.2-0.5-0.4-0.7-0.6C260.8 63.3 260.4 62.9 259.9 62.2Z"/>
      <text class="cls-1" transform="translate(0 211.99)">
        GRADUATION 
        <tspan class="cls-2" x="631.2">
          2018
        </tspan>
      </text>
    </g>
  </g>
</svg>
</a>

SCSS

.navbar-brand {
    position: relative;
    padding: 0px;
    svg {
        width: 75%;
    }
}

.navbar-logo {
    padding-top: 10px;
    max-height: 58px;
}

.logo-white {
    color: white;
    fill: currentColor;
}

.logo-black {
    color: black;
    fill: currentColor;
}

JS

$(window).on('load', function () {

        // Sticky Nav
        $(window).on('scroll', function () {
            if ($(window).scrollTop() > 200) {
                $('.scrolling-navbar').addClass('top-nav-collapse');
                $('.navbar-brand')
                    .addClass('logo-black')
                    .removeClass('logo-white');
            } else {
                $('.scrolling-navbar').removeClass('top-nav-collapse');
                $('.navbar-brand')
                    .addClass('logo-white')
                    .removeClass('logo-black');
            }
        });

So basically, I have added the class logo-white and logo-black to the tag via JS. This then effects the SVG using the fill: currentColor defined in the SCSS, which only effects the black zones.

You can see the working demo here: https://bagraddemo.tgtmedia.co.uk/ as look at the code yourself. (Working 22/07/18 - if it's not working for you, please comment below)

In terms of the issue with SVG's not showing on chrome. It was a issue where I hadn't defined a size properly and therefor chrome wasn't seeing it. I also fixed the font issue with a simple @font-face which I had forgotten to do.

Answer 2

Use CSS Variables FTW

The easiest way to control SVG colors are using CSS variables (87% browser support). They not only allows you to control multiple colors but also allows to control colors on shadow dom elements (when using <use>).

To provide the best experience I use a CSS Variable with a default color and a fallback–should the browser not be the supporting kind

<path style="fill: var(--color-name, #8d5000)" fill="#8d5000" d="M...." />
                       CSS variable  Default         Fallback

Example:

(click run code snippet to see result)

/*
.robo-1 uses the default colors provided as second parameter 
in the inline css variables or the fill color if css variables 
are not supported (like old ie)
*/
.robo-2 {
  --head-color: olive;
  --body-color: orange;  
  --arm-color: maroon; 
  --feet-color: maroon;    
}

.robo-3 {
  --head-color: magenta;
  --body-color: purple;  
  --arm-color: hotpink; 
  --feet-color: hotpink;    
}
.robo-4 {
  --head-color: lightgray;
  --eye-color: black; 
  --body-color: lightgray;  
  --arm-color: lightgray; 
  --feet-color: lightgray;    
}

/* hover state */ 
.robo-4:hover {
  --head-color: black;
  --eye-color: white; 
  --body-color: black;  
  --arm-color: black; 
  --feet-color: black;    
}


svg { width: 20%; }

<!-- master robot svg --> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="robot" class="robo-1">
    <!-- head -->
    <path style="fill:var(--head-color, black)" fill="black" d="M751.8 203.2H639.9l90.7-114.7c3.4 1.3 7.1 1.9 10.9 1.9 19.6 0 35.5-18 35.5-40.3C777 28 761.1 10 741.5 10S706 28 706 50.3c0 8.9 2.5 17.1 6.9 23.8L610.7 203.2H403.9c9.8-9.9 16-24.3 16-40.3 0-29.9-21.5-54.1-48.1-54.1s-48.1 24.2-48.1 54.1c0 16 6.2 30.4 16 40.3h-91.5a114.8 114.8 0 0 0-114.5 115l34.3 306c0 63.5 51.3 115 114.5 115h435c63.2 0 114.5-51.5 114.5-115l34.3-306c0-63.5-51.2-115-114.5-115z"/>
    <!-- eyes -->
    <path style="fill:var(--eye-color, white)" fill="white" d="M332.9 541.4a32.2 32.2 0 0 1 0-64.4 32 32 0 0 1 32 32.2 32 32 0 0 1-32 32.2zm318.2 9.2c-19 0-34.3-13.4-34.3-29.9s15.4-29.9 34.3-29.9c19 0 34.3 13.4 34.3 29.9s-15.3 29.9-34.3 29.9z"/>
    <!-- body -->
    <path style="fill:var(--body-color, black)" fill="black" d="M385.4 753c-8.7 15-13.6 32.2-13.6 50.6 0 57.2 47.7 103.5 106.5 103.5h50.4c58.8 0 106.5-46.4 106.5-103.5 0-18.4-5-35.7-13.6-50.6H385.4z"/> 
    <!-- arms -->
    <path style="fill:var(--arm-color, black)" fill="black" d="M325.1 753a44.4 44.4 0 0 0-5.9 21.9c0 22.6 18.4 42.2 41.6 52l.1.6a108 108 0 0 1-.5-10c-1.9-12.7-5.5-38.6 8.8-64.4h-44.1zm314.8 0c4.2 14.2 9.4 37.7 7.1 63.5a64.3 64.3 0 0 0 38.1-63.5h-45.2z"/>
    <!-- feets -->
    <path style="fill:var(--feet-color, black)" fill="black" d="M572.9 916.5c-31.6 6.8-31.6 9.1-31.6 9.1l-8.8-.2a40 40 0 0 0-7.2 23.2c0 20.3 14.4 36.8 32.1 36.8 17.7 0 32.1-16.5 32.1-36.8a38.5 38.5 0 0 0-16.6-32.1zm-118.7 6.8s-6.8-2-16.8-6.5a40.2 40.2 0 0 0-17.5 34.1c0 21.6 15.4 39.1 34.3 39.1 19 0 34.3-17.5 34.3-39.1 0-10.4-3.6-19.9-9.5-26.9l-24.8-.7z"/>
</svg>


<!-- the clones are coming! -->
<svg viewBox="0 0 1000 1000" class="robo-2">
  <use xlink:href="#robot"></use>
</svg>
<svg viewBox="0 0 1000 1000" class="robo-3">
  <use xlink:href="#robot"></use>
</svg>
<svg viewBox="0 0 1000 1000" class="robo-4">
  <use xlink:href="#robot"></use>
</svg>

Codepen example

Answer 3

Your svg markup already defines a custom blue coloring for the 2018 so adding color: whatever; and fill: currentColor; won't override it, but it will override the part of the SVG that is black, which seems to be exactly what you want. Here's some screenshots of me editing your SVGs from chrome devtools:

color: red; + fill: currentColor; on SVG:

color: white; + fill:currentColor; + background: black; on SVG: