2

tengo la siguiente imagen en svg:

<svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">
   <path d="M7.75028 5.30723C7.58872 5.49072 7.50001 5.74463 7.50001 6C7.50001 6.27614 7.27615 6.5 7.00001 6.5C6.72387 6.5 6.50001 6.27614 6.50001 6C6.50001 5.52689 6.6613 5.0308 6.99974 4.64641C7.34684 4.25219 7.8597 4 8.50001 4C9.14033 4 9.65318 4.25219 10.0003 4.64641C10.3387 5.0308 10.5 5.52689 10.5 6C10.5 6.48947 10.3839 6.86964 10.1976 7.18921C10.0347 7.46855 9.82252 7.68963 9.65279 7.86652L9.61154 7.90956C9.42473 8.1051 9.28214 8.26391 9.17734 8.46406C9.07734 8.65505 9.00001 8.90847 9.00001 9.29292C9.00001 9.56906 8.77615 9.79292 8.50001 9.79292C8.22387 9.79292 8.00001 9.56906 8.00001 9.29292C8.00001 8.76109 8.11018 8.3464 8.29143 8.00022C8.46788 7.66319 8.70029 7.41576 8.88848 7.21878L8.91064 7.19559C9.09847 6.99908 9.23276 6.85858 9.33371 6.68547C9.42861 6.52273 9.50001 6.31707 9.50001 6C9.50001 5.74463 9.4113 5.49072 9.24974 5.30723C9.09684 5.13358 8.8597 5 8.50001 5C8.14033 5 7.90318 5.13358 7.75028 5.30723ZM8.49991 12.2122C8.88628 12.2122 9.19951 11.899 9.19951 11.5126C9.19951 11.1262 8.88628 10.813 8.49991 10.813C8.11353 10.813 7.8003 11.1262 7.8003 11.5126C7.8003 11.899 8.11353 12.2122 8.49991 12.2122ZM0.500011 8C0.500011 3.58172 4.08173 0 8.50001 0C12.9183 0 16.5 3.58172 16.5 8C16.5 12.4183 12.9183 16 8.50001 16C7.15078 16 5.87829 15.6656 4.76225 15.0748L1.12128 15.9851C0.950891 16.0277 0.770647 15.9777 0.646457 15.8536C0.522267 15.7294 0.472342 15.5491 0.514939 15.3787L1.42518 11.7378C0.834417 10.6217 0.500011 9.34923 0.500011 8ZM8.50001 1C4.63402 1 1.50001 4.13401 1.50001 8C1.50001 9.24504 1.82462 10.4128 2.39345 11.4247C2.45602 11.536 2.47363 11.6671 2.44266 11.791L1.68719 14.8128L4.70904 14.0574C4.83294 14.0264 4.96399 14.044 5.07531 14.1066C6.08726 14.6754 7.25497 15 8.50001 15C12.366 15 15.5 11.866 15.5 8C15.5 4.13401 12.366 1 8.50001 1Z" />
</svg>

Para poder aplicar un color de relleno, he utilizado el selector y propiedad:

svg {
fill: blue;
}

Esto funciona correctamente pero me gustaría saber si existe alguna posibilidad de que funcione sin tener que verme obligado a poner todo el código del svg en el html. He probado a utilizar la etiqueta img de la siguiente manera:

<img src="rutaImgen.svg" />

Pero esto no funciona... ¿Alguien conoce la solución?

Gracias de antemano.

2 respuestas 2

1

Fuente: respuesta original de @MaksimDimitrov en SO How can I change the color of an 'svg' element?


Para cambiar el color de cualquier SVG

  1. Agregamos la imagen SVG usando una etiqueta <img>.

    <img src="question-sign.svg" class="filter-red"/>
    
  2. Para filtrar a un color específico, usar el siguiente Codepen para convertir un código de color hexadecimal en un filtro CSS:

    Por ejemplo, la salida para #FF0000 es

    filter: invert(15%) sepia(98%) saturate(7083%) hue-rotate(1deg) brightness(96%) contrast(116%);
    
  3. Agregamos el filter de CSS a esta clase.

    .filter-red {
        filter: invert(15%) sepia(98%) saturate(7083%) hue-rotate(1deg) brightness(96%) contrast(116%);
    }
    

Ejemplo:

  • Archivo index.html
<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <img src="question-sign.svg" width="170" height="160" class="filter-red"/>
</body>
</html>
  • Archivo style.css
.filter-red {
  filter: invert(15%) sepia(98%) saturate(7083%) hue-rotate(1deg) brightness(96%) contrast(116%);
}
  • Archivo question-sign.svg
<?xml version="1.0" encoding="utf-8"?>
<svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">
   <path d="M7.75028 5.30723C7.58872 5.49072 7.50001 5.74463 7.50001 6C7.50001 6.27614 7.27615 6.5 7.00001 6.5C6.72387 6.5 6.50001 6.27614 6.50001 6C6.50001 5.52689 6.6613 5.0308 6.99974 4.64641C7.34684 4.25219 7.8597 4 8.50001 4C9.14033 4 9.65318 4.25219 10.0003 4.64641C10.3387 5.0308 10.5 5.52689 10.5 6C10.5 6.48947 10.3839 6.86964 10.1976 7.18921C10.0347 7.46855 9.82252 7.68963 9.65279 7.86652L9.61154 7.90956C9.42473 8.1051 9.28214 8.26391 9.17734 8.46406C9.07734 8.65505 9.00001 8.90847 9.00001 9.29292C9.00001 9.56906 8.77615 9.79292 8.50001 9.79292C8.22387 9.79292 8.00001 9.56906 8.00001 9.29292C8.00001 8.76109 8.11018 8.3464 8.29143 8.00022C8.46788 7.66319 8.70029 7.41576 8.88848 7.21878L8.91064 7.19559C9.09847 6.99908 9.23276 6.85858 9.33371 6.68547C9.42861 6.52273 9.50001 6.31707 9.50001 6C9.50001 5.74463 9.4113 5.49072 9.24974 5.30723C9.09684 5.13358 8.8597 5 8.50001 5C8.14033 5 7.90318 5.13358 7.75028 5.30723ZM8.49991 12.2122C8.88628 12.2122 9.19951 11.899 9.19951 11.5126C9.19951 11.1262 8.88628 10.813 8.49991 10.813C8.11353 10.813 7.8003 11.1262 7.8003 11.5126C7.8003 11.899 8.11353 12.2122 8.49991 12.2122ZM0.500011 8C0.500011 3.58172 4.08173 0 8.50001 0C12.9183 0 16.5 3.58172 16.5 8C16.5 12.4183 12.9183 16 8.50001 16C7.15078 16 5.87829 15.6656 4.76225 15.0748L1.12128 15.9851C0.950891 16.0277 0.770647 15.9777 0.646457 15.8536C0.522267 15.7294 0.472342 15.5491 0.514939 15.3787L1.42518 11.7378C0.834417 10.6217 0.500011 9.34923 0.500011 8ZM8.50001 1C4.63402 1 1.50001 4.13401 1.50001 8C1.50001 9.24504 1.82462 10.4128 2.39345 11.4247C2.45602 11.536 2.47363 11.6671 2.44266 11.791L1.68719 14.8128L4.70904 14.0574C4.83294 14.0264 4.96399 14.044 5.07531 14.1066C6.08726 14.6754 7.25497 15 8.50001 15C12.366 15 15.5 11.866 15.5 8C15.5 4.13401 12.366 1 8.50001 1Z" />
</svg>
  • Resultado:

introducir la descripción de la imagen aquí

3
  • A ver si entendí? Se pueden usar clases pero se deben pasar por un "filtro" especial?? Supongo que por eso no funcionaron las clases directas que probé en mi respuesta. Habría algún problema en usar la forma que uso en mi respuesta? Me refiero más que todo a rendimiento ya que por usabilidad supongo que tener el cambio de color en una clase es mejor pero antes se debe pasar por esos "filtros".
    – OCHOA
    el 24 jun. a las 11:46
  • Hola @OCHOA, filter es una regla CSS como cualquier otra. Lo "difícil" es crear la combinación justa para obtener el color deseado. Con respecto a tu respuesta, es válida, diría que no se ajusta al 100% a lo requerido en la pregunta. Con respecto al rendimiento, podría decirse que esta solución es más versatil: se puede tener 1 solo SVG cache-able, al que se le puede cambiar de color; el archivo CSS tambien es cache-able; optimización respecto al tamaño del documento principal; si se utiliza HTTP/2 la velocidad de carga es mejor. La mejor solución depende de muchos factores.
    – Marcos
    el 24 jun. a las 13:22
  • Bien, al menos el OP ya tiene donde escoger y en efecto, veo que lo "difícil" sería crear la combinación justa para obtener el color deseado.
    – OCHOA
    el 24 jun. a las 16:14
0

Se puede pero el fill lo debes hacer en el svg directamente.

Acá pongo en el CSS el fill blue pero no funciona.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parser</title>
    <!-- CSS Styles -->
    <style>
        svg {
            fill: blue;
        }
    </style>
</head>
<body>
    <img src="image.svg"/>

    <!-- Lo más recomendable es con un object para mayor interactividad -->
    <object type="image/svg+xml" data="image.svg"></object>
</body>
</html>

Pero si en el archivo image.svg lo pones, entonces funciona.

<svg width="17" height="16" style="fill: red;" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">
   <path d="M7.75028 5.30723C7.58872 5.49072 7.50001 5.74463 7.50001 6C7.50001 6.27614 7.27615 6.5 7.00001 6.5C6.72387 6.5 6.50001 6.27614 6.50001 6C6.50001 5.52689 6.6613 5.0308 6.99974 4.64641C7.34684 4.25219 7.8597 4 8.50001 4C9.14033 4 9.65318 4.25219 10.0003 4.64641C10.3387 5.0308 10.5 5.52689 10.5 6C10.5 6.48947 10.3839 6.86964 10.1976 7.18921C10.0347 7.46855 9.82252 7.68963 9.65279 7.86652L9.61154 7.90956C9.42473 8.1051 9.28214 8.26391 9.17734 8.46406C9.07734 8.65505 9.00001 8.90847 9.00001 9.29292C9.00001 9.56906 8.77615 9.79292 8.50001 9.79292C8.22387 9.79292 8.00001 9.56906 8.00001 9.29292C8.00001 8.76109 8.11018 8.3464 8.29143 8.00022C8.46788 7.66319 8.70029 7.41576 8.88848 7.21878L8.91064 7.19559C9.09847 6.99908 9.23276 6.85858 9.33371 6.68547C9.42861 6.52273 9.50001 6.31707 9.50001 6C9.50001 5.74463 9.4113 5.49072 9.24974 5.30723C9.09684 5.13358 8.8597 5 8.50001 5C8.14033 5 7.90318 5.13358 7.75028 5.30723ZM8.49991 12.2122C8.88628 12.2122 9.19951 11.899 9.19951 11.5126C9.19951 11.1262 8.88628 10.813 8.49991 10.813C8.11353 10.813 7.8003 11.1262 7.8003 11.5126C7.8003 11.899 8.11353 12.2122 8.49991 12.2122ZM0.500011 8C0.500011 3.58172 4.08173 0 8.50001 0C12.9183 0 16.5 3.58172 16.5 8C16.5 12.4183 12.9183 16 8.50001 16C7.15078 16 5.87829 15.6656 4.76225 15.0748L1.12128 15.9851C0.950891 16.0277 0.770647 15.9777 0.646457 15.8536C0.522267 15.7294 0.472342 15.5491 0.514939 15.3787L1.42518 11.7378C0.834417 10.6217 0.500011 9.34923 0.500011 8ZM8.50001 1C4.63402 1 1.50001 4.13401 1.50001 8C1.50001 9.24504 1.82462 10.4128 2.39345 11.4247C2.45602 11.536 2.47363 11.6671 2.44266 11.791L1.68719 14.8128L4.70904 14.0574C4.83294 14.0264 4.96399 14.044 5.07531 14.1066C6.08726 14.6754 7.25497 15 8.50001 15C12.366 15 15.5 11.866 15.5 8C15.5 4.13401 12.366 1 8.50001 1Z" />
</svg>

El resultado (al 500%) es este:

svg

Cabe mencionar que intente poner clase al img, al svg, pero con clases no funciona, con estilos en línea si.

Te dejo unos links muy buenos para poder jugar más con SVG's

https://css-tricks.com/using-svg/

https://vecta.io/blog/best-way-to-embed-svg

https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.