css - imagen - svg background color

img src SVG cambiando el color de relleno

Question

html

<img src="logo.svg" alt="Logo" class="logo-img">

css

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

El svg anterior se carga y se fill: #fff forma nativa fill: #fff pero cuando uso el css anterior para intentar cambiarlo a negro, no cambia, esta es la primera vez que juego con SVG y no estoy seguro de por qué no funciona.

Answer 1

¿Por qué no crear una fuente web con su imagen svg o imágenes, importar la fuente web en el css y luego cambiar el color del glifo usando el atributo de color css? No se necesita javascript

Answer 2

2018: Si desea un color dinámico, no desea usar javascript y no desea un SVG en línea, use una variable CSS. Funciona en Chrome, Firefox y Safari. editar: y borde

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

En su SVG, reemplace cualquier instancia de style="fill: #000" con style="fill: var(--color_fill)" .

Answer 3

Como SVG es básicamente un código, solo necesitas contenidos. Usé PHP para obtener contenido, pero puedes usar lo que quieras.

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

Luego, imprimí el contenido "como está" dentro de un contenedor div

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

Para establecer finalmente la regla para los hijos SVG del contenedor en CSS

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

Obtuve estos resultados con un icono de material SVG:

Mozilla Firefox 59.0.2 (64 bits) Linux

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

Opera 53.0.2907.37 Linux

Answer 4

El principal problema en su caso es que está importando el svg desde una etiqueta <img> que ocultará la estructura SVG.

<svg> usar la etiqueta <svg> junto con <use> para obtener el efecto deseado. Para que funcione, debe <path id=''myName''...> un id a la ruta que desea usar en el archivo SVG <path id=''myName''...> para poder recuperarlos desde <use xlink:href="#myName"/> . Prueba el recorte a continuación.

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

Tenga en cuenta que puede colocar cualquier URL antes del fragmento # si desea cargar el SVG desde una fuente externa (y no incrustarlo en su HTML). Además, normalmente no se especifica el relleno en el CSS. Es mejor considerar usar fill:"currentColor" dentro del propio SVG. El valor del color CSS del elemento correspondiente se utilizará en su lugar.

Answer 5

La respuesta de @Praveen es sólida.

No pude lograr que respondiera en mi trabajo, así que hice una función de jquery hover para ello.

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'');
});

Answer 6

Necesitas hacer que el SVG sea un SVG en línea . Puede hacer uso de este script, agregando una clase svg a la imagen:

/*
 * Replace all SVG images with inline SVG
 */
jQuery(''img.svg'').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr(''id'');
    var imgClass = $img.attr(''class'');
    var imgURL = $img.attr(''src'');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find(''svg'');

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

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

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

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, ''xml'');

});

Y luego, ahora si lo haces:

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

O tal vez:

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

¡Esto funciona!

Fiddle: http://jsfiddle.net/wuSF7/462/

Créditos para el script anterior: ¿Cómo cambiar el color de la imagen SVG utilizando CSS (reemplazo de imagen jQuery SVG)?

Answer 7

Para expandir la respuesta de @gringo, el método de Javascript descrito en otras respuestas funciona, pero requiere que el usuario descargue archivos de imagen innecesarios, y IMO, infla su código.

Creo que un mejor enfoque sería migrar todos los gráficos vectoriales de 1 color a un archivo webfont. He usado Fort Awesome en el pasado, y funciona muy bien si combina sus iconos / imágenes personalizados en formato SVG, junto con cualquier otro icono de terceros que pueda estar usando (Font Awesome, Bootstrap, etc.) en un solo archivo webfont. El usuario tiene que descargar. También puede personalizarlo, por lo que solo incluye los íconos de terceros que está usando. Esto reduce la cantidad de solicitudes que tiene que hacer la página, y usted tiene un peso general, especialmente si ya está incluyendo bibliotecas de iconos de terceros.

Si prefiere una opción más orientada al desarrollo, puede buscar "npm svg webfont" en Google y usar uno de los módulos de nodo más adecuados para su entorno.

Una vez que haya hecho cualquiera de estas dos opciones, entonces podría cambiar fácilmente el color a través de CSS, y lo más probable es que haya acelerado su sitio en el proceso.

Answer 8

Podrías establecer tu svg como una máscara. De esa manera, establecer un color de fondo actuaría como su color de relleno.

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/

Tenga en cuenta que este método no funciona para el navegador Edge. Puede verificarlo visitando este sitio web: https://caniuse.com/#search=mask

Answer 9

Primero tendrá que inyectar el SVG en el DOM de HTML.

Hay una biblioteca de código abierto llamada SVGInject que hace esto por usted. Utiliza el atributo onload para activar la inyección.

Aquí hay un ejemplo mínimo usando SVGInject:

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

Después de cargar la imagen, el onload="SVGInject(this) activará la inyección y el elemento <img> será reemplazado por el contenido del archivo SVG proporcionado en el atributo src .

Resuelve varios problemas con la inyección de SVG:

1. Los SVG pueden ocultarse hasta que la inyección haya terminado. Esto es importante si ya se aplica un estilo durante el tiempo de carga, lo que de lo contrario causaría un breve "flash de contenido sin estilo".

2. Los elementos <img> inyectan automáticamente. Si agrega SVG de forma dinámica, no tiene que preocuparse por volver a llamar a la función de inyección.

3. Se agrega una cadena aleatoria a cada ID en el SVG para evitar tener la misma ID varias veces en el documento si se inyecta un SVG más de una vez.

SVGInject es un Javascript simple y funciona con todos los navegadores que admiten SVG.

Descargo de responsabilidad: soy el coautor de SVGInject

Answer 10

Prueba el CSS puro:

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

más información en este artículo https://blog.union.io/code/2017/08/10/img-svg-fill/

Answer 11

Si su objetivo es simplemente cambiar el color del logotipo, y no necesariamente NECESITA usar CSS, entonces no use javascript o jquery como lo sugirieron algunas respuestas anteriores.

Para responder con precisión a la pregunta original, simplemente:

1. Abra su logo.svg en un editor de texto.

2. busque fill: #fff y reemplácelo con fill: #000

Por ejemplo, su logo.svg podría verse así cuando se abre en un editor de texto:

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

... solo cambia el relleno y guarda.

Answer 12

Si tiene acceso a JQuery, luego, extendiéndose a la respuesta de Praveen, se puede cambiar el color de diferentes elementos anidados dentro de SVG mediante programación:

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

Dentro de encontrar, puedes mencionar diferentes elementos que necesitan ser cambiados de color.

Answer 13

Esta respuesta se basa en la respuesta https://.com/a/24933495/3890888 pero con una versión de JavaScript simple de la secuencia de comandos utilizada allí.

Necesitas hacer que el SVG sea un SVG en línea . Puede hacer uso de este script, agregando una clase svg a la imagen:

/*
 * 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);

    });

});

Y luego, ahora si lo haces:

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

O tal vez:

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

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