img src SVG Ändern der Füllfarbe

Wenn Sie lediglich die Farbe des Logos ändern möchten und nicht unbedingt CSS verwenden müssen, sollten Sie kein Javascript oder Jquery verwenden, wie dies in früheren Antworten vorgeschlagen wurde. 

Um die ursprüngliche Frage genau zu beantworten, einfach:

1. Öffnen Sie Ihren logo.svg in einem Texteditor. 

2. suchen Sie nach fill: #fff und ersetzen Sie es durch fill: #000 

Beispielsweise könnte Ihr logo.svg beim Öffnen in einem Texteditor folgendermaßen aussehen:

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

... einfach die Füllung ändern und speichern. 

Sie können Ihre SVG als Maske festlegen. Auf diese Weise wird das Festlegen einer Hintergrundfarbe als Füllfarbe verwendet.

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/

Beachten Sie, dass diese Methode für den Edge-Browser nicht funktioniert. Sie können dies überprüfen, indem Sie diese Website besuchen: https://caniuse.com/#search=mask

Versuchen Sie es mit reinem CSS:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

weitere Informationen in diesem Artikel https://blog.union.io/code/2017/08/10/img-svg-fill/

Die Antwort von @Praveen ist solide.

Ich konnte es nicht dazu bringen, bei meiner Arbeit zu antworten, also habe ich eine Jquery-Hover-Funktion dafür gemacht. 

CSS

.svg path {
   transition:0.3s all !important;
}

JS/JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

Warum erstellen Sie nicht einen Webfont mit Ihrem svg-Bild oder Bildern, importieren Sie den Webfont in die css-Datei und ändern Sie dann einfach die Farbe der Glyphe mit dem css-Farbattribut?. __

2018: Wenn Sie eine dynamische Farbe wünschen, kein Javascript verwenden und keine Inline-SVG-Datei verwenden möchten, verwenden Sie eine CSS-Variable. Funktioniert in Chrome, Firefox und Safari. edit: und Edge

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

Ersetzen Sie in Ihrer SVG alle Instanzen von style="fill: #000" durch style="fill: var(--color_fill)".

Diese Antwort basiert auf Antwort https://stackoverflow.com/a/24933495/3890888 , jedoch mit einer einfachen JavaScript-Version des dort verwendeten Skripts.

Sie müssen aus dem SVG ein Inline-SVG machen. Sie können dieses Skript verwenden, indem Sie dem Bild eine Klasse svg hinzufügen:

/*
 * Replace all SVG images with inline 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");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

Und dann, wenn Sie es tun:

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

Oder vielleicht:

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

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

Sie müssen zuerst die SVG-Datei in das HTML-DOM einfügen. 

Es gibt eine Open-Source-Bibliothek namens SVGInject , die dies für Sie erledigt. Es verwendet das onload-Attribut, um die Injektion auszulösen.

Hier ist ein minimales Beispiel mit SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

Nachdem das Bild geladen wurde, löst onload="SVGInject(this) die Injektion aus und das <img>-Element wird durch den Inhalt der SVG-Datei ersetzt, die im src-Attribut enthalten ist.

Es löst mehrere Probleme mit der SVG-Injektion:

1. SVGs können ausgeblendet werden, bis die Injektion abgeschlossen ist. Dies ist wichtig, wenn bereits während der Ladezeit ein Style angewendet wird, der ansonsten zu einem kurzen "Flash" für nicht gestylte Inhalte führen würde.

2. Die <img>-Elemente werden automatisch eingefügt. Wenn Sie SVGs dynamisch hinzufügen, müssen Sie sich nicht darum kümmern, die Injektionsfunktion erneut aufzurufen.

3. Jeder ID in der SVG wird eine zufällige Zeichenfolge hinzugefügt, um zu vermeiden, dass dieselbe ID mehrmals im Dokument angezeigt wird, wenn eine SVG mehr als einmal injiziert wird. 

SVGInject ist Javascript und funktioniert mit allen Browsern, die SVG unterstützen.

Disclaimer: Ich bin der Co-Autor von SVGInject

Um die @gringo-Antwort zu erweitern, funktioniert die in anderen Antworten beschriebene Javascript-Methode, der Benutzer muss jedoch nicht benötigte Bilddateien herunterladen, und IMO bläht Ihren Code auf. 

Ich denke, ein besserer Ansatz wäre, alle einfarbigen Vektorgrafiken in eine Webfont-Datei zu migrieren. Ich habe Fort Awesome in der Vergangenheit verwendet, und es funktioniert hervorragend, wenn Sie Ihre benutzerdefinierten Symbole/Bilder im SVG-Format zusammen mit den Symbolen von Drittanbietern (Font Awesome, Bootstrap-Symbole usw.) kombinieren Eine einzelne Webfont-Datei, die der Benutzer herunterladen muss. Sie können es auch anpassen, sodass Sie nur die von Ihnen verwendeten Drittanbieter-Icons einbeziehen. Dies reduziert die Anzahl der Anforderungen, die die Seite stellen muss, und die Gesamtgewichtung der Seite, insbesondere wenn Sie bereits Symbolbibliotheken von Drittanbietern verwenden. 

Wenn Sie eine dev-orientiertere Option bevorzugen, können Sie Google "npm svg webfont" verwenden und eines der Knotenmodule verwenden, das für Ihre Umgebung am besten geeignet ist.

Sobald Sie eine der beiden Optionen ausgeführt haben, können Sie die Farbe einfach über CSS ändern. Wahrscheinlich haben Sie Ihre Website dabei beschleunigt.

Wenn Sie nur das Bild zwischen der echten Farbe und dem Schwarzweißbild umschalten, können Sie einen Selektor wie folgt einstellen:

{filter: none;}

und eine andere als:

{filter:grayscale(100%);}

Das Hauptproblem in Ihrem Fall ist, dass Sie die SVG-Datei aus einem <img>-Tag importieren, wodurch die SVG-Struktur ausgeblendet wird.

Sie müssen das <svg>-Tag in Verbindung mit dem <use> verwenden, um den gewünschten Effekt zu erzielen. Damit dies funktioniert, müssen Sie dem Pfad, den Sie in der SVG-Datei <path id='myName'...> verwenden möchten, eine id geben, um sie dann aus dem <use xlink:href="#myName"/>-Tag abrufen zu können .

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

<svg width="0" height="0">
  <defs>
    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>

  
  <span class="icon red">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>
  
    <span class="icon blue">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>

Beachten Sie, dass Sie eine beliebige URL vor dem Fragment # setzen können, wenn Sie die SVG-Datei aus einer externen Quelle laden möchten (und sie nicht in Ihren HTML-Code einbetten). Normalerweise geben Sie die Füllung nicht im CSS an. Es ist besser, fill:"currentColor" in der SVG selbst zu verwenden. Der CSS-Farbwert des entsprechenden Elements wird dann an seiner Stelle verwendet.

Da SVG im Grunde Code ist, benötigen Sie nur Inhalte. Ich habe PHP verwendet, um Inhalte zu erhalten, aber Sie können verwenden, was Sie möchten.

<?php
$content    = file_get_contents($pathToSVG);
?>

Dann habe ich Inhalt "wie er ist" in einem Div-Container gedruckt

<div class="fill-class"><?php echo $content;?></div>

Um die Regel für SVG-untergeordnete Elemente des Containers in CSS festzulegen

.fill-class > svg { 
    fill: orange;
}

Ich habe diese Ergebnisse mit einem Material-Icon SVG erhalten:

Mozilla Firefox 59.0.2 (64-Bit) Linux

Google Chrome66.0.3359.181 (Build oficial) (64 Bit) Linux

Opera 53.0.2907.37 Linux

Wissen Sie, das ist eine alte Frage, aber kürzlich sind wir auf das gleiche Problem gestoßen und haben es von der Serverseite gelöst. Dies ist eine PHP-spezifische Antwort, aber ich bin mir sicher, dass andere Envs etwas Ähnliches haben. Anstatt das img-Tag zu verwenden, rendern Sie das svg als svg aus dem Get-go.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

jetzt, wenn Sie die Datei rendern, erhalten Sie vollständige Inline-SVG