Изменение стилей SVG в img src с помощью CSS

Вы можете установить свой SVG в качестве маски. Таким образом, установка цвета фона будет действовать как ваш цвет заливки.

HTML

<div class="logo"></div>

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Пожалуйста, проверьте, поддерживает ли ваш браузер эту функцию: https://caniuse.com/#search=mask

Попробуйте использовать чистый CSS:

.logo-img {
  /* для черного */
  filter: invert(1);
  /* или для синего */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

Более подробную информацию можно найти в этой статье: https://blog.union.io/code/2017/08/10/img-svg-fill/

Если ваша цель просто изменить цвет логотипа и вам не обязательно использовать CSS, то не стоит прибегать к JavaScript или jQuery, как было предложено в некоторых предыдущих ответах.

Чтобы точно ответить на изначальный вопрос, просто выполните следующие шаги:

1. Откройте ваш файл logo.svg в текстовом редакторе.
2. Найдите строку с fill: #fff и замените её на fill: #000.

Например, ваш файл logo.svg может выглядеть следующим образом при открытии в текстовом редакторе:

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

... просто измените значение fill и сохраните изменения.

Этот ответ основан на ответе по ссылке https://stackoverflow.com/a/24933495/3890888, но включает в себя версию скрипта на чистом JavaScript.

Вам необходимо сделать SVG изображение встраиваемым (inline SVG). Вы можете использовать следующий скрипт, добавив класс svg к вашему изображению:

/*
 * Заменить все SVG изображения на встраиваемые SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Получаем тег SVG, игнорируя остальное
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Добавляем ID замененного изображения новому SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Добавляем классы замененного изображения новому SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Удаляем недопустимые XML теги согласно http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Проверяем, установлен ли viewport. Если viewport не установлен, SVG не будет масштабироваться.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'));
        }

        // Заменяем изображение на новый SVG
        img.parentNode.replaceChild(svg, img);

    });

});

После этого вы можете использовать следующий CSS:

.logo-img path {
  fill: #000;
}

Или, возможно:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

Использование веб-шрифтов для создания изображений в формате SVG — это интересный подход, который может сработать в определенных ситуациях. Однако стоит учитывать несколько нюансов:

1. Совместимость: Не все браузеры одинаково хорошо справляются с веб-шрифтами, особенно если речь идет о сложных SVG-глифах. Это может привести к нестабильному отображению на разных устройствах.

2. Изображения с детальной графикой: Если ваши SVG-изображения содержат много деталей или цветовых градиентов, то использование их в виде веб-шрифта может быть нецелесообразным. К тому же, некоторые элементы, такие как текстуры и тени, могут не воспроизводиться корректно.

3. Графическое качество: Веб-шрифты, несмотря на свою универсальность в изменении цвета, могут потерять качество при растяжении. SVG-файлы, наоборот, сохраняют четкость в любом размере.

4. Удобство использования: Веб-шрифты предполагают, что вы будете использовать глифы только как символы. Если вам нужно создать множество различных цветов или эффектов для одного изображения, может быть проще использовать обычные SVG-файлы и управлять их стилями через CSS.

Таким образом, хотя этот метод и может показаться простым и привлекательным в некоторых случаях, стоит тщательно оценить, подходит ли он для вашего конкретного проекта.