fbpx

Cambiar el color a un svg

svg

Hoy se me ocurrió hacer un experimento. Analizando los archivos de Fontawesome, descubrí que contenía archivos .svg, por lo que quise experimentar agregar una imagen de este tipo.

Copié únicamente ese archivo que quería implementar y lo metí como imagen:

<img src="img/youtube.svg" class="icono" />

Descubrí que podría cambiarle con CSS el tamaño, por lo que me imaginé que también podía hacer lo mismo con el color.

Quedó la clase con lo siguiente:

.icono{
  margin-top: 7px;
  margin-left: 7px;
  width: 25px;
  height: 25px;
}

Ahí fue que descubrí que no afectaba ni la propiedad color ni fill para Cambiar el color a un svg.

Investigando me di cuenta que un SVG es código XML, así que lo abrí con mi editor de textos.

 

Solución

Abriendo el .svg con un editor de texto plano como sublime text, solo le agrego la instrucción al final de la etiqueta svg:

fill: #FFFFFF;

Si es que lo quiero color blanco, ya que por default se muestra en negro.

 

Lo más interesante que investigué es que podemos incluir el código del archivo, incluso para cambiar los bullets de las listas con:

 

.clase{
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="13" height="13" ><polygon points="0,0 0,100 95,50" style="fill:#CC0000;"></polygon></svg>');
}

Existen muchas posibilidades y vale la pena investigar un poco más.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.